With dark mode now widely adopted across operating systems and browsers, a favicon designed and tested only against a light background can behave in unexpected ways once viewed in a dark-themed browser — a detail that's easy to miss if testing only happens in one mode.
How dark mode affects favicon display
Most standard PNG or ICO favicons don't actually change based on the browser's light/dark theme — they display exactly as designed regardless of theme. The problem isn't that the icon itself changes; it's that the surrounding tab background color changes, which can affect how well a fixed-design favicon reads against it.
The specific problem: transparent backgrounds and low contrast
A favicon designed with a transparent background and light-colored or white design elements, intended to blend seamlessly into a typical light browser tab, can become nearly invisible against a dark-themed tab background — the exact same file, rendering very differently depending on the viewer's browser theme, entirely outside the site owner's direct control.
Testing your favicon in both modes
Since most modern operating systems and browsers make switching between light and dark mode straightforward, it's worth explicitly checking your favicon's appearance in both before finalizing a design — a check that's easy to skip if you only ever browse in one mode yourself.
Design approaches that hold up in both themes
- A solid, non-transparent background — removes the theme-dependent contrast problem entirely, at the cost of always showing a visible background square/shape rather than a "floating" transparent icon
- Colors with sufficient contrast against both light and dark backgrounds — mid-tone, saturated colors (rather than very light or very dark, low-saturation ones) tend to hold up reasonably well against either background
- Avoiding pure white or pure black as the dominant design color on a transparent background specifically, since these are the colors most likely to disappear against a same-colored tab background
Does a favicon.ico or PNG actually support true theme-switching?
Standard favicon formats (ICO, PNG) do not natively support automatically switching designs based on browser theme — unlike, for instance, some website images that can use CSS media queries to swap between light and dark versions. A favicon is a single fixed file; the practical solution is choosing a design that reads acceptably well in both contexts, rather than attempting to serve genuinely different files per theme (which isn't a standard, widely-supported capability for favicons specifically).
The Safari pinned tab exception
Safari's specific pinned-tab SVG icon feature (covered in our dedicated guide) does have its own color-handling behavior distinct from standard favicons, since it uses a monochrome format that Safari colors based on context — a genuinely different, narrower feature from general favicon theme support.
A practical recommendation
Unless you're prepared to test extensively across both themes, choosing a solid (non-transparent) background with reasonably high internal contrast is the safer, more broadly reliable default — it sidesteps the light/dark disappearing-icon problem without requiring theme-specific design work.
Check your own design
Upload your image to our free Favicon Generator and review the generated preview against both a light and dark background context before finalizing your design choice.
Keep reading: