Adaptive SVG favicon with dark mode

Did you know that you can progressively enhance favicons with an SVG version? At the time of writing, the SVG version will be used by Chrome and Firefox. Not only will your SVG favicon stay nice and sharp, we can also use media queries inside the SVG in order to adapt the colours of the favicon for those who prefer dark mode.

Add a link to the SVG favicon inside the <head> tag, directly after the .ico version. Browsers that support SVG favicons (currently Chrome and Firefox) will use it, other browsers will fall back to the .ico version.

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

Dark theme version

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
  <style>
    …
    @media (prefers-color-scheme: dark) {
      /* dark theme styles */
    }
  </style>
  …
</svg>

I'm using this technique with my own favicon. You can see it change by either switching to light/dark mode in your browser or at the operating system level. Once changed, refresh the page to see the change.

Adam Argyle has written about it in more depth over on web.dev:

Building an adaptive favicon
A foundational overview of how to build an adaptive favicon.
web.devAdam Argyle

Like this post? Got a question?

Reply via: Email, Bluesky, Mastodon, Twitter