Skip to content
SVG Encoder

SVG to Favicon — Inline data URI, no .ico needed

Paste an SVG, get a ready-to-paste <link rel="icon"> tag. Works in Chrome, Firefox, Safari 26+. Supports dark mode. No download, no rasterization, no multi-size export pipeline.

Convert SVG to Favicon
Your SVG is encoded inline as a data URI — zero extra HTTP requests.
—

Favicon preview will appear here

Why inline SVG favicons beat .ico

Inline SVG Data URITraditional .ico
Files to manageZero — inline in HTMLAt least 1, often 3–6 sizes
ResolutionVector — crisp at any sizeRaster — blurs when scaled
Dark modeBuilt-in via CSS media queryRequires separate file
HTTP requestsZero — rides in the HTML1+ per file
Size (typical logo)200–800 bytes1–5 KB for multi-size .ico

An inline SVG favicon as a data URI adds a few hundred bytes to your HTML — less than a single line of JavaScript. In return, you eliminate every favicon file from your asset pipeline and get dark mode for free.

Browser support

BrowserVersionSupport
Chrome80+Full
Edge80+Full
Firefox41+Full
Safari26+Full
Safari iOS26+Full
Samsung Internet13+Full
IE 11—None (falls back to .ico)

Combined support is ~93% of global users. For the remaining ~7%, a .ico fallback handles it automatically.

Dark mode favicon

Add a <style> block with a prefers-color-scheme media query inside your SVG before encoding. The favicon adapts to the user's OS theme with zero JavaScript:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <style>
    .bg { fill: white }
    .fg { fill: black }
    @media (prefers-color-scheme: dark) {
      .bg { fill: black }
      .fg { fill: white }
    }
  </style>
  <rect class="bg" width="100" height="100" rx="20"/>
  <circle class="fg" cx="50" cy="50" r="30"/>
</svg>

Paste this SVG into the encoder above, copy the output, and drop it in your <head>. The favicon renders light-on-dark or dark-on-light depending on the user's OS setting — automatically, without JavaScript.

Production setup with legacy fallback

Modern browsers pick the last supported rel="icon" link. Put an .ico first, then the inline SVG data URI — browsers that understand SVG favicons use it; IE11 and old Safari fall back to the ICO:

<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">

Use the encoder above to generate the inline SVG data URI, then paste it into the second <link> tag. The .ico above it ensures older browsers still get a favicon.

Need more detail? Read the full guide: SVG Favicon in 2026 — Inline with a Data URI. Or try the main SVG Encoder for all 7 output formats (CSS, HTML, JSX, mask, object, and more).

← Back to SVG Encoder