The Ultimate Guide to Favicons in 2025: Formats, Sizes, and Best Practices

It’s a tiny 16x16 pixel square, but it’s the face of your website.

The Favicon (Favorite Icon) is crucial for user experience. It helps users identify your tab among dozens of open pages, adds professionalism to your site, and even impacts SEO indirectly by improving click-through rates.

But in 2025, handling favicons is surprisingly complex. Should you still use .ico? Do you need a 32x32 or a 192x192? What about Dark Mode?

This guide covers everything you need to know to implement the perfect favicon setup.

1. The Formats: ICO vs. PNG vs. SVG

The Classic: .ico

For years, favicon.ico was the only standard. It’s a unique container format that can hold multiple resolutions (16x16, 32x32, 48x48) in a single file.

• Pros: Supported by every browser, including ancient IE versions.
• Cons: Harder to create than PNGs.

The Modern Standard: .png

Today, PNG is the go-to format for favicons. It supports alpha transparency and is easy to generate.

• Pros: High quality, easy to create.
• Cons: You need multiple files for different sizes.

The Future: .svg

SVG favicons are a game-changer. They scale infinitely and, most importantly, support CSS media queries. This means you can change your favicon color based on the user's system theme (Light/Dark mode).

• Pros: Infinite scaling, Dark Mode support.
• Cons: Partial support in older browsers (needs a fallback).

2. The Essential Sizes Checklist

You don't need to generate 20 different files anymore. Here is the lean, modern checklist for 2025:

• 16x16: For browser tabs (desktop).
• 32x32: For high-DPI (Retina) screens and taskbars.
• 180x180: For Apple Touch Icon (iPhone/iPad home screen).
• 192x192: For Android Chrome home screen.
• 512x512: For PWA (Progressive Web Apps) splash screens.

3. The Perfect HTML Setup

Stop copying code from 2015. Here is the clean, modern HTML implementation:

<!-- 1. SVG for modern browsers (with Dark Mode support!) -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">

<!-- 2. PNG fallback for Safari & others -->
<link rel="icon" href="/favicon-32x32.png" type="image/png">

<!-- 3. Apple Touch Icon (iPhone Home Screen) -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

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

Pro Tip: Place a favicon.ico file in your root directory (/favicon.ico) as a fallback for legacy tools and bots, even if you don't link it in your HTML.

4. Dark Mode Support with SVG

This is the coolest feature of modern favicons. You can make your icon adapt to the user's theme.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <style>
    path { fill: #000; } /* Default (Light Mode) */
    @media (prefers-color-scheme: dark) {
      path { fill: #fff; } /* Dark Mode */
    }
  </style>
  <path d="..." />
</svg>

Now your black logo won't disappear on a dark browser tab!

5. Troubleshooting: Why isn't my favicon showing?

• Browser Caching: Browsers cache favicons aggressively. Try opening your site in Incognito mode or append a version query string (e.g., href="/favicon.svg?v=2").
• Wrong Path: Ensure the path is relative to the root (/) or correct relative to the HTML file.
• Google Search Results: Google takes weeks to update the favicon in search results. Ensure your favicon is a multiple of 48px square (48x48, 96x96, 144x144) for best Google compatibility.

Conclusion

A broken or pixelated favicon screams "unfinished project." Taking 10 minutes to set this up correctly adds a layer of polish that users subconsciously trust.

Need to generate all these files from a single logo?
You can use our Favicon Generator to instantly create the ICO, PNGs, and site.webmanifest files with a preview of how they look in browsers and Google search.