Favicon Sizes in 2024: The Complete Guide to Every Size You Actually Need

Here's a frustrating reality: most favicon guides either tell you to create a single 16x16 icon (woefully incomplete) or throw 30+ sizes at you without explaining which ones actually matter. Both approaches waste your time.

After years of testing favicons across every major browser and platform, I've distilled this down to the sizes that genuinely matter — and more importantly, why each one exists. By the end of this guide, you'll know exactly which favicon sizes to create, which file formats to use for each, and how to implement them with clean, production-ready code.

The Core Favicon Sizes You Need Right Now

Let's cut straight to it. Here are the favicon sizes that cover 99%+ of real-world use cases in 2024:

That's six sizes. Not thirty. Six.

Now, there are additional sizes that serve specific purposes (we'll cover those), but these six form the foundation that every website needs.

Browser Tab Favicons: 16x16 and 32x32

The classic favicon sizes — 16x16 and 32x32 pixels — exist primarily for browser tabs and bookmarks.

Why Both Sizes Matter

On standard displays (1x DPI), browsers render your favicon at 16x16 pixels in the tab. But here's what many developers miss: on Retina and high-DPI displays (which now represent the majority of devices), browsers will request the 32x32 version and downscale it to appear crisp at the 16x16 display size.

If you only provide 16x16, high-DPI users see a blurry, upscaled icon. It's subtle, but it makes your site look less polished than competitors who got this right.

The ICO Format Question

Should you use ICO or PNG for these sizes? Here's my tested recommendation:

For maximum compatibility, create a multi-resolution ICO file containing both 16x16 and 32x32. The ICO format (despite being ancient) is still the only format that Internet Explorer supports, and it's the fallback format all modern browsers check for.

For modern-only sites, you can skip ICO entirely and use PNG files. Every browser released after 2012 handles PNG favicons perfectly.

The practical approach: include both. An ICO file as the fallback, plus explicit PNG references for modern browsers:

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon-16x16.png" sizes="16x16" type="image/png">
<link rel="icon" href="/favicon-32x32.png" sizes="32x32" type="image/png">

Apple Touch Icon: 180x180 Pixels

When iOS users add your website to their home screen, Apple's Safari pulls a specific icon called the Apple Touch Icon. This is a larger, higher-quality image that represents your site alongside native apps.

Why Exactly 180x180?

Apple's requirements have evolved over the years. The current standard — 180x180 pixels — covers the iPhone's highest resolution displays. Here's the logic:

• iPhone display icons at 60x60 points
• The highest iOS device pixel ratio is 3x
• 60 × 3 = 180 pixels

If you provide 180x180, iOS automatically downscales for devices that need smaller versions (older iPhones, iPads). You don't need to provide 120x120, 152x152, or other legacy sizes anymore — 180x180 handles everything.

Implementation

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

A few critical details:

1. The filename matters. iOS will look for apple-touch-icon.png in your root directory even without the link tag. Always include both the file and the HTML reference.

2. Don't add the glossy effect. Apple stopped applying automatic gloss effects years ago. Design your icon to look exactly how you want it to appear.

3. Use full bleed. Unlike Android icons, Apple Touch Icons should fill the entire square. iOS applies the rounded corners automatically — don't round them yourself.

Android and PWA Icons: 192x192 and 512x512

Android Chrome and Progressive Web Apps require icons specified in a web app manifest file. Two sizes dominate here: 192x192 and 512x512.

Why These Specific Dimensions?

The 192x192 icon serves as the primary home screen icon on Android devices. Chrome specifically requests this size when users tap "Add to Home Screen."

The 512x512 icon serves two purposes:

1. PWA splash screens — When your PWA loads, this larger icon appears centered on the splash screen
2. Google Search — Google occasionally displays high-resolution site icons in search results and Google Discover

The Web App Manifest

These icons are declared in a manifest.json (or site.webmanifest) file:

{
  "name": "Your Site Name",
  "short_name": "Site",
  "icons": [
    {
      "src": "/favicon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/favicon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

Then reference the manifest in your HTML:

<link rel="manifest" href="/site.webmanifest">

Maskable Icons: The Detail Most Guides Skip

Android 8.0+ introduced adaptive icons, where the system can apply different shapes (circle, squircle, rounded square) to your icon. This requires a "maskable" icon variant.

For maskable icons, your design's core content must fit within a "safe zone" — a centered circle with approximately 80% of the icon's width. Content outside this zone may be cropped depending on the user's device settings.

{
  "src": "/favicon-192x192-maskable.png",
  "sizes": "192x192",
  "type": "image/png",
  "purpose": "maskable"
}

I recommend including both a standard and maskable version of your 192x192 and 512x512 icons. The standard version displays on platforms that don't crop; the maskable version ensures Android adaptive icons look correct.

Windows-Specific Sizes: 48x48 and Beyond

Windows uses favicons in several contexts beyond the browser tab:

• Desktop shortcuts — When users drag your site to the desktop
• Taskbar pins — When users pin your site in Windows
• Start menu tiles — For sites added to Start (legacy)

The 48x48 Sweet Spot

For most websites, a 48x48 PNG covers Windows shortcut needs adequately. Windows will scale it as needed for various display contexts.

If you're building a PWA that you genuinely expect users to install, consider adding larger Windows-specific tile images. But for standard websites? The 48x48 in your ICO or as a standalone PNG is sufficient.

The browserconfig.xml Option

Microsoft introduced browserconfig.xml for specifying Windows tile images:

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square150x150logo src="/mstile-150x150.png"/>
      <TileColor>#da532c</TileColor>
    </tile>
  </msapplication>
</browserconfig>

Honestly? Unless you have analytics showing significant Windows tile usage, this is diminishing returns territory. Cover it if you want completeness; skip it if you're prioritizing effort.

SVG Favicons: The Resolution-Independent Option

SVG favicons are the modern answer to the "which sizes do I need" question. One file, infinite scalability.

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

Browser Support Reality Check

As of 2024, SVG favicons work in:

• Chrome 80+
• Firefox 41+
• Edge 80+
• Safari 16+ (finally!)
• Opera 67+

That's solid coverage, but not universal. Internet Explorer doesn't support SVG favicons, and neither do some older Safari versions still in use.

The SVG Advantage: Dark Mode

Here's where SVG favicons genuinely shine. You can embed CSS media queries directly in the SVG to respond to dark mode:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
  <style>
    path { fill: #000000; }
    @media (prefers-color-scheme: dark) {
      path { fill: #ffffff; }
    }
  </style>
  <path d="M0 0h16v16H0z"/>
</svg>

This is genuinely useful. Many favicons that look great on light browser themes become invisible on dark themes. SVG lets you solve this elegantly.

My Recommendation

Use SVG as your primary modern favicon, with PNG/ICO fallbacks for older browsers:

<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon.png" type="image/png">
<link rel="icon" href="/favicon.ico" sizes="48x48">

Browsers will use the first format they support.

The Complete HTML Implementation

Putting it all together, here's production-ready HTML covering all major platforms:

<!-- Standard favicons -->
<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon-16x16.png" sizes="16x16" type="image/png">
<link rel="icon" href="/favicon-32x32.png" sizes="32x32" type="image/png">

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

<!-- Web App Manifest (for Android/PWA) -->
<link rel="manifest" href="/site.webmanifest">

<!-- Theme colors -->
<meta name="theme-color" content="#ffffff">

And the accompanying site.webmanifest:

{
  "name": "Your Website",
  "short_name": "Site",
  "icons": [
    { "src": "/favicon-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/favicon-512x512.png", "sizes": "512x512", "type": "image/png" }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

That's complete, modern, and production-ready.

Creating Your Favicon at Every Size

Understanding sizes is one thing; actually creating a crisp, recognizable icon at each dimension is another challenge entirely.

At 512x512 pixels, you have room for detail. At 16x16, you have exactly 256 pixels to work with. What looks great large often becomes an unrecognizable blur when scaled down.

The key principles for multi-size favicon design:

1. Start with the smallest size first. Design at 16x16, then scale up — not the reverse. This forces you to simplify.

2. Use different levels of detail. Your 512x512 can have more complexity than your 16x16. It's okay if they're slightly different.

3. Test at actual size. View your favicon at 16x16 pixels on an actual browser tab. What looks clear at 400% zoom may not work at true scale.

4. Embrace simplicity. The most recognizable favicons use one or two colors and a single, bold shape.

If you're starting from scratch and want to explore different directions quickly, try generating some favicon concepts to see these principles in action. It's much faster than iterating manually when you're still finding the right direction.

Common Favicon Size Mistakes

After auditing hundreds of websites' favicon implementations, these are the errors I see repeatedly:

Mistake 1: Only Including 16x16

Your high-DPI users (most people now) see a blurry icon. Always include 32x32 at minimum.

Mistake 2: Missing the Apple Touch Icon

iOS users who save your site to their home screen see a generic screenshot thumbnail instead of your icon. This looks unprofessional and reduces tap-through rates.

Mistake 3: Forgetting the Web Manifest

Android users adding your site to their home screen get a low-quality experience. The manifest also signals to Google that your site supports PWA features.

Mistake 4: Not Testing Dark Mode

A black favicon disappears on dark browser themes. A white favicon disappears on light themes. Test both, or use SVG with embedded dark mode styles.

Mistake 5: Rounding Apple Touch Icon Corners

iOS applies corner rounding automatically. If you pre-round your corners, you get double-rounding that looks off. Provide a square image with full-bleed design.

Conclusion

Favicon implementation doesn't need to be complicated. Six core sizes — 16x16, 32x32, 48x48, 180x180, 192x192, and 512x512 — cover the vast majority of use cases. Add an SVG for modern browsers and dark mode support, and you're set.

The real challenge isn't the technical implementation; it's creating a design that remains recognizable and striking at every size. Whether you're simplifying an existing logo or creating something new, remember that the best favicons embrace constraints rather than fighting them.

Ready to create a favicon that looks sharp at every size? Our favicon generator produces all the dimensions and formats covered in this guide, ready to download and implement immediately.

Frequently Asked Questions

What is the most important favicon size?

The 32x32 PNG is arguably the most critical single size. It serves high-DPI browser tabs (now the majority), Windows taskbar icons, and looks acceptable when scaled to 16x16 on standard displays. If you could only have one favicon, make it 32x32.

Do I need a favicon.ico file in 2024?

For maximum compatibility, yes. While modern browsers support PNG and SVG favicons, the .ico file serves as a universal fallback. Some older systems and applications still look for favicon.ico in the root directory by default. It's also the only format Internet Explorer supports, which still sees limited usage in enterprise environments.

What size should an Apple Touch Icon be?

180x180 pixels. This single size covers all current iOS devices. Apple no longer recommends providing multiple sizes — the system downscales 180x180 for devices that need smaller icons.

Can I use one favicon image for all sizes?

Technically yes, but it's not recommended. Browsers can scale a single image up or down, but the results often look blurry or lose important details. For best results, create optimized versions at 16x16, 32x32, and your larger icon sizes, with appropriate levels of detail for each.

What's the maximum favicon file size?

There's no strict limit, but aim to keep individual PNG favicons under 10KB and your ICO file under 50KB. Larger files slow down page loads without visual benefit. For the best balance, use PNG-8 or compressed PNG-24 formats, and ensure your SVG favicons are optimized without unnecessary metadata.