The default theme (in light mode) shows tabs with a mix of light and dark backgrounds. This interferes with responsive favicons built to respond to light/dark mode and expect a consistent lightness for tab backgrounds.
Light mode
As seen below, dark monochrome icons such as the GitHub favicon and the square one I've created for the example (both responsive), don't contrast well on a dark background.
- active tab: light background
- inactive tab: dark background
Dark mode
All tabs are dark, allowing responsive icons to contrast well in both active and inactive tabs.
Light mode with light theme
The light theme brings us very close to what I would expect (high contrast and similar backgrounds across tabs):
Code to reproduce:
index.html
<!DOCTYPE html>
<title>Responsive favicon</title>
<link rel="icon" href="favicon.svg" />
favicon.svg
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<style>
rect {
fill: black;
}
@media (prefers-color-scheme: dark) {
rect {
fill: white;
}
}
</style>
<rect width="32" height="32" />
</svg>
The default theme (in light mode) shows tabs with a mix of light and dark backgrounds. This interferes with responsive favicons built to respond to light/dark mode and expect a consistent lightness for tab backgrounds.
Light mode
As seen below, dark monochrome icons such as the GitHub favicon and the square one I've created for the example (both responsive), don't contrast well on a dark background.
Dark mode
All tabs are dark, allowing responsive icons to contrast well in both active and inactive tabs.
Light mode with light theme
The light theme brings us very close to what I would expect (high contrast and similar backgrounds across tabs):
Code to reproduce:
index.htmlfavicon.svg