You kinda want an orange favicon.
source link: https://chriscoyier.net/2023/02/10/you-kinda-want-an-orange-favicon/?ref=sidebar
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
You kinda want an orange favicon.
You can’t have a white favicon, because, in a lot of situations, you won’t be able to see the dang thing at all. Here’s a default Chrome tab while macOS is in Light mode.
#eee here so you could see the favicon at all. You can’t have a black favicon, because, in a lot of situations, you won’t be able to see the dang thing at all. Here’s a default Chrome tab while macOS is in Dark mode:
No problem, you say, I’ll have the (SVG) favicon respond to dark mode preference:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24.3 24.29">
<style>
@media (prefers-color-scheme: dark) {
path {
fill: white;
}
}
</style>
...
Neat idea, and that actually works to change a properly set up SVG favicon fill, but it actually doesn’t help that much in real life. Chrome tabs aren’t only dark because of a system preference, they can also turn dark because the tab is open in an Incognito window. There is no @media query for that! Firefox does something similar right now: when macOS is in Light mode, you get light tabs in normal windows and dark tabs in Private windows.
Bottom line: you have no idea what the tab color behind a favicon will be like. I’ve been using Arc, which encourages you to fart around with themes, which affects the background color behind favicons. I think all browsers support theming of sorts, further proving you just can’t count on what colors are involved.
So: your favicon should be able to withstand any color behind it. That is often done by providing a solid color background right in the favicon itself. Favicons like these should be visible as intended no matter what:
If you want a colored, shaped favicon, you need a color that works on dark and light equally well. Like orange!
Well, until Safari decides to get weird.
Time for a nap.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK