Back to blog

SVG Favicons with Dark Mode Support: A Complete Guide

svgfavicondark-modehtml

A favicon is the small icon in a browser tab, bookmark list and history. For years you needed a stack of ICO and PNG files in several sizes. SVG favicons change that: one small vector file stays sharp at any size, and because an SVG can contain CSS, it can even change its colours when the visitor switches to dark mode. This guide covers how to build one, how to provide fallbacks, and what to check before shipping.

Why use an SVG favicon

  • It is crisp on any screen density, from standard tabs to high-density displays.
  • A simple logo is usually only a few hundred bytes.
  • It can adapt to light and dark browser themes with a media query.
  • You maintain one source file instead of several raster exports.

The basic markup

Add a link element to the head of your page that points to the SVG and declares its type. Many sites also add the sizes attribute to help browsers choose between several icon links.

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

Switching colours for dark mode

Inside the SVG, add a style element with a prefers-color-scheme media query. The browser applies it when rendering the favicon, so the same file can look different in light and dark settings. A dark icon on a light tab bar can disappear on a dark one, which is exactly the problem this solves.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    path { fill: #1278b5; }
    @media (prefers-color-scheme: dark) {
      path { fill: #e4e4e7; }
    }
  </style>
  <path d="M16 2a14 14 0 100 28 14 14 0 000-28z" />
</svg>

What the query actually follows

One guide points out that the media query tracks the operating system's colour preference, not the browser's own theme setting. A browser with a light theme running on a computer set to dark mode can still show the dark variant of the icon. Occasionally this produces a mismatch, such as a light icon on a light tab strip, so test with combinations of operating system and browser themes.

Provide fallbacks

Support for SVG favicons is good in modern browsers but not universal. Older browsers and some platforms ignore them, and reports indicate Safari may use a PNG rather than the SVG. Keep a raster fallback so every visitor sees an icon. Guidance also notes that browsers can pick the last supported link, so the order of your link tags can matter. Test in the browsers you care about instead of assuming.

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

An alternative with separate files

If you would rather not embed CSS in the SVG, you can supply separate light and dark PNG favicons and select them with the media attribute on the link element. One source says this approach is supported by about 97% of browsers, compared with roughly 74% for SVG favicons at the time of its writing, though those figures are dated.

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

Home screen and app icons

Phone home screens and installable web apps use separate icons. The Apple touch icon is commonly a 180 by 180 pixel PNG, and web app manifests list PNG icons in sizes such as 192 and 512 pixels. Those still need raster files, so export them from your SVG at the required sizes.

Test before you ship

  • Check the tab in light and dark modes in each browser you support.
  • Clear the cache, because browsers hold on to favicons stubbornly and may show an old one.
  • Make sure the icon is legible at 16 pixels. Fine detail will blur, so simplify the shape.
  • Verify the file is served with the image/svg+xml content type.

Browser support figures change quickly, so confirm current behaviour on MDN or caniuse before relying on any one of the details above.

Common questions

Why does my favicon not update after I change it? Browsers cache favicons aggressively and often ignore a normal refresh, so clear the site's data or add a version query to the file name while testing. Do I still need a favicon.ico? Many sites keep one because some tools and older browsers request it at the site root by default, and a small file costs nothing. Can an SVG favicon be animated? Technically, but browser support is inconsistent and constant motion in a tab is distracting, so avoid it. What colours work best? Pick shapes that keep strong contrast against both light and dark tab bars, and test the icon at sixteen pixels before you commit.

Sources