Generate every favicon size from one image

The favicon is the smallest piece of branding a site has and the one most likely to be wrong, because getting it right means producing about eight files at different sizes for different platforms, each with its own expectations, and then remembering the markup that points at them.

It has grown well beyond the original sixteen pixel icon. Browsers want a 32, Apple wants a 180 pixel touch icon with no transparency, Android wants 192 and 512 through a web manifest, and Windows tiles want their own. Miss one and it degrades quietly: your logo appears everywhere except on a phone home screen, where it becomes a grey square or a screenshot of the page.

The design constraint is the interesting part. A favicon is often displayed at sixteen pixels, which is roughly the size of a full stop. A detailed logo scaled down to that becomes a smudge, and the fix is not a better scaler, it is a different mark: one letter, one shape, high contrast, no fine lines. Most brands with a good favicon are using a simplified version of their logo rather than the logo itself.

Two details catch people out. The Apple touch icon must not be transparent, because iOS composites it onto black and a transparent logo disappears; give it a solid background. And a favicon is cached aggressively, so a change may not appear for you even after a hard refresh, which sends people round in circles convinced it has not worked.

Dark mode is the modern addition. A dark logo on a transparent background vanishes against a dark browser chrome, and since tab bars are dark for a large share of users, an icon that only works on white is an icon that is missing for many of them. Testing against both is a ten second job that is almost never done.

Everything happens in your browser, and you get the head snippet along with the files, which is the part most generators leave you to look up.