What a complete set looks like
| File | Size | Where it shows up |
| --- | --- | --- |
| favicon.ico | 16 + 32 + 48 | browser tab, bookmarks, legacy requests |
| favicon-32x32.png | 32 | modern browser tabs |
| favicon-16x16.png | 16 | tabs at standard density |
| apple-touch-icon.png | 180 | iOS home screen |
| android-chrome-192x192.png | 192 | Android home screen |
| android-chrome-512x512.png | 512 | PWA splash screen |
Six files and a manifest. Anything more is a legacy list from a decade ago.
The head markup
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon-32x32.png" type="image/png" sizes="32x32">
<link rel="icon" href="/favicon-16x16.png" type="image/png" sizes="16x16">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
All of these go in the root of the site, not in an assets folder — several clients ignore the path and look at the root regardless.
Designing for 16 pixels
A logo that works on a business card usually fails as a favicon. At 16 px you have roughly 256 pixels total.
- One shape, not a wordmark. Text is unreadable below about 40 px.
- High contrast against both light and dark tab bars. Test on both.
- Drop the fine detail. Thin strokes disappear entirely after downscaling.
- Crop in. A monogram or the distinctive part of the mark beats the whole thing shrunk.
A real .ico, built here
This does not rename a PNG. It writes the actual ICO container — a directory header and one entry per size, with the PNG data embedded, which is what the format has allowed since Vista. Your image never leaves the browser.
Questions
Do I still need favicon.ico?+
Yes, and for an annoying reason: browsers request `/favicon.ico` from the site root even when no link tag mentions it. Without the file you get a 404 in your logs on every fresh visit. It costs a few kilobytes to prevent.
Why does a .ico hold several sizes?+
Because the format is a container. One file holds 16, 32 and 48 px versions, and the browser picks the one it needs. That matters because a 16 px icon downscaled from 512 px is mush — the small sizes need their own rendering.
What size should the source image be?+
At least 512 px square, ideally an SVG. Anything smaller means the 512 px PWA icon is upscaled and soft.
Does the icon need a transparent background?+
For the browser tab, transparency is fine and usually better. For the iOS touch icon it is not — iOS composites transparent areas onto black, which turns a dark logo invisible. Generate the touch icon with a solid background.