Invert site favicon

Please consider inverting the favicon for discourse.gnome.org which is currently black on transparent. Most web browsers use dark tabs which can make the favicon almost invisible. This is how the favicon is displayed on my Firefox with dark theme:

Active tab
image

Inactive tab
image

We cannot unconditionally “invert” the favicon just to make it look good on your dark tab: it would look bad on light mode users.

Favicons are also not styled with CSS, so we can’t add a media rule for that.

In theory it should be possible to use SVG and add a CSS fragment inline to swap the fill, but that won’t cover web browsers without SVG support.

Couple of points:

  1. Use blue GNOME logo as in https://www.gnome.org, which is little better (subjective) for light / dark modes.

  2. Use different contrasting icons for light / dark modes as done in GitHub.

Below is a screenshot of my system using the default Firefox theme set to “light” with Gnome settings also set to “light”, the favicon is invisible:

That’s a Firefox issue, I’m afraid. They decided to go with a dark background for the UI chrome, of course some icons will not look good.

I notified you of the issue so that’s all i can do, good luck. :+1:

It seems that the magic SVG trick worked.

1 Like

Appears the new SVG fav icons are smaller than normal.

Second entry in first row is Discourse tab.