Supporting dark mode with SVG favicons

Published under CSS.

📺  Click here to skip to the video attached to this post  👇

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.

Example


Thanks for reading!

Did you find this post useful? Let me know on Twitter! If you found an issue with the content, submit a pull request!

Subscribe to my newsletter to know when I publish more content in the future.

❤️ Likes: 4
📣 Retweets: 4
💬 Replies: 0
🙊 Mentions: 0