Favicons are easy to make and confusing to size. One source says 16, another says 512, and both are right — because they are talking about different places the icon shows up.
ICO is a box, not an image
A JPG or PNG file holds one picture. ICO does not. It stores several resolutions side by side in one file, and the operating system or browser picks whichever fits the slot it is filling. That is how a single favicon.ico can look crisp at 16 pixels in a tab and at 48 on a desktop shortcut.
A single size does work. But include only 16 and it turns soft anywhere larger; include only 256 and browsers downscale it into mush wherever it is small, because thin strokes do not survive scaling.
Where each size is used
| Size | Where it appears | Where it lives |
|---|---|---|
| 16x16 | Browser tab, address bar | favicon.ico |
| 32x32 | Tabs on high-DPI screens, bookmark lists | favicon.ico |
| 48x48 | Windows desktop shortcut | favicon.ico |
| 64 / 128 / 256 | Large icon views, some extensions | favicon.ico (optional) |
| 180x180 | iPhone and iPad 'Add to Home Screen' | PNG + apple-touch-icon |
| 192x192 | Android 'Add to Home Screen' | PNG + web manifest |
| 512x512 | PWA install prompt and splash screen | PNG + web manifest |
A realistic minimum is 16, 32 and 48 inside favicon.ico. Add a single 180 PNG and you have covered mobile home screens too. Only bother with 192 and 512 if you intend the site to be installable as a PWA.
Not every logo survives 16 pixels
Shrink a logo straight down and at 16 pixels it usually becomes a smudge — especially a wide wordmark. It helps to treat a favicon not as a miniature of the logo but as **a separate drawing whose only job is to be recognisable at 16 pixels**.
- If you use letters, use one. Two already run together.
- Thin strokes disappear. Exaggerate the weight so something remains.
- Leave a little padding. Artwork touching the edges looks clipped in a tab.
- Prefer a transparent background — tab backgrounds change in dark mode.
So, the order of operations
Start with one square PNG, generously sized at 256 or 512, ideally on a transparent background. Convert it to ICO with 16, 32 and 48 bundled in, then export a 180 PNG from the same source. If your source is not square, crop it square first — favicon slots always are, so anything else gets squashed.
Browsers look for `/favicon.ico` even with no markup pointing at it, so putting the file at the site root under that exact name is the simplest thing that works. If a change does not show up, it is almost always caching: try a hard refresh or a private window.