Why your favicon disappears in dark mode

Most favicons are designed and tested on a plain white tab bar, because that used to be the only option. Now that most browsers and operating systems offer a dark theme, a lot of icons that looked perfectly fine suddenly blend into the background or lose their contrast entirely.

The actual problem

It usually comes down to one of two things:

• A transparent background with dark artwork. On a white tab, dark lines on a transparent background read clearly. On a dark tab, the same dark lines on transparency almost disappear — there's nothing left to create contrast.
• A white or very light background baked into the icon. This flips the problem: the icon shows as a stark white square that looks like an error rather than a logo, clashing with the surrounding dark UI.

How to design around it

The safest approach is to avoid relying on transparency for contrast at all. Give your icon a background color from your brand palette — not pure white, not pure black — so it holds its shape regardless of the tab color around it.

If you want a more precise fix, modern browsers support serving different icons for light and dark themes using the media attribute on your <link> tag:

<link rel="icon" href="/favicon-light.png" media="(prefers-color-scheme: light)">
<link rel="icon" href="/favicon-dark.png" media="(prefers-color-scheme: dark)">

Support for this varies by browser, so treat it as a progressive enhancement on top of a single icon that already works reasonably well in both themes — not a replacement for good contrast in the first place.

A quick way to test it

Switch your OS or browser to dark mode and actually look at your open tabs. It sounds obvious, but most site owners never check this, because their own dev environment is set to light mode and stays that way.

Related reading: favicon size guide · favicon not showing in Google search