1647173 - When in dark theme, some favicons (like github's) are not displaying correctly

Status: NEW

(Firefox :: Address Bar, defect, P5)

Description

[Will]

Attachment: megabar dark.png

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:78.0) Gecko/20100101 Firefox/78.0

Steps to reproduce:

some websites such as github change their favicon if the browser is in dark theme. This works in Firefox's tab but not in megabar, see red arrow in attached screenshot

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

Bugbug thinks this bug should belong to this component, but please revert this change in case of error.

Comment 2

[Marco Bonardo [:mak] (Away Apr 25 - May 5)]

What github does is smart, but we can't tell on our side if the favicon they use is for light or dark theme, because the Web spec doesn't have anything like that, it's very likely done through js by using an svg mask-icon, for which we have bug 1337397.
If we'd support mask-icon favicons, we could probably do something about dark theme.

Comment 3

[Will]

Also, strangely I just discovered that Github's favicon changes depending on what Windows 10's setting (dark mode or light mode), not Firefox's theme. What github is doing is a bit of a mess, is there any discussion about an official spec for how to handle dark/light theme favicon switching?

Comment 4

[Will]

(In reply to Marco Bonardo [:mak] from comment #2)

What github does is smart, but we can't tell on our side if the favicon they use is for light or dark theme, because the Web spec doesn't have anything like that, it's very likely done through js by using an svg mask-icon, for which we have bug 1337397.
If we'd support mask-icon favicons, we could probably do something about dark theme.

But Marco, Firefox does support this in the tab, please look at the green arrow in the attached screenshot. Whatever is going on with Firefox's tabs should also be happening in megabar.

Comment 5

[Drew Willcoxon :adw]

(In reply to Will from comment #4)

But Marco, Firefox does support this in the tab, please look at the green arrow in the attached screenshot. Whatever is going on with Firefox's tabs should also be happening in megabar.

To expand on Marco's comment, the mechanism that shows favicons in tabs is different from the mechanism that shows favicons in urlbar results. A quick check does show that GitHub does use mask-icon favicons (although they have others too), so it's likely Firefox supports that in tabs but not in urlbar results. We need to fix the bug that Marco pointed out, bug 1337397, for that.

Comment 6

[Will]

(In reply to Drew Willcoxon :adw from comment #5)

(In reply to Will from comment #4)

But Marco, Firefox does support this in the tab, please look at the green arrow in the attached screenshot. Whatever is going on with Firefox's tabs should also be happening in megabar.

To expand on Marco's comment, the mechanism that shows favicons in tabs is different from the mechanism that shows favicons in urlbar results. A quick check does show that GitHub does use mask-icon favicons (although they have others too), so it's likely Firefox supports that in tabs but not in urlbar results. We need to fix the bug that Marco pointed out, bug 1337397, for that.

But bug 1337397 doesn't say anything about megabar/URL bar results...

Comment 7

[Drew Willcoxon :adw]

That bug is about the favicons database, which is what urlbar results use.

Comment 8

[Will]

The favicons in the tabs should work in the exact same way as URL bar results, to avoid issues like this. Is that a long term goal?

Comment 9

[Marco Bonardo [:mak] (Away Apr 25 - May 5)]

(In reply to Will from comment #8)

The favicons in the tabs should work in the exact same way as URL bar results, to avoid issues like this. Is that a long term goal?

Probably not, unless long term is years. The tab has to bypass the favicon service because of things like private browsing, and some "new" technologies like mask-icon wouldn't work until someone implements them, that makes preferable the current state for the tab, that is very primary ui. If someone would code a private mode into the favicon service (memory tables or such) and add color recognition and mask, then it could do it, but I don't see any Mozilla developer having enough time for that.

Comment 10

[Mathew Hodson]

Similar to bug 1628051

Comment 11

[Will]

same issue with www.nytimes.com too, and I'm sure there are others. So it's not just github

Comment 12

[Karl Dubost💡 :karlcow]

This is a polish issue which might be annoying for users.
Probably part of the visible paper cuts.