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
rel attribute can remain as "icon"
href attribute just needs to point to your
.svg file instead of your
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
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.
Subscribe to my newsletter to know when I publish more content in the future.