SVG Favicon: How to Use It, Browser Support and Dark Mode

SVG favicons represent the cutting edge of website icon technology. They're scalable, support dark mode, and can be a single file that looks perfect at any size. Here's everything you need to know.

Why SVG Favicons?

• Infinitely scalable — Looks crisp at 16px, 32px, 512px, or any size. No pixelation ever.
• Tiny file size — A simple SVG favicon can be under 1KB, smaller than any PNG.
• Dark mode support — SVG can use CSS prefers-color-scheme media queries to adapt.
• One file to rule them all — No need for multiple sizes (though you'll still need PNG fallbacks).

Browser Support (2026)

Browser	SVG Favicon Support
Chrome 80+	Yes
Firefox 41+	Yes
Edge 80+	Yes
Opera 67+	Yes
Safari	No (as of Safari 18)
IE	No

How to Implement SVG Favicon

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

<!-- PNG fallback for Safari and older browsers -->
<link rel="icon" href="/favicon-32x32.png" type="image/png" sizes="32x32">

<!-- ICO fallback for very old browsers -->
<link rel="icon" href="/favicon.ico" sizes="32x32">

<!-- Apple Touch Icon (always PNG, SVG not supported) -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

Browsers that support SVG will use it; others fall back to PNG or ICO.

Dark Mode Adaptation

The killer feature of SVG favicons — your icon can automatically adapt to the user's color scheme:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <style>
    circle { fill: #1d1d1f; }
    text { fill: white; }

    @media (prefers-color-scheme: dark) {
      circle { fill: white; }
      text { fill: #1d1d1f; }
    }
  </style>
  <circle cx="50" cy="50" r="45"/>
  <text x="50" y="65" text-anchor="middle"
        font-family="system-ui" font-size="50" font-weight="bold">M</text>
</svg>

In light mode: dark icon on light background. In dark mode: light icon on dark background. Automatic, no JavaScript needed.

Creating an SVG Favicon

Method 1: Design Tools

• Figma — Design your icon, select it, and export as SVG
• Illustrator — File → Save As → SVG
• Inkscape — Free and open source vector editor

Method 2: Hand-Code It

For simple icons, writing SVG by hand is quick:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <rect width="100" height="100" rx="20" fill="#0071e3"/>
  <text x="50" y="70" text-anchor="middle"
        font-size="60" font-weight="bold" fill="white">F</text>
</svg>

Optimization Tips

• Use SVGOMG to optimize file size
• Remove unnecessary metadata, comments, and editor-specific attributes
• Keep paths simple — complex gradients may not render well at small sizes
• Always include the xmlns attribute
• Set a viewBox for proper scaling

The Recommended Full Setup in 2026

Combining SVG with traditional fallbacks gives you the best of all worlds:

<!-- Modern: SVG with dark mode support -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">

<!-- Fallback: Traditional favicon set -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" href="/favicon.ico" sizes="32x32">

<!-- Apple (no SVG support) -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

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

Should You Use SVG Favicon Today?

Yes, but always with fallbacks. The Safari limitation means you can't rely on SVG alone. However, for users on Chrome, Firefox, and Edge, an SVG favicon provides a noticeably better experience — especially if you support dark mode.

Converting Between SVG and ICO

Need a fallback for Safari or old browsers? Convert your vector with the SVG to ICO guide, or grab an existing site's SVG icon with extract SVG favicon.

Frequently Asked Questions

Does Safari support SVG favicons?

Safari has limited support for SVG tab icons and ignores them for bookmarks and the home screen, so always keep a PNG/ICO fallback and an apple-touch-icon. Details: SVG favicon with PNG fallback.

How do I make an SVG favicon change in dark mode?

Put a <style> block inside the SVG with @media (prefers-color-scheme: dark) and change the fill color there. Walkthrough: SVG favicon dark mode.

Is an SVG favicon better than PNG?

SVG is smaller and sharp at every size, but PNG works everywhere. The best setup in 2026 is SVG first, then a 32×32 PNG or ICO fallback.

What size should an SVG favicon be?

SVG has no fixed pixel size; use a square viewBox (e.g. 0 0 32 32) and keep the design simple so it reads at 16 px.