I used to generate every possible favicon size — 16×16, 24×24, 32×32, 48×48, 57×57, 60×60, 64×64, 70×70, 72×72, 76×76, 96×96, 114×114, 120×120, 128×128, 144×144, 150×150, 152×152, 180×180, 192×192, 256×256, 512×512. Twenty-one sizes — the full list from the MDN link element docs and every "definitive favicon guide" blog post from the last decade. It took forever, and most of those sizes were for devices nobody uses anymore. Here's the trimmed-down list I actually ship in 2026.
| Size | Use Case | Still Needed? |
|---|---|---|
| 16×16 | Legacy browser tabs, bookmarks in old Firefox | Yes — universal fallback |
| 32×32 | Modern browser tabs (Chrome, Edge, Safari) | ✅ Yes — primary size |
| 48×48 | Windows taskbar pinning, some bookmarks | Nice to have |
| 64×64 | High-DPI bookmarks, Edge new tab page | Nice to have |
| 128×128 | Chrome Web Store, some PWA manifests | ✅ Yes — PWA minimum |
| 180×180 | Apple touch icon (iOS home screen) | ✅ Yes — one size covers all iOS |
| 256×256 | High-DPI PWA, Windows tiles | Future-proof |
The 57×57 (pre-iOS 7), 72×72 (iPad 1/2), 114×114 (iPhone 4 Retina) — all deprecated. Apple's current devices use 180×180 for everything. Windows tiles (150×150, 310×310) died with Windows 8. I also skip 192×192 because 256×256 downscales perfectly and covers the same use case.
After years of copy-pasting giant favicon blocks, this is all I put in my <head> now:
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
Three lines. That's it. The 48, 64, 128, and 256 sizes go into a site manifest or get served via a /favicon.ico that bundles multiple sizes. But honestly, 16+32+180 covers 95% of your visitors. I generate all sizes with GenFavicon and just use whichever ones a given project needs.