Favicon not legible on dark background

[christianhans]

Firefox's dark mode uses a black background for tabs on macOS. This make the Standard Notes Icon very hard to identify, especially with Pinned Tabs:

https://user.fm/files/v2-605062a2fe903c70897b20ccf17e7f60/Screen%20Shot%202018-12-11%20at%205.07.34%20PM.png

[moughxyz]

Do you know if Firefox provides an API for different icon shades?

[christianhans]

Not sure, but I might it be a solution to make this icon non-transparent? Whatever Icon is used when adding a Shortcut in Chrome is non-transparent and that works great:

https://user.fm/files/v2-0eb93773a04b5298b9fe759bef1c4b7b/Screen%20Shot%202018-12-14%20at%206.59.42%20AM.png

[christianhans]

It seems like many Favicons on the Web are transparent and Firefox is well aware of the issue:

https://bugzilla.mozilla.org/show_bug.cgi?id=1094357

So perhaps keeping the transparency is fine and it is more of a Firefox issue at this point. In the future there will be a new CSS property to detect color schemes (only Safari has it for now): https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme

[moughxyz]

Got it, thanks. We can make the background transparent. Although the foreground will still be black and difficult to see. Do you have examples of how other websites with black foreground icons look with dark mode?

[christianhans]

Here is GitHub in comparison to StandardNotes:

[christianhans]

I really like the Standard Notes icon used on Twitter. Why not use that as FavIcon? Looks a lot better imho.

https://pbs.twimg.com/profile_images/865015980518502404/9j4C27ZH_400x400.jpg

[moughxyz]

That's kind of what we use, just not filled in. Might be too distracting. I'll give it a shot though next time I'm updating this section of the app.

[moughxyz]

Adjusted in latest release.