Favicon Hard to See in Dark Browser Tab

[teuila-mau]

Type of feedback

//dev

Description

When viewing the website using a dark-themed web browser, the dark favicon on transparent background is difficult to see compared to other websites.

Tested in both Chrome and Firefox. Please see attached.

Step-by-step reproduction instructions (optional)

1. Visit https://learn.wordpress.org/.
2. Click Preview the New Theme in top left.
3. In computer system settings and/or browser preferences, change to dark mode.
4. Look at browser tab. Refresh page or restart browser if needed to apply dark theme.

Result

Favicon is hard to see against dark browser tab.

Expected

Favicon should be clearly visible.

Screenshots or screen recording (optional)

Other information (optional)

These are the two files for the two different sizes. I opened them in Photoshop to confirm they are using a transparent background.

https://learn.wordpress.org/files/2023/08/WordPress-logotype-simplified-100x100.png
https://learn.wordpress.org/files/2023/08/WordPress-logotype-simplified-300x300.png

[adamwoodnz]

@WordPress/meta-design thoughts on changing this? At a quick glance it seems most other .org sites use a lighter version, here is Learn next to the homepage:

[jasmussen]

I'd avoid the specific gray+white favicon shown in the example. But the simplest solution, most likely, is indeed a white logo on a dark background. Perhaps something like this:

Figma.

An alternative to consider would be to use dark-mode ready SVGs, like this. Would be nice, but can go either way on this one.