Published under CSS.
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.
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
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.
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.