SVG Favicons in 2026 — The Complete Implementation Guide

Most sites still ship eight favicon files in the head. In 2026, you can ship one SVG, get crisp rendering at every size from 16 px to 512 px, support automatic dark mode, and add a four-line PNG fallback for the <3% of traffic that needs it. Here is the exact pattern.

Why SVG Favicons Finally Make Sense in 2026

Eight years ago, the conventional advice was to export a favicon at fifteen different pixel dimensions: 16x16, 32x32, 48x48, 96x96, 180x180, 192x192, 512x512, an .ico bundle, an apple-touch-icon, and a manifest.json with a few more PNGs. That was correct then. It is wrong now.

Three things changed:

Chrome, Safari, Firefox, and Edge all support <link rel="icon" type="image/svg+xml">. Combined market share is roughly 97% of global browser traffic.
Modern OS bookmark surfaces — macOS Sonoma+, Windows 11 taskbar pins, iOS 17+ home screen — accept SVG sources and rasterize them locally at the device's actual pixel density.
The CSS prefers-color-scheme media query works inside SVG files, so a single asset can flip its colors when the user's OS switches to dark mode.

The result is the smallest, sharpest, most maintainable favicon you have ever shipped. Let's build it.

The Minimum-Viable 2026 Favicon Setup

Three lines in your HTML <head>. That is the whole thing.

<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

Browsers that understand SVG icons take the first line and ignore the others. Older browsers fall through to the 32 px PNG. iOS Safari uses the apple-touch-icon for home-screen bookmarks because the OS has not yet caught up to the SVG-source pattern there (more on that below).

Three files. No .ico bundle, no manifest.json for a basic site, no fifteen-PNG buffet. Done.

Writing the SVG Favicon Itself

Open your editor and write actual SVG markup. Stop exporting from raster tools. The whole point is that vector renders perfectly at any size, so you want the source shape, not a PNG-converted-to-SVG-via-tracing approximation.

A good favicon SVG has four traits:

A viewBox of 0 0 32 32 or 0 0 64 64. Browsers scale this. The number itself does not matter; what matters is that the design fills the box edge-to-edge.
Strokes thick enough to read at 16 px. The browser tab is the smallest size you'll render at. If a stroke disappears at 16 px in your editor, it'll disappear in the tab.
No fine text. A single letter is fine; a wordmark is not.
Inline only. No <use href="..."> referencing external files, no embedded raster <image> tags. The SVG must be fully self-contained.

Here is a real example — an amber lightning bolt:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <rect width="32" height="32" rx="6" fill="#0a0a0f"/>
  <path d="M18 4 L8 18 H14 L12 28 L24 12 H17 L18 4 Z"
        fill="#f59e0b" stroke="#fbbf24" stroke-width="0.5"/>
</svg>

That is the entire file. Save it as favicon.svg at your site root, and the first line of the HTML snippet above will pick it up.

Adding Dark Mode (the Reason to Ship SVG)

This is where SVG earns its keep. You can put a <style> block inside the SVG file with a prefers-color-scheme rule, and the browser will repaint the icon when the user's OS theme changes. No JavaScript, no second file, no service worker.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    .bg { fill: #ffffff; }
    .fg { fill: #0a0a0f; }
    @media (prefers-color-scheme: dark) {
      .bg { fill: #0a0a0f; }
      .fg { fill: #f5f5fa; }
    }
  </style>
  <rect class="bg" width="32" height="32" rx="6"/>
  <path class="fg" d="M8 8 H24 V24 H8 Z"/>
</svg>

A user on macOS who flips to dark mode at 7pm will watch the favicon in their tab change colors in real time. The same file. No round-trip to your server.

Most teams stop the dark-mode treatment at the website itself and forget the favicon, which then sits there with a white background bleeding light into a black tab strip. Fixing this is a 60-second design improvement that nobody else is doing.

Browser Support — The Honest Table

Here is the actual support matrix as of May 2026, based on the caniuse.com data plus my own testing.

Browser	SVG icon	`prefers-color-scheme` in SVG
Chrome 80+	Yes	Yes
Firefox 41+	Yes	Yes (FR 99+)
Safari 14+	Yes	Yes (15.4+)
Edge 80+	Yes	Yes
Samsung Internet 12+	Yes	Yes
iOS Safari (home screen)	No (uses apple-touch-icon)	—
IE 11 / legacy	No (falls back to PNG)	—

The PNG fallback line in the snippet above is what catches IE 11, ancient corporate browsers, and a handful of obscure RSS readers. The Apple touch icon line is what catches the case where a user adds your site to their iPhone home screen — iOS still wants a 180 px square PNG for that surface, and Apple has been dragging on SVG support there since 2020. Ship both fallbacks; they cost two files and zero milliseconds at runtime.

The Sizes Attribute — Use `any`

One detail that trips people up: when the browser has both an SVG icon and a PNG icon to choose from, it picks based on the sizes attribute. If you write sizes="32x32" on the SVG, the browser will only consider it for 32-pixel slots, which defeats the entire point of vector.

Use sizes="any":

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

Now the SVG wins for every size the browser asks for, and the PNG only gets pulled if the SVG type is unsupported. This is the single most-missed line in production favicon code in 2026 — I run a Lighthouse pass on five new SaaS sites a week and roughly half of them ship the SVG with no sizes attribute and a 32 px PNG declared first, which means Chrome takes the PNG.

The PWA / Manifest Case

If your site is a Progressive Web App with an installable home-screen experience, you still need a manifest.json with PNG icons at 192 px and 512 px. Browsers do not yet rasterize SVG sources for the install icon — that is the same Apple-shaped hole as the iOS home screen.

Minimum PWA manifest:

{
  "name": "My App",
  "short_name": "App",
  "icons": [
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" },
    { "src": "/favicon.svg", "type": "image/svg+xml", "sizes": "any" }
  ],
  "theme_color": "#0a0a0f",
  "background_color": "#0a0a0f",
  "display": "standalone"
}

Note the SVG is still listed — install prompts in Chrome 116+ now read it for the desktop install dialog. Older surfaces use the PNGs.

Don't hand-author all of this

Generate a complete favicon set — SVG with dark-mode toggle, PNG fallbacks, apple-touch-icon, and manifest.json — in one click. Free, no signup, no email gate.

Try the Favicon Generator →

Common Mistakes I See Weekly

1. Re-saving a PNG as `.svg`

Some image editors will let you save a raster image with a .svg extension by wrapping it in an <image> tag. The file is technically SVG, but it is just a PNG inside an XML wrapper — no vector data, no scaling benefit. Verify by opening the file in a text editor; if you see <path> or <rect> tags, it's real vector. If you see <image href="data:image/png;base64...">, throw it out and start over with a vector tool.

2. Forgetting the `viewBox`

An SVG without a viewBox renders at whatever pixel dimensions are in the width and height attributes — which means it doesn't actually scale. The browser will render your favicon at its source size and let CSS clip the rest. Always include viewBox="0 0 32 32" (or whatever your design's coordinate system is).

3. Using `currentColor` in the SVG

Inside the SVG, currentColor resolves to the SVG element's own color property — not your page's text color. There is no parent context. Use literal hex values or the embedded prefers-color-scheme trick from above.

4. Setting cache headers too aggressively

Browsers cache favicons for the lifetime of the tab regardless of headers — Safari is especially stubborn. When you redesign, ship the new file at /favicon-v2.svg and update the <link> tag rather than overwriting /favicon.svg. Otherwise users will keep seeing the old icon for weeks.

5. Skipping the `apple-touch-icon`

If a user adds your site to their iPhone home screen and you don't have an apple-touch-icon, iOS generates a screenshot of the page top-left corner and uses that. It looks awful. Ship the 180 px PNG.

Validating Your Favicon Setup

Three checks before shipping:

Open the SVG directly in your browser. Visit https://yoursite.com/favicon.svg. You should see the icon rendered at fullscreen. If you see XML source, your server is sending the wrong Content-Type header — it should be image/svg+xml.
Hard-refresh the homepage and check the tab. Cmd-Shift-R on Mac, Ctrl-Shift-R on Windows. Then look at the tab's favicon. If it is blurry, your SVG has a fixed-size raster <image> embedded in it — see mistake #1.
Toggle your OS theme. System Settings → Appearance → Dark on macOS, or the equivalent on Windows. The favicon in the open tab should repaint within ~1 second. If it doesn't, your prefers-color-scheme rule is wrong or your browser is below the support cutoff.

That's it. You have just shipped the cleanest favicon setup the modern web supports, and you'll never have to export fifteen PNGs again.

What to Read Next

If you haven't yet picked the brand colors that will define this favicon, start at our free color palette generator — it'll give you a hex value you can drop straight into the SVG. If you also need an <meta> setup for the same page, the SEO meta tag generator handles OG images, Twitter cards, and canonical tags in the same dark-mode style. And if you want the deeper background on every favicon dimension that browsers still request, the favicon dimensions guide breaks down each one.