Favicon dark/light mode issue

[duchsuvaa]

There is a problem with some favicons, like for example github and icones.js.org.
In Firefox when I change mode these icons change in color. They are black in light mode and white in dark mode. For some reason this doesn't work in Vivaldi, making some icons illegible in one of the modes. Is there some setting responsible for that or is it just some fancy feature of Firefox?

[OakdaleFTL]

@duchsuvaa Works for me, in Catalina...

[duchsuvaa]

my question is about favicons... bookmarks...

[OakdaleFTL]

@duchsuvaa Perhaps you could post a screenshot of the issue?

[OakdaleFTL]

In the mean time, look at these...

[duchsuvaa]

[duchsuvaa]

Actually Github favicon autofixed itself somehow. I really wonder how it works. What does make some icons appear different in different modes? Is it site admin job or is it a browser function?

[Pathduck]

@duchsuvaa said in Favicon dark/light mode issue:

I really wonder how it works

The browser detects your OS dark/light theme setting.
Video for Windows: https://0x0.st/Htai.mp4

Sites use a CSS feature for this:
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme

The Icones site does not seem to do this, so it will look bad on light themes.

Here is Chrome on light theme:

Firefox and Opera does some "magic" trick to also make it good in light themes. Don't know how they do it - probably detect the contrast levels of the favicon. This is something Vivaldi does not have at the moment.

[wonderwhy]

I've got the same issue with GitHub. In my case it's on Windows, but I suppose it shouldn't matter.

I have just tested it and the favicon is dark by default, no matter which browser theme is chosen. The only way to make it light is to select "prefer dark website appearance" in Vivaldi settings.

But this makes GitHub always display the light favicon, even with a light theme, which leads to essentially the same problem: a hard/impossible to see favicon. Additionally, this makes the websites use dark appearance, if they have one, which I would like to avoid.

Is there any way to make favicon more visible, ideally to somehow tie it to selected theme? Maybe display a light/dark background box around it, depending on favicon and/or theme color?

[Totto]

Similar issue? Suddenly favicon is white, was black:

<<left: inverted, right normal favicon (page not reloaded in workspace for some time, has kept it's black bg white 'N'
EDIT: Ups! this is MacOS-section, I'm in Windows but ...