Changing the favicon in dark mode
New Course Coming Soon:
Get Really Good at Git
How to display a different favicon in dark or light mode
I have my Mac set up to automatically switch between dark and light mode.
I started building a new website when at some point I realized I put a white image as favicon, and in light mode it was almost invisible!
So I started investigating possible ways to add a favicon in dark mode and a different one in light mode.
Turns out there isn’t (yet) a way to do so for PNG/JPG bitmap images, but we can use an SVG vector images trick for this.
We can embed CSS in an SVG image.
If the image is simple enough that we can identify a color and change it in dark mode, we can have a different color for the 2 modes.
Here’s the SVG I used as favicon:
<svg
width="37"
height="45"
viewBox="0 0 37 45"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<style>
path {
fill: #ccc;
}
@media (prefers-color-scheme: dark) {
path {
fill: #fff;
}
}
</style>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M31.8831 2.04389C25.2462 2.72205 20 11.1737 20 21.5C20 32.2696 25.7062 41 32.7451 41C33.9877 41 35.2047 40.7279 36.3664 40.2206C32.5452 43.2149 27.7311 45 22.5 45C10.0736 45 0 34.9264 0 22.5C0 10.0736 10.0736 0 22.5 0C25.849 0 29.0271 0.731675 31.8831 2.04389Z"
/>
</svg>
The SVG image is very simple, it’s a half moon I designed in Figma and exported as SVG.
Then I filled the path color with the #ccc
color in light mode, and #fff
in dark mode.
I saved it as a .svg
file and then used it as the favicon in Gatsby.
Here is how can I help you:
- COURSES where I teach everything I know
- THE VALLEY OF CODE your web development manual
- BOOTCAMP 2024 cohort in progress, next edition in 2025
- BOOKS 16 coding ebooks you can download for free on JS Python C PHP and lots more
- SOLO LAB everything I know about running a lifestyle business as a solopreneur
- Interesting links collection
- Follow me on X