How to Add a Favicon to Your Website

Nov 23, 2025 · 3 min read

Your website needs a favicon. That small icon in browser tabs isn’t just decoration—it’s how users identify your site among dozens of open tabs, how Google displays your site in search results, and how iOS saves your site to home screens. Yet most favicon guides are outdated, recommending legacy formats and unnecessary files.

This article covers the modern, minimal favicon setup that works everywhere: favicon SVG for modern browsers, favicon PNG for fallbacks, Apple Touch Icon for iOS devices, and web manifest icons for Progressive Web Apps.

Key Takeaways

Modern favicon setup requires only a small set of essential files: an ICO fallback, an SVG favicon, a 32×32 PNG, an Apple Touch Icon, and a couple of web-manifest icons.
SVG favicons scale perfectly and support dark mode through CSS media queries
Safari and iOS now fully support SVG favicons, so they can serve as the primary icon for modern browsers
Aggressive browser caching requires versioning strategies when updating favicons

The Modern Favicon Stack

Forget the dozens of icon sizes from 2015. Here’s what you actually need:

Essential Icons

favicon.ico (multi-size, typically 16×16 and 32×32) – Legacy fallback
favicon.svg - Scalable for all modern browsers
icon-32.png - Browser UI and Google search results
apple-touch-icon.png (180×180) - iOS home screen
icon-192.png and icon-512.png - Web manifest for PWAs

Safari and iOS now fully support SVG favicons. Claims about missing SVG support are outdated—every major browser now supports SVG favicons reliably.

HTML Implementation

Add these four lines to your <head>:

<!-- Fallback for legacy browsers -->
<link rel="icon" href="/favicon.ico">

<!-- PNG for browser UI and Google SERPs -->
<link rel="icon" href="/icon-32.png" sizes="32x32" type="image/png">

<!-- Modern browsers (scales cleanly) -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">

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

<!-- Web manifest for PWAs -->
<link rel="manifest" href="/manifest.json">

Note: Skip rel="shortcut icon"—it’s been deprecated since 2003. Just use rel="icon".

Creating Your Icons

SVG Favicon

SVG favicons scale infinitely and support features like dark mode:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
  <style>
    path { fill: #000; }
    @media (prefers-color-scheme: dark) {
      path { fill: #fff; }
    }
  </style>
  <path d="M64 16L16 112h96z"/>
</svg>

Keep SVG favicons simple. Complex gradients and effects won’t render well at 16×16 pixels.

PNG Favicon

The 32×32 PNG serves two critical purposes:

Fallback for browsers that don’t support SVG
Display in Google search results

Use a tool like RealFaviconGenerator or Favicon.io to generate PNG versions from your SVG.

Apple Touch Icon

iOS requires a 180×180 PNG with:

No transparency (use a solid background)
No rounded corners (iOS adds them)
High contrast for visibility on various wallpapers

Name it exactly apple-touch-icon.png and place it in your root directory. iOS will find it automatically, even without the <link> tag, but explicit linking ensures reliability.

Web Manifest Icons

For Progressive Web Apps, create a manifest.json:

{
  "name": "Your App",
  "short_name": "App",
  "icons": [
    {
      "src": "/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

These web manifest icons enable “Add to Home Screen” functionality on Android and desktop PWA installation.

Dark Mode Support

Beyond the SVG media query approach, you can swap favicons with JavaScript:

const favicon = document.querySelector('link[rel="icon"]');
const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');

function updateFavicon(e) {
  favicon.href = e.matches ? '/favicon-dark.svg' : '/favicon-light.svg';
}

darkModeMediaQuery.addEventListener('change', updateFavicon);
updateFavicon(darkModeMediaQuery);

Dealing with Cache

Browsers cache favicons aggressively. When updating your icon:

Version the filename: Change favicon.svg to favicon-v2.svg
Add a query string: favicon.svg?v=2
Update all references in your HTML

For immediate testing, open your site in an incognito/private window.

Common Issues

Favicon not showing?

Check the path—use absolute paths (/favicon.svg) not relative
Verify MIME types: SVG needs image/svg+xml
Test in incognito mode to bypass cache

Blurry on retina displays?

Use SVG as your primary icon
Ensure PNG exports are exactly 32×32 and 180×180

Wrong icon on iOS?

iOS prioritizes apple-touch-icon.png in the root directory
Clear Safari’s cache: Settings → Safari → Clear History and Website Data

Conclusion

Modern favicon implementation is simpler than legacy guides suggest. Five files—ICO, SVG, PNG, Apple Touch Icon, and web manifest icons—cover every browser, device, and use case. Skip the outdated multi-dozen icon sets and Windows tile metadata unless you specifically need them.

Focus on a clean SVG favicon as your primary icon, add the essential fallbacks, and your site will display perfectly everywhere from browser tabs to iOS home screens.

FAQs

While SVG favicons work in all modern browsers, you still need fallbacks. Legacy browsers require ICO files, iOS needs apple-touch-icon.png for home screen shortcuts, and Google search results specifically look for PNG favicons.

Some browsers automatically adjust favicon colors for visibility in dark mode. To control this behavior, use CSS media queries in your SVG favicon or implement JavaScript-based favicon switching for consistent appearance.

Favicon updates can take hours to days depending on browser caching. Force immediate updates by versioning filenames or adding query strings. Google search results may take several weeks to reflect favicon changes even after recrawling.

Gain control over your UX

See how users are using your site as if you were sitting next to them, learn and iterate faster with OpenReplay. — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.