SVG Favicons: The Modern Way to Do Browser Icons

What Makes SVG Different

The formats used for most favicons — ICO, PNG — are raster formats. They store pixel data at specific sizes: a 32×32 PNG contains exactly 32×32 pixels of information, no more. When displayed at a different size (scaled up for a high-DPI display, or down for a small context), raster images must be resampled, which can produce blurry or jagged results at sizes the image was not designed for.

SVG (Scalable Vector Graphics) is a vector format — it describes shapes, paths, and text mathematically rather than as a grid of pixels. An SVG favicon is rendered by the browser at whatever size is needed, computing the pixel output from the mathematical description at render time. A 16-pixel SVG favicon and a 512-pixel SVG favicon are the same file — the browser renders each at the correct size with perfect sharpness.

This makes SVG favicons naturally appropriate for modern high-DPI displays. An SVG favicon displays identically sharp on a 1x monitor and a 3x Retina display, without requiring multiple raster image versions.

Browser Support

SVG favicons are supported in major modern browsers, but with notable exceptions:

• Chrome/Chromium: Supported since Chrome 80 (February 2020)
• Firefox: Supported since Firefox 41 (September 2015)
• Safari: Supported since Safari 14.1 (April 2021, macOS Big Sur) — but notably, Safari on iOS still uses the Apple Touch Icon rather than the favicon for home screen shortcuts
• Edge: Supported (Chromium-based Edge)
• Internet Explorer: Not supported (IE does not support SVG favicons)

The practical approach is to provide both an SVG favicon (for modern browsers) and a fallback ICO file (for older browsers and IE):

<!-- Modern browsers will use SVG; older browsers fall back to ICO -->
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">

The browser selects the most appropriate option: SVG-capable browsers use the SVG; older browsers ignore the SVG link and use the ICO.

Dark Mode Support: The Killer Feature

SVG's most significant advantage over raster favicons for modern web development is dark mode support. Because SVG favicons are essentially SVG files (which can contain CSS), they can use CSS media queries including prefers-color-scheme.

A dark-mode-aware SVG favicon:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <style>
    path { fill: #000; }
    @media (prefers-color-scheme: dark) {
      path { fill: #fff; }
    }
  </style>
  <path d="M10 10 L90 90 M90 10 L10 90" stroke="currentColor"/>
</svg>

When the operating system or browser is in dark mode, the favicon automatically switches to its dark-mode variant — white on the dark tab bar background rather than black on white. This is impossible with raster favicons (which are static images), and it solves a common visual problem: a dark-colored favicon that becomes invisible against a dark mode tab bar.

For logos and brand marks that use dark colors — which appear fine on a light tab bar but disappear against a dark one — the SVG dark mode capability is particularly valuable. A single SVG file handles both light and dark contexts without requiring two separate image files and conditional HTML.

Emoji Favicons: A CSS-Tricks Innovation

Chris Coyier at CSS-Tricks popularised a creative use of SVG favicons in 2020: using emoji as favicons via SVG. The technique:

<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🔧</text></svg>">

This inline SVG data URL produces a favicon displaying any emoji, rendered by the operating system's emoji font. The technique requires zero image files, adds minimal HTML, and works in all SVG-favicon-capable browsers. It is particularly useful for personal sites, development tools, and any context where an emoji is a sufficient visual identifier.

SVG Favicon Limitations

SVG favicons have practical limitations that prevent them from being the complete solution:

• No iOS home screen support: iOS Safari uses the Apple Touch Icon (a PNG) for home screen shortcuts — SVG favicons are not used for this purpose. Sites that want a home screen shortcut on iOS still need a separate Apple Touch Icon PNG.
• Web app manifest icons: Progressive Web App manifest files specify icon arrays using PNG images. SVG is not supported as a manifest icon format by all platforms.
• ICO fallback still needed: Internet Explorer and some older browsers require favicon.ico. The ICO file should still be present at the site root as a fallback.
• Complexity: SVG favicons work well for simple shapes and icons. Complex, detailed graphics may not render cleanly at small sizes — the fundamental design challenge of small-scale icons applies regardless of format.

The Best Practice Stack

The recommended modern favicon implementation combines SVG with appropriate fallbacks:

<!-- Fallback ICO for old browsers (16x16, 32x32 inside) -->
<link rel="icon" href="/favicon.ico" sizes="any">

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

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

<!-- Web App Manifest for Android/PWA home screen -->
<link rel="manifest" href="/manifest.json">

This implementation covers all major use cases with minimal file overhead — three to four files rather than the ten or more files that older complete implementations required.

Generate your favicon →