Dark mode favicons (light & dark icons)

Browsers can switch UI theme automatically. If your favicon disappears on dark tabs, you need two versions: one for light UI and one for dark UI.

How it works

Create two SVG icons: a light-theme icon and a dark-theme icon.
Connect both with media="(prefers-color-scheme: ...)".
Keep a fallback ICO for older environments.

HTML example

<!-- Primary SVG icons -->
<link rel="icon" href="/icons/favicon-light.svg" type="image/svg+xml" media="(prefers-color-scheme: light)">
<link rel="icon" href="/icons/favicon-dark.svg"  type="image/svg+xml" media="(prefers-color-scheme: dark)">

<!-- Fallback -->
<link rel="icon" href="/favicon.ico" sizes="any">

Note

Some platforms cache icons aggressively. After updating, clear cache or use a versioned filename (e.g., favicon-dark.v2.svg).

Generate a dark-mode set

Select “Complete set” to enable the dark favicon.

FAQ

Will this work in all browsers?

Most modern browsers support prefers-color-scheme. The ICO fallback covers older cases.

Do I need PNGs as well?

Often yes (Apple Touch icons, Android icons, various sizes). Complete sets include them.