# Changing the favicon in dark mode

> Learn how to show a different favicon in dark and light mode using an SVG favicon with embedded CSS and the prefers-color-scheme media query to swap colors.

Author: [Flavio Copes](https://flaviocopes.com/about/) | Published: 2020-05-14 | Topics: [HTML](https://flaviocopes.com/tags/html/) | Canonical: https://flaviocopes.com/dark-mode-favicon/

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](https://flaviocopes.com/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:

```html
<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](https://flaviocopes.com/gatsby-change-favicon/).

If you're setting up favicons from scratch, my free [favicon checklist](https://flaviocopes.com/tools/favicon-checklist/) lists all the files and link tags you need.