Favicon Sizes: What You Actually Need in 2025

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:

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:

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:

<link rel="icon" href="/favicon.ico" sizes="32x32">

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.

<link rel="icon" href="/favicon.svg" type="image/svg+xml">

An SVG favicon can adapt to dark mode:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    path { fill: #000; }
    @media (prefers-color-scheme: dark) {
      path { fill: #fff; }
    }
  </style>
  <path d="..."/>
</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:

<link rel="apple-touch-icon" href="/apple-touch-icon.png">

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:

{
  "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:

<!-- Standard favicon -->
<link rel="icon" href="/favicon.ico" sizes="32x32">

<!-- SVG favicon for modern browsers -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">

<!-- Apple touch icon -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<!-- Web manifest for PWA -->
<link rel="manifest" href="/manifest.webmanifest">

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.