What is an SVG favicon?

An SVG favicon is a favicon stored as a scalable vector graphic instead of a raster image. It is declared with and stays perfectly sharp at any size because it is drawn from vectors, not pixels.

How do I make an SVG favicon adapt to dark mode?

Two ways. Either add a second with media="(prefers-color-scheme: dark)" pointing to a dark variant, or put a CSS media query inside the SVG itself - a block with @media (prefers-color-scheme: dark) that recolors the artwork. The in-SVG approach uses one file.

Do all browsers support SVG favicons?

Modern Chrome, Edge, Firefox and most current browsers support SVG favicons. Safari's support is limited and older browsers do not support them at all, so you should always keep a favicon.ico and PNG fallback alongside the SVG.

Should I use an SVG or PNG favicon?

Use both. Offer the SVG first for crisp, theme-aware rendering in modern browsers, and keep PNG plus a multi-resolution favicon.ico as the fallback so every browser still shows an icon.

Back to generator

The SVG Favicon, Explained

An SVG favicon is a scalable vector tab icon you declare with <link rel="icon" type="image/svg+xml">. It stays razor-sharp at any size and can even change color in dark mode. This guide shows how to add one, the dark-mode technique, and why you still keep a .ico fallback.

Last updated: 13 June 2026

What an SVG favicon is

A traditional favicon is a raster image - a fixed grid of pixels at 16x16, 32x32, and so on. An SVG favicon is different: it is a vector drawing, so the browser renders it cleanly at whatever size it needs. One file looks crisp in a tiny tab, on a Retina display, and on a high-DPI taskbar, with no blur and no need to ship multiple sizes for that single icon.

The catch is the trade-off SVG always brings: fine detail that relies on exact pixels can still look soft at 16px, and SVG favicons are best for simple, bold marks. They also are not universally supported, which is why you keep a fallback (more below).

How to add an SVG favicon

Declare it in your page's <head> with the SVG MIME type:

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

Modern browsers that understand SVG will prefer this one; the rest skip it and use your fallback. Keep the SVG itself lean: inline the paths, avoid external references and embedded raster images, and strip editor metadata so the file stays tiny and renders instantly.

Making an SVG favicon adapt to dark mode

The standout feature of SVG favicons is that they can respond to the user's color scheme - so a dark logo on a light tab can flip to a light logo on a dark tab. There are two techniques.

Option A: a second link with a media query

Ship two SVG files and let the browser choose based on the system theme:

<link rel="icon" href="/favicon-light.svg" media="(prefers-color-scheme: light)">
<link rel="icon" href="/favicon-dark.svg" media="(prefers-color-scheme: dark)">

Option B: one SVG with internal CSS (recommended)

Better still, put the color logic inside a single SVG file using a <style> block and a prefers-color-scheme media query. The artwork recolors itself when the system theme changes, with one file and one link tag:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    path { fill: #1D1D1F; }
    @media (prefers-color-scheme: dark) {
      path { fill: #E7E9EC; }
    }
  </style>
  <path d="..." />
</svg>

Reference it with the standard single link tag. When the user switches their OS or browser to dark mode, the favicon recolors itself - no extra files, no server logic.

Always keep an .ico and PNG fallback

SVG favicon support is good in modern Chrome, Edge, and Firefox, but Safari's support is limited and older browsers have none. So an SVG favicon is an enhancement, not a replacement. Pair it with a classic raster fallback so every browser still shows an icon:

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

Browsers pick the best format they understand, so modern ones get the crisp, theme-aware SVG while everyone else falls back to PNG or the root favicon.ico.

Frequently asked questions

What is an SVG favicon?: An SVG favicon is a favicon stored as a scalable vector graphic instead of a raster image. It is declared with <link rel="icon" type="image/svg+xml" href="/favicon.svg"> and stays perfectly sharp at any size because it is drawn from vectors, not pixels.
How do I make an SVG favicon adapt to dark mode?: Two ways. Either add a second <link rel="icon"> with media="(prefers-color-scheme: dark)" pointing to a dark variant, or put a CSS media query inside the SVG itself - a <style> block with @media (prefers-color-scheme: dark) that recolors the artwork. The in-SVG approach uses one file.
Do all browsers support SVG favicons?: Modern Chrome, Edge, Firefox and most current browsers support SVG favicons. Safari's support is limited and older browsers do not support them at all, so you should always keep a favicon.ico and PNG fallback alongside the SVG.
Should I use an SVG or PNG favicon?: Use both. Offer the SVG first for crisp, theme-aware rendering in modern browsers, and keep PNG plus a multi-resolution favicon.ico as the fallback so every browser still shows an icon.

Generate the SVG plus its fallbacks

The safest setup is an SVG favicon backed by a full raster fallback set. Logo2Favicon produces the PNG sizes and a multi-resolution favicon.ico from your logo, plus the ready-to-paste <head> snippet - so your SVG and its fallbacks line up perfectly. Everything runs privately in your browser. Start at the generator on the homepage.

Converting an existing vector? Use the SVG to favicon converter. For sizing, see the favicon sizes guide; for the full walkthrough, the complete favicon guide.