feat: Favicons in tabs

[PennDraken]

Description

Added commonly requested option to toggle favicons in tabs.
Open issues covered (note: many duplicates):
#304
#757
#304
#1078
#1974
#1855

Images

No favicons (default):

Favicons:

Settings page:

Known issues

• Icons might have low contrast depending on tab color
• Favicon only updates when page is fully loaded. This means it sometimes takes a little while for the old favicon to update.

[PalmerAL]

Thanks for opening a PR; there have been enough requests for this that it probably does make sense to do something.

The contrast issue has been one of the big reasons for not doing this until now; do you have any thoughts on how to address that? Some possibilities are:

• Filter the favicon to make it black-and-white
• Use mask-icons instead of favicons, where available: https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/pinnedTabs/pinnedTabs.html
• Only make the favicon option available when the option to change the tab bar color is turned off.

If the favicons are too slow to load, you could look into detecting them from the preload script, rather than relying on the page-favicon-updated event; that might be faster, but I'm not sure.

[PennDraken]

Thanks for your response! <3

Filter the favicon to make it black-and-white

Grayscale would probably not improve contrast, but perhaps forcing it to be either black or white might. This would not work very well for the Google icon in the screenshot however.
Might be solveable by mapping different values to either black or white.

Brightness mapping

Perhaps by calculating average color of icon, and checking contrast with tab color, we could then invert icons that have bad contrast.

I think this approach might work well with keeping to the minimal theme of the browser. Of course the issue will be that this brightness mapping will be different for different favicons.

Use mask-icons instead of favicons, where available:

Would probably work, although many sites do not support them (such as apple.com and google.com). Are you just thinking we re-color it either black or white to match the tab text color?

Only make the favicon option available when the option to change the tab bar color is turned off.

Could be a quick fix, although I think a sizeable amount of users might prefer tab theming with ugly low-contrast favicons.

Using preload script, rather than page-favicon-updated event

I'll look into this

Another solution might be to use dark-mode and light-mode favicons when available.

I also have a question regarding the placement of favicons in combination with the tab-icons (reading, playing-audio). What do you think feels best, placing favicons left-most when other tab-icons are visible or right-most?

[PalmerAL]

Brightness mapping

I like the screenshot a lot!

the issue will be that this brightness mapping will be different for different favicons

This does seem tricky. For a "flat" style favicon with only a few colors, you could probably just sort all the pixels by brightness and pick the median as the threshold. This would totally stop working once you have a favicon with a gradient though. Maybe an alternative would be: put all the pixels in buckets by brightness: [0.00, 0.01, ... 0.99, 1.00]. Look in the range [0.3, 0.7] for a discontinuity, which will be represented as a series of buckets greater than some length with few or no pixels, and make that the white/black threshold.

Are you just thinking we re-color it either black or white to match the tab text color?

Right; since they only have a single color they're easy to re-color. But I haven't researched how many sites support them; if usage is low that won't be very useful.

One downside to doing recoloring like this is that color is a big part of what makes the favicons quickly recognizable. If you recolor them to black and white, do they still feel useful for identifying tabs?

Maybe the favicon setting should be always available, but if tab color is turned on we convert the favicons to black/white, and if it's off we show them in original color. I'm not sure.

I also have a question regarding the placement of favicons in combination with the tab-icons (reading, playing-audio). What do you think feels best, placing favicons left-most when other tab-icons are visible or right-most?

I'm not sure about this either :) I'll probably need to try it both ways and see.

Also, we probably want to hide the favicons entirely when the tabs become very small. There's an existing compact-tabs class that can probably be reused for this.