Supporting dark mode with SVG favicons

As of December 2020, there's decent browser support for SVG favicons. One of the benefits of using SVG favicons, is that it allows you to display the correct color palette for users using dark mode.

How to use SVG favicons

Using a SVG favicon is similar to using a PNG or JPEG image favicon, however, you do need to use specific type and size values.

• rel attribute can remain as "icon"

• href attribute just needs to point to your .svg file instead of your .png/.jpg file

• type attribute needs to be set to "image/svg+xml"

• sizes should be set to "any" to indicate that your favicon is scalable

How to support dark mode in your SVG favicon

Now that you have your SVG favicon displayed on your website, you can take it a step farther and add dark mode support. You do this by including a <style> block directly in your .svg file:

The above SVG snippet is the favicon I use on this website. You can see I'm using the prefers-color-scheme: dark media query to flip the fill color of the <path> elements to white when the user is on dark mode.

Here's that same SVG snippet from above, embedded into the page. Switch your OS between light and dark mode to see the SVG change color. If you want to see the favicon change, you'll need to refresh the page after changing your color scheme.