Owen Conti

Supporting Dark Mode with SVG Favicons

Posted on under CSS by Owen Conti.

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.

1<link rel="icon" href="/favicon.svg" sizes="any" type="image/svg+xml" />
  • 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:

 1<svg width="180" height="180" viewBox="0 0 180 180" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 
 3<style>
 4  path {
 5    fill: #273240;
 6  }
 7  @media (prefers-color-scheme: dark) {
 8    path { fill: #ffffff; }
 9  }
10</style>
11 
12<path d="M94.6 59.44C94.6 68.1867 93.64 76.4533 91.72 84.24C89.9067 91.92 87.4533 99.0133 84.36 105.52C81.2667 111.92 77.64 117.68 73.48 122.8C69.4267 127.813 65.16 132.133 60.68 135.76C56.2 139.28 51.6667 142 47.08 143.92C42.4933 145.733 38.12 146.64 33.96 146.64C30.44 146.64 27.24 146 24.36 144.72C21.48 143.333 18.9733 141.36 16.84 138.8C14.7067 136.133 13 132.773 11.72 128.72C10.5467 124.56 9.96 119.6 9.96 113.84C9.96 107.867 10.7067 101.573 12.2 94.96C13.6933 88.3467 15.72 81.7867 18.28 75.28C20.84 68.7733 23.9867 62.5867 27.72 56.72C31.4533 50.8533 35.56 45.68 40.04 41.2C44.52 36.6133 49.32 32.9867 54.44 30.32C59.56 27.6533 64.8933 26.32 70.44 26.32C75.24 26.32 79.1867 27.3333 82.28 29.36C85.48 31.28 87.9333 33.84 89.64 37.04C91.4533 40.1333 92.7333 43.6533 93.48 47.6C94.2267 51.5467 94.6 55.4933 94.6 59.44ZM33.8 109.68C33.8 110.853 34.0133 112.08 34.44 113.36C34.8667 114.64 35.4533 115.76 36.2 116.72C36.9467 117.68 37.8533 118.533 38.92 119.28C40.0933 119.92 41.32 120.24 42.6 120.24C47.4 120.24 51.6667 118.587 55.4 115.28C59.1333 111.973 62.2267 107.92 64.68 103.12C67.1333 98.32 69 93.2 70.28 87.76C71.6667 82.32 72.36 77.36 72.36 72.88C72.36 71.6 72.2533 70.2133 72.04 68.72C71.9333 67.2267 71.6133 65.84 71.08 64.56C70.6533 63.28 69.9067 62.2133 68.84 61.36C67.88 60.4 66.5467 59.92 64.84 59.92C61.4267 59.92 58.28 60.7733 55.4 62.48C52.52 64.1867 49.9067 66.48 47.56 69.36C45.32 72.1333 43.3467 75.3333 41.64 78.96C39.9333 82.48 38.44 86.1067 37.16 89.84C35.9867 93.4667 35.1333 97.04 34.6 100.56C34.0667 104.08 33.8 107.12 33.8 109.68Z"/>
13<path d="M160.32 111.6C157.76 117.467 154.88 122.587 151.68 126.96C148.587 131.227 145.28 134.853 141.76 137.84C138.347 140.72 134.88 142.853 131.36 144.24C127.84 145.627 124.427 146.32 121.12 146.32C117.813 146.32 114.773 145.573 112 144.08C109.333 142.587 106.987 140.347 104.96 137.36C102.933 134.373 101.28 130.693 100 126.32C98.8267 121.947 98.24 116.827 98.24 110.96C98.24 100.933 99.6267 91.0667 102.4 81.36C105.173 71.5467 109.067 62.7467 114.08 54.96C119.093 47.1733 125.013 40.9333 131.84 36.24C138.773 31.44 146.4 29.04 154.72 29.04C157.28 29.04 159.733 29.5733 162.08 30.64C164.427 31.7067 166.453 33.2 168.16 35.12C169.867 37.04 171.2 39.3867 172.16 42.16C173.227 44.9333 173.76 48.0267 173.76 51.44C173.76 52.08 173.76 52.7733 173.76 53.52C173.76 54.16 173.707 54.8533 173.6 55.6L152.64 61.2C151.36 58.5333 149.867 57.2 148.16 57.2C146.453 57.2 144.64 58.2133 142.72 60.24C140.907 62.16 139.093 64.72 137.28 67.92C135.467 71.0133 133.707 74.5333 132 78.48C130.293 82.32 128.8 86.2133 127.52 90.16C126.24 94.1067 125.173 97.8933 124.32 101.52C123.573 105.04 123.2 107.92 123.2 110.16C123.2 113.573 123.627 115.973 124.48 117.36C125.44 118.747 126.667 119.44 128.16 119.44C129.333 119.44 130.667 119.013 132.16 118.16C133.653 117.2 135.04 116.027 136.32 114.64C137.6 113.147 138.773 111.493 139.84 109.68C140.907 107.867 141.653 106.053 142.08 104.24L160.32 111.6Z"/>
14</svg>

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.

Thanks for reading this article!

Hopefully you found this article useful! If you did, share it on X!

Share this post Follow @owenconti

Found an issue with the article? Submit your edits against the repository.