Dark mode for SVG favicon

An SVG favicon can adapt to dark mode without a second icon file. SVG supports an embedded <style> element, so the icon can respond to prefers-color-scheme itself.

<!-- icon.svg -->
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <style>
    circle {
      fill: white;
      stroke: black;
      stroke-width: 2px;
    }
    @media (prefers-color-scheme: dark) {
      circle {
        fill: black;
        stroke: white;
      }
    }
  </style>
  <circle cx="50" cy="50" r="47"/>
</svg>

In this example the circle switches from a white fill with a black stroke to the reverse colour scheme. Keep the media query inside the SVG file; CSS from the page cannot style an SVG loaded as a favicon.

Safari’s mask icon is different

Safari uses a separate mask-icon. It is also an SVG, but it must be a single-colour shape on a transparent background. The colour comes from the <link> element, so this technique does not provide the same automatic light and dark variants.

<link rel="mask-icon" href="mask-icon.svg" color="#000000">