Making a Favicon That Actually Looks Right at 16 Pixels

Favicons are a small problem that stays annoying because of one fact people keep meeting late: an ICO file is not an image. It is a container holding several images at different sizes, and the browser picks whichever it needs. That is why a favicon built from a single large PNG can look terrible in a tab and fine everywhere else.

The sizes that matter#

• 16x16 is the browser tab and the bookmark bar. It is the one people actually see, and the one a detailed logo fails at.
• 32x32 covers higher-density tabs and some desktop contexts. The most useful single size if you only ship one.
• 48x48 turns up in Windows shortcuts and a few desktop surfaces.
• 180x180 is the Apple touch icon, and it is a PNG rather than part of the ICO.

Convert PNG to ICO to produce the icon file itself, and keep an SVG as the master so every size can be regenerated from something that never degrades.

Why the small one looks wrong#

The practical answer used by most brands is a separate simplified mark for small sizes. Take the most recognisable element of the logo, drop everything else, thicken what remains, and use that for 16 and 32. It is not a compromise so much as the correct design for the medium.

Transparency and the dark-mode problem#

ICO supports transparency, and you should use it: a favicon with a white background is visible as a white square in a dark browser theme. But transparency alone is not enough. A dark logo on a transparent background disappears against a dark tab strip.

Check your icon against both. If the mark is monochrome and dark, give it a light outline or ship a contrasting shape. This is the single most common favicon defect on otherwise careful sites, and it is invisible to anyone who never switches theme.

A workable sequence#

1. Start from a vector master. Every raster size is then generated rather than resampled.
2. Make a simplified variant for 16 and 32 before generating anything.
3. Export clean PNGs at each size from the vector, rather than scaling one PNG down repeatedly.
4. Build the ICO from those PNGs, then look at it in a real tab in both light and dark themes.

If you are starting from a raster logo and want a vector master, tracing a PNG to SVG covers what that can and cannot do. For the general image format trade-offs, see image formats compared.