Dark Mode Favicons

Avatar of Chris Coyier
Chris Coyier on (Updated on )

Oooo! A bonafide trick from Thomas Steiner. Chrome will soon be supporting SVG favicons (e.g. ). And you can embed CSS within an SVG with a

<style> element. That CSS can use a prefers-color-scheme media query, and as a result, a favicon that supports dark mode!


pre rel=”HTML”>

svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
circle {
fill: yellow;
stroke: black;
stroke-width: 3px;
@media (prefers-color-scheme: dark) {
circle {
fill: black;
stroke: yellow;

Safari also supports SVG, but it’s different…

You specify the color, so there is no opportunity there for a dark mode situation. A little surprising, since Apple is so all-in on this dark mode stuff. I have no idea if they plan to address that or what.