Favicons started simple. One 16x16 pixel icon in the browser tab. Now there are dozens of "recommended" sizes floating around the internet, and most of them are unnecessary. This guide cuts through the noise. ## The Short Answer For most websites in 2025, you need these files: | File | Size | Purpose | |------|------|---------| | favicon.ico | 32x32 | Legacy browsers, bookmarks | | favicon.svg | scalable | Modern browsers | | apple-touch-icon.png | 180x180 | iOS home screen | | icon-192.png | 192x192 | Android, PWA | | icon-512.png | 512x512 | PWA splash screens | That's it. Five files cover every real-world scenario. You can stop reading here if you just want the answer. ## Why So Few? Old favicon guides list 15+ sizes. Most of those come from a time when browsers couldn't scale images well, or from Apple's early iOS versions that needed exact dimensions. Modern browsers are smarter. They scale SVGs perfectly and handle PNG scaling well enough for favicons. The only exceptions are legacy IE support (use .ico) and iOS home screen icons (use 180x180). ## The favicon.ico File The .ico format is ancient but still useful. It's the only format old browsers reliably support, and it's what browsers look for by default at `/favicon.ico`. You can embed multiple sizes in one .ico file: | Size | Used For | |------|----------| | 16x16 | Browser tabs | | 32x32 | Taskbar, bookmarks | Most favicon generators create multi-size .ico files automatically. If you're making one manually, include both 16x16 and 32x32. Put this in your HTML head: ```html ``` Or just place `favicon.ico` at your site root. Browsers will find it automatically. ## The SVG Favicon SVG favicons are the modern approach. One file, infinite scaling, and you can even include CSS for dark mode support. ```html ``` An SVG favicon can adapt to dark mode: ```svg ``` Browser support is excellent. Chrome, Firefox, Safari, and Edge all support SVG favicons. Only IE doesn't, which is why you keep the .ico as a fallback. ## Apple Touch Icon When someone adds your site to their iOS home screen, Safari uses the Apple touch icon. This needs to be a PNG: ```html ``` Apple recommends 180x180 pixels. iOS will scale it down for different device sizes. Don't add rounded corners or gloss effects. iOS handles the corner radius automatically, and the gloss effect was removed years ago. The file should be named `apple-touch-icon.png` and placed at your site root. Safari looks there by default even without the link tag. ## PWA Icons If your site is a Progressive Web App, you need icons in your web manifest: ```json { "icons": [ { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" }, { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" } ] } ``` The 192x192 icon appears on Android home screens. The 512x512 icon is used for splash screens when the PWA launches. You can add more sizes, but these two cover the important cases. Android scales them as needed for other contexts. ## The Full HTML Setup Here's what to put in your document head: ```html ``` Browsers pick the most appropriate format. Modern browsers use SVG, older ones fall back to .ico, and iOS uses the Apple touch icon. ## What About All Those Other Sizes? You might see guides recommending 16x16, 32x32, 48x48, 64x64, 96x96, 128x128, 152x152, 167x167, 180x180, 192x192, 256x256, 384x384, 512x512... Most of these are outdated or redundant: - **16x16, 32x32:** Covered by favicon.ico - **48x48, 64x64, 96x96, 128x128, 256x256:** Windows tile icons from the Windows 8 era. Nobody uses these anymore. - **152x152, 167x167:** Old iPad sizes. The 180x180 works fine for all iOS devices now. - **384x384:** No browser specifically requests this size. The five-file approach works because browsers scale images. A 512x512 PNG scales down cleanly to 48x48 if some edge case needs it. ## Common Mistakes **Too many files.** More sizes don't mean better support. They just bloat your project and complicate maintenance. Stick to what browsers actually use. **Wrong apple-touch-icon size.** Using 152x152 or 144x144 instead of 180x180. The old sizes still work, but 180x180 looks sharper on newer iPhones. **Forgetting the .ico fallback.** SVG favicons are great, but the .ico ensures compatibility with older browsers and some RSS readers that only look for favicon.ico. **Adding iOS gloss effects.** This hasn't been a thing since iOS 7. Don't add gloss or rounded corners to your touch icon. **Transparent backgrounds on touch icons.** iOS fills transparent areas with black. If your icon has transparency, add a solid background color. ## Testing Your Favicons After setting up your favicons: 1. Check the browser tab. Does your icon appear? 2. Bookmark the page. Does the bookmark show the right icon? 3. Add to iOS home screen. Does the touch icon look correct? 4. On Android, add to home screen. Check the PWA icon. 5. Use a favicon checker tool to verify all sizes are accessible. Clear your browser cache if you're updating existing favicons. Browsers cache these aggressively. ## File Checklist Before deploying, make sure you have: - [ ] `/favicon.ico` (32x32, or multi-size with 16x16 and 32x32) - [ ] `/favicon.svg` (any viewBox, typically 32x32) - [ ] `/apple-touch-icon.png` (180x180, PNG, no transparency) - [ ] `/icon-192.png` (192x192, for PWA/Android) - [ ] `/icon-512.png` (512x512, for PWA splash) - [ ] HTML link tags in document head - [ ] Web manifest if you're building a PWA That covers favicons for any modern website. Five files, universal browser support, and no wasted effort on sizes nobody uses.

Skip the manual work