---
title: SVG Favicon: Support, Dark Mode and Fallbacks
description: An SVG favicon is one vector file that stays sharp at every size and can react to dark mode. Browser support, the link tag, and the fallbacks to keep.
canonical: https://favicontools.com/glossary/svg-favicon
---

# SVG Favicon: Support, Dark Mode and Fallbacks

An SVG favicon is a vector icon referenced with a link tag of type image/svg+xml, so one file renders sharply at any size instead of one PNG per size. Because it is a document, it can carry a prefers-color-scheme media query and draw itself differently in dark mode. Support is not universal: current Chrome, Edge and Firefox render it, while Safari does not use it for the tab icon, so keep a PNG or ICO fallback alongside it.

## One file instead of a set

A raster favicon is a size decision made at export time. An SVG is not: the browser rasterises it at whatever size the surface needs, so a tab at 16 pixels and a bookmark bar at 32 get the same crisp result from one file that is usually smaller than a single PNG.

The catch is that support is uneven, and an SVG favicon is not a replacement for the rest of the icon set. Installed-app surfaces on Android and iOS still want PNGs, and Safari still needs the raster path for its tab icon. Treat the SVG as an upgrade layered on top of a working PNG and ICO setup.

## Where an SVG favicon works

| Surface | Behaviour |
| --- | --- |
| Chrome / Edge tab | Renders the SVG |
| Firefox tab | Renders the SVG |
| Safari tab | Does not use it; falls back to your PNG or ICO |
| iOS Home Screen | Uses the apple-touch-icon PNG, never the SVG |
| Android / PWA install | Uses the PNGs in the web app manifest |

## The head tags

```html
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.json">
```

Browsers that understand image/svg+xml take the SVG; the rest fall through to the ICO. No user-agent sniffing required.

## A favicon that follows dark mode

```svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <style>
    path { fill: #111111 }
    @media (prefers-color-scheme: dark) {
      path { fill: #ffffff }
    }
  </style>
  <path d="M20 80 L50 20 L80 80 Z" />
</svg>
```

Styles must be inside the SVG. An external stylesheet is not loaded for a favicon. Browsers that support SVG favicons generally honour this; those that do not just use the raster fallback.

> **Keep it genuinely simple:** An SVG favicon is rasterised into a 16 pixel box. Fine strokes, gradients, text and filters all collapse there, and complex paths cost more to render than the file saves. Draw it as flat shapes.

## SVG favicon FAQ

### Can an SVG favicon replace favicon.ico?

Not entirely. Anything that requests /favicon.ico by path (and anything that does not render SVG favicons) needs the raster file. The SVG is an addition, not a replacement.

### Why does my SVG favicon not appear in Safari?

Safari does not use SVG for the tab icon at time of writing. It falls back to whatever raster icon you have declared, so the fix is to make sure that fallback exists and looks right.

### Is rel="mask-icon" the same thing?

No. mask-icon is a separate Safari feature that takes a flat monochrome SVG and tints it for pinned tabs. It ignores the colours in your file and does not affect the normal tab icon.