The tiny icon in a browser tab, bookmark and history list is the favicon. A good one makes your site look finished and easier to spot among a dozen open tabs.
We measured this ourselves. A favicon is genuinely tiny. Our transparent logo went from a 28.8 KB PNG to a 951-byte ICO — and that single file holds three sizes at once (16, 32 and 48 px). Because the output is so small, the source resolution barely matters; what matters is whether the shape still reads at 16 px. see the full measurements
What a favicon actually is
Traditionally it lives at /favicon.ico, and .ico is a container that holds several sizes in one file — commonly 16×16, 32×32 and 48×48. The browser picks whichever fits the spot (tab, bookmark, taskbar). That is why a real .ico beats a lone PNG: one file stays crisp at every size.
Start from a square image
- Use a square source, ideally 256×256 or larger. Non-square images get cropped or letterboxed.
- Keep it simple — at 16px, fine detail vanishes. A single letter, mark or bold shape reads best.
- A PNG with a transparent background works well.
Make the .ico — nothing uploaded
Your logo is your brand; there is no need to send it to an unknown server. This runs entirely in your browser:
- PNG to ICO / Favicon generator — drop a PNG and get a multi-size
favicon.ico.
Add it to your site
Put favicon.ico in your site root and reference it in the page head:
<link rel="icon" href="/favicon.ico" sizes="any">Modern browsers also accept a PNG icon, and many sites ship both. If the icon does not update, hard-refresh — browsers cache favicons aggressively.
Need a scalable logo instead of a fixed-size icon? See How to convert PNG to SVG.
Which sizes you actually need
One .ico covers the classic desktop spots, but modern devices ask for a few extra PNGs. Here is the practical set:
| Size | File | Where it shows up |
|---|---|---|
| 16×16, 32×32, 48×48 | favicon.ico | Browser tab, bookmarks, Windows shortcuts |
| 180×180 | apple-touch-icon.png | iOS “Add to Home Screen” |
| 192×192 | icon-192.png | Android home screen |
| 512×512 | icon-512.png | PWA install prompt and splash screen |
You do not need every size for a basic site — a favicon.ico plus a 180×180 Apple touch icon covers the vast majority of visitors.
Size is the one thing a favicon cannot afford to get wrong, so here is what our own PNG to ICO converter actually produced from the alpha logo in our test corpus:
| Test image | Input | Output | Change |
|---|---|---|---|
| Logo with alpha | 28.8 KB | 951 B | -97% |
The input was 28.8 KB and the ICO came out 951 B (-97%). An ICO is a container holding several bitmaps — ours packs 16, 32 and 48 px — but every one of them is tiny, so the whole file is a small fraction of a full-resolution source PNG. That is what a favicon is: not a scaled-down copy of your logo, but a few small renderings of it delivered in one request.
The full set of tags
Point browsers and phones at the right file from your page <head>:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" href="/icon-192.png" sizes="192x192">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">For a PWA, list the large icons in the manifest:
{
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
]
}ICO vs PNG
- Use
.icofor the main favicon: one file, several sizes, works everywhere including old browsers. - Use PNG for the Apple touch icon and PWA icons — those specs expect a single-size PNG, not an
.ico.
Shipping both is the norm, not overkill.
The alternatives are worth measuring rather than arguing about — as long as you measure the right thing. Converting the same source logo to JPG gives 16.3 KB (-43%) and to WebP 7.5 KB (-74%), but both of those are full-resolution images and both are many times the 951 B of the ICO above, whose largest bitmap is only 48 px. At favicon size the file sizes stop mattering and two other differences take over: JPG has no transparency at all, so a JPG favicon shows a white box on a dark browser theme, and Safari gained WebP support only in version 14, so a WebP-only setup falls back to the default icon on anything older. ICO for the legacy slot, PNG for the modern one, JPG never.
Common mistakes
- “It didn’t work” — but the cache did. Browsers hold on to favicons hard. Hard-refresh, open a private window, or bump the URL (
/favicon.ico?v=2) before assuming it failed. - No Apple touch icon. Without one, iOS grabs a blurry screenshot of your page for the home screen.
- A busy source image. Fine lines and text disappear at 16px. Start from a square, bold mark; crop it square first if needed.
FAQ
Do I still need favicon.ico?
Yes. It is the reliable fallback every browser checks, and it is the one file that carries 16/32/48 together.
Why doesn’t my new favicon show up?
Almost always caching, not your markup. Force a reload or add a version query string, then check again.
What size should the source image be?
Start at 256×256 or larger and square. The generator downsizes cleanly; upsizing a tiny icon never looks sharp.