---
title: Dark Mode Favicons (prefers-color-scheme)
description: A favicon can respond to the OS light or dark setting: an SVG with a media query inside, or two PNGs swapped via prefers-color-scheme on the link tag.
canonical: https://favicontools.com/glossary/dark-mode-favicon
---
# Dark Mode Favicons (prefers-color-scheme)
A dark mode favicon changes with the operating system's light or dark setting so it stays legible against a dark or light browser chrome. Two approaches work: an SVG favicon containing a prefers-color-scheme media query that recolours itself, or two PNG files declared with media="(prefers-color-scheme: dark)" on their link tags. A single mid-tone icon that reads on both is the simplest alternative.
## Two ways to make it respond
The cleaner approach is an SVG favicon with a prefers-color-scheme media query in its own styles, so the single file recolours itself when the OS switches to dark. Browsers that render SVG favicons and honour the media query (including Safari and Firefox) pick up the change with no extra tags.
The alternative is two raster files: a normal icon and a dark-optimised one, each on a link tag carrying a media attribute. Support for switching PNG favicons by media is less consistent than the SVG route, so always keep a default icon that stands on its own.
## The two-file approach
```html
```
The plain favicon.ico is the fallback for anything that ignores the media attribute.
> **Or design one icon that survives both:** A pure-black mark vanishes on a dark tab strip; a pure-white one vanishes on a light one. A mid-tone mark, or one with a subtle outline or backing shape, reads on either chrome and sidesteps the whole media-query dance.
## Dark mode favicon FAQ
### How do I make a dark mode favicon?
Either put a prefers-color-scheme media query inside an SVG favicon so it recolours itself, or declare two PNGs with media="(prefers-color-scheme: dark)" and light on their link tags. Keep a plain favicon.ico as the fallback.
### Does the media attribute on favicons work everywhere?
No. Support for swapping favicons by prefers-color-scheme is uneven across browsers, which is why you always keep a default icon that works regardless of theme.
### SVG media query or two PNGs?
The SVG route is one file and generally better supported for theme switching. Two PNGs give pixel-level control per theme but rely on less consistent media-attribute handling.