SVG Favicon in 2026 — Inline with a Data URI

For years, shipping a favicon meant maintaining a stack of PNG files: 16×16, 32×32, 180×180 Apple touch icon, 192×192 for Android, and a multi-size .ico for legacy browsers. In 2026, you can replace nearly all of that with a single SVG. And you can inline it as a data URI so it costs zero extra HTTP requests.

SVG favicons are supported in Chrome 80+, Edge 80+, Firefox 41+, Safari 26+, and all modern mobile browsers. Combined global support is ~93% of users. For the remaining ~7%, you drop a tiny .ico fallback and move on.

Why SVG wins over PNG and ICO

One file. SVG is resolution-independent. It looks crisp at 16×16 in a browser tab and at 512×512 on an Android home screen. No multi-size export pipeline.
Smaller for logos. Most logos compress to fewer bytes as an SVG path than as a 32×32 PNG (which has a fixed pixel cost regardless of complexity).
Dark mode built in. Add a <style> tag with @media (prefers-color-scheme: dark) inside the SVG and the favicon adapts to the user’s OS theme automatically. No JavaScript, no extra assets.
Inlinable. Unlike .ico or .png, you can embed an SVG favicon as a data URI directly in the <link> tag. No file to host, no path to break.

Browser support (June 2026)

Browser	Version	Support
Chrome	80+	Full
Edge	80+	Full
Firefox	41+	Full (partial in 4–40)
Safari	26+	Full
Safari iOS	26+	Full
Samsung Internet	13+	Full
IE 11	—	None (falls back to .ico)

Safari is the latecomer here — it only added SVG favicon support in version 26 (released 2025). If you still need to support Safari 18 and below, the .ico fallback handles it.

The basic setup

The simplest approach: link to an .svg file with a standard .ico fallback above it:

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

Order matters. Browsers pick the last supported rel="icon" link. Put the SVG after the ICO so browsers that understand SVG will use it; those that don’t will fall back to the ICO above it.

Inlining the SVG as a data URI

Instead of hosting a separate .svg file, you can embed the SVG directly in the href as a data URI. This removes one HTTP request and keeps the favicon self-contained in your HTML:

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='50' fill='%232563eb'/%3E%3C/svg%3E">

The data URI is the entire SVG, URL-encoded so the %3C, %3E, and %23 sequences don’t confuse the HTML parser. Hand-writing these escapes is tedious — paste your SVG into SVG Encoder and copy from the Favicon tab.

The tradeoff: an inlined favicon adds bytes to every HTML response (no cache for the favicon specifically), but for a few hundred bytes of SVG, that’s negligible compared to the HTML already being served. The CSS and JS are already cached; the favicon rides along in the first-response bytes.

Dark mode favicon

Because the favicon is an SVG, you can embed a <style> block with a prefers-color-scheme media query. The favicon adapts to the user’s OS theme with zero JavaScript:

<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E
%3Cstyle%3E
  .bg { fill: white; }
  .fg { fill: black; }
  @media (prefers-color-scheme: dark) {
    .bg { fill: black; }
    .fg { fill: white; }
  }
%3C/style%3E
%3Crect class='bg' width='100' height='100' rx='20'/%3E
%3Ccircle class='fg' cx='50' cy='50' r='30'/%3E
%3C/svg%3E">

On light mode, the favicon renders as a black circle on a white background. On dark mode, it swaps to a white circle on black. The browser handles the switch automatically when the OS theme changes.

This works in every browser that supports SVG favicons. The media query runs inside the SVG’s own document context, so it doesn’t leak CSS into your page.

Generating the snippet with SVG Encoder

Paste your SVG markup into svgencoder.com.
Pick an encoding (URL-encoding is smaller for typical icon SVGs; the tool highlights whichever wins).
Switch to the Favicon output tab. You’ll see a ready-to-paste <link rel="icon"> tag with your SVG as a data URI.
Copy it into your <head>, above any other favicon links.

To add a dark mode variant, edit your source SVG to include the <style> block and media query before pasting it into the encoder.

Complete production example

Putting it together — a production <head> with inline SVG favicon, dark mode support, and ICO fallback:

<head>
  <!-- Legacy browsers that don't understand SVG favicons -->
  <link rel="icon" href="/favicon.ico" sizes="32x32">

  <!-- Modern browsers: inline SVG favicon with dark mode -->
  <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cstyle%3E.bg{fill:white;}.fg{fill:black;}@media(prefers-color-scheme:dark){.bg{fill:black;}.fg{fill:white;}}%3C/style%3E%3Crect class='bg' width='100' height='100' rx='20'/%3E%3Ccircle class='fg' cx='50' cy='50' r='30'/%3E%3C/svg%3E">

  <!-- Apple touch icon for iOS home screen (180x180 PNG) -->
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
</head>

When not to inline

Very complex SVGs. If your favicon SVG is over ~2 KB after encoding, the extra HTML weight on every page load may not be worth it. Link to an external .svg file instead — it will be cached separately.
Animated favicons. SVG favicons can be animated with <animate> or CSS @keyframes, but animation increases CPU usage in background tabs. Use sparingly.
Enterprise sites with strict IE11 requirements. IE11 ignores SVG favicon links entirely. In these environments, an ICO-only approach may be simpler.