Still several files, not one
A tab wants 16 or 32 px, Windows wants 48 for the taskbar, iOS wants a 180 px touch icon, Android wants 192 and 512 for the home screen and manifest. Serve one 512 px PNG and every small rendering is downscaled on the fly — badly, because detail that works at 512 becomes mush at 16.
The .ico format exists for this: one container, several images, the browser picks the size it needs. This tool writes a genuine ICO holding 16, 32 and 48 px images, not a PNG with its extension changed.
| File | Size | Read by |
|---|---|---|
favicon.ico | 16 + 32 + 48 in one file | Tabs, bookmarks, Windows |
favicon-32x32.png | 32 × 32 | Modern browsers on high-DPI screens |
apple-touch-icon.png | 180 × 180 | iOS home screen, Safari |
android-chrome-192x192.png | 192 × 192 | Android home screen |
android-chrome-512x512.png | 512 × 512 | Manifest, install prompt, splash |
Design at 16 px first
Sixteen pixels holds about one letter's worth of detail. Whatever survives that size should drive the design: one shape, one or two colours, no gradients, no words beyond an initial. If the logo is only recognisable at 128 px, the tab shows a smudge — the failure people actually notice with fifteen tabs open. Keep padding minimal for favicons; at 16 px it only makes the mark smaller. Save generous margins for the Android and iOS sizes.
Where the files go
All of them at the site root, because browsers and crawlers request /favicon.ico whether it is linked or not — which is also why an ICO is still worth shipping: without one, every visit logs a 404. The other files need explicit <link> tags; the snippet above lists them in evaluation order. The sizes="any" on the ICO line stops Chrome preferring it over your sharper PNGs on high-DPI displays.
Favicons and the app
Inside an Android app the favicon is invisible — the launcher uses the APK's icon resources, which the icon set generator produces. But the two should match: someone who finds your site in a browser and your app on Google Play should see one brand, and reviewers notice when a store icon looks unrelated to the site it wraps. The apple-touch-icon and the Android PNGs are the overlap — what appears if a visitor adds the site to their home screen instead — and they are referenced from the web app manifest.
What about an SVG favicon?
Current Chrome, Firefox and Safari support SVG favicons, which scale perfectly and can adapt to dark mode. They are a good addition rather than a replacement: older browsers, feed readers and OS surfaces still want a raster. Ship the SVG if you have one, keep the ICO as the fallback.