Making a favicon takes three steps: prepare a square image, convert it to an ICO file, and add one <link> tag to your HTML. The conversion part runs in your browser with our image to ICO converters — no uploads, no account. The whole job takes about five minutes. Here is each step with the details that actually matter.
What a favicon actually is
A favicon is the small icon tied to your site. It shows up in browser tabs, bookmark lists, browsing history, and next to the URL in some browsers. At 16×16 pixels in a tab strip, it is often the only branding a visitor sees once they have eight tabs open.
The classic favicon is an .ico file, and ICO has one property that matters here: it is a container. A single ICO file can hold the same image at several resolutions — typically 16×16, 32×32, and 48×48 — and the browser picks the right one for the context. The tab strip grabs 16, a retina display grabs 32, the Windows shortcut dialog grabs 48. The mechanics of the container format are in our ICO format deep dive.
The convention dates to Internet Explorer 5 in 1999, which automatically requested /favicon.ico from every site it visited. The file name stuck. And the icon's reach has grown since: Google shows favicons next to results in mobile search, so this 16-pixel square has quietly become part of your search snippet, not just tab decoration.
Step 1: prepare the source image
The source image decides whether the favicon looks sharp or like a smudge. Three rules:
Make it square. Favicons are square. If your logo is wide, crop or pad it to a square canvas first, or the conversion will squeeze it.
Keep it simple. At 16×16, there are 256 pixels total. Thin lines, gradients, and small text all dissolve into noise. A single bold shape or one or two letters in a heavy weight survives; a detailed illustration does not. Test by zooming your image out to thumbnail size — if you cannot recognize it there, neither can a browser tab.
Start big. Work from at least 512×512. Downscaling hides imperfections; upscaling invents them.
The file format of the source barely matters. Use PNG or WebP if your icon has a transparent background — JPG cannot store transparency, so the transparent areas would come out flattened onto white. For a flat logo on a solid background, JPG is fine too.
Step 2: convert the image to ICO
Drop the source file into the converter that matches its format: PNG to ICO, JPG to ICO, or WebP to ICO. The tool decodes the image locally in your browser, packs the standard sizes into a single ICO container, and gives you one file to download. Nothing is uploaded; the whole thing runs on your machine.
The multi-size container is the reason to prefer ICO over renaming a PNG. A 512×512 PNG linked as a favicon forces the browser to downscale it on the fly, and automatic downscaling is not kind to fine shapes. An ICO carries hand-sharpened small versions, and the browser simply picks.
Which sizes go inside, and when you need extra files beyond ICO, is its own topic — our favicon sizes guide has the full table, including the apple-touch-icon sizes for iOS home screens.
Step 3: add it to your site
Put favicon.ico in the root of your site and add one line to the <head> of your pages:
<link rel="icon" href="/favicon.ico" sizes="any" />
The sizes="any" hint tells the browser the file holds multiple resolutions, so it should pick the best fit rather than assuming 16×16.
Placing the file at /favicon.ico matters beyond the link tag. Browsers request that path automatically for sites that declare nothing, and tools like feed readers and crawler previews look there too. A favicon at the root works even for pages that forget the tag.
Modern browsers also accept PNG favicons, declared like this:
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png" />
PNG favicons are smaller per file and easier to generate, but the compatibility crown still belongs to ICO: it works in every browser ever shipped, it is the format the automatic /favicon.ico request expects, and one file covers every size. Serving both — ICO at the root plus PNG declarations — is the belt-and-suspenders setup most sites end up with.
Check the result
Hard-refresh the page (favicons cache aggressively), then check the tab, the bookmark bar, and your history list. If the icon looks muddy at tab size, the fix is almost never the converter — it is the source image. Go back to step 1, simplify the shape, and convert again.
Your logo file is probably sitting in a folder right now. Drop it into the converter, wire up the link tag, and your tab stops being a blank document icon.