How to change the color of your SVG favicon when dark mode is enabled.
Using an SVG image as the favicon of your website comes with the advantage of serving a single asset without worrying about your users' different screen resolutions.
Besides, you can change the color of SVG favicons when dark mode is enabled!
To set an SVG file as favicon:
<head>
<!-- ... -->
<!-- favicon 👇 -->
<link rel="icon" type="image/svg+xml" href="assets/img/favicon.svg">
<!-- ... -->
</head>You can then modify the SVG code of the favicon to account for dark mode. To set the color of an SVG element (e.g., a <path> element), you need to specify a value for the fill property (if no value is specified, the default color is black). To target the dark mode, use the prefers-color-scheme media feature:
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<style>
path {
fill: #212121; <!-- set icon color for light mode -->
}
@media (prefers-color-scheme: dark) {
path {
fill: white; <!-- set icon color for dark mode -->
opacity: 0.5;
}
}
</style>
<path d="M24,13.2V10.8H20.191a10.6,10.6,0,0,0-.228-1.44A10.145,10.145,0,0,0,22.2,3H19.8a7.738,7.738,0,0,1-.939,3.706,6.873,6.873,0,0,0-2.9-2.516,4.121,4.121,0,0,0-7.926,0,6.892,6.892,0,0,0-2.9,2.516A7.748,7.748,0,0,1,4.2,3H1.8A10.145,10.145,0,0,0,4.037,9.36a10.6,10.6,0,0,0-.228,1.44H0v2.4H3.845a11.117,11.117,0,0,0,.279,1.326A10.156,10.156,0,0,0,1.8,21H4.2a7.732,7.732,0,0,1,.985-3.783C6.746,20.245,9.372,22.8,12,22.8s5.254-2.555,6.815-5.583A7.732,7.732,0,0,1,19.8,21h2.4a10.156,10.156,0,0,0-2.324-6.474,11.117,11.117,0,0,0,.279-1.326Zm-17.4-3a1.8,1.8,0,1,1,.527,1.273A1.8,1.8,0,0,1,6.6,10.2ZM12,18a2.4,2.4,0,1,1,1.7-.7A2.4,2.4,0,0,1,12,18Zm3.6-6a1.8,1.8,0,1,1,1.273-.527A1.8,1.8,0,0,1,15.6,12Z"/>
</svg>More info: browser support.
