Option to Disable White Background Behind Favicons

[AltCode]

Vivaldi always displays a white background behind the favicon of the currently active tab. I can understand why this would be there, but honestly I myself would like to be able to disable it.

Alternatively, it would be nice if it could also be enabled in background tabs as well.

UPDATE
After trying one of the recent snapshots, I'm glad that this was partially added. White backgrounds no longer display while using a light theme, however they are still present while using a dark theme. I still think there should be an option to disable it.

[Nekomajin]

Upvoted, but I'd like to have an option to show the white background on the background tabs too.

[Stardust]

Firefox doesn't use white background behind favicons and I like it. Upvoted.

[tlk]

While this should be a native option, one can disable it with modding as a temporary workaround, adding to custom.css:

/* Disable favicon white shadow on active tab in dark theme */
.theme-dark .tab-position .tab.active .tab-header .favicon {
    filter: none;
}

[Hadden89]

@Nekomajin Yup. And as it easy to do with css mods the best would be to choose it in settings:

Tab favicon background:
No background
Only on active tab (current behaviour)
On all tabs (slightly dimmed on background tabs)

[Nekomajin]

I am fiddling with custom themes, and I found a severe issue regarding this request. When I have Accent Color from Active Page enabled and Apply Accent Color to Windows disabled, on many sites the favicon is invisible or truncated.

I think this request should be turned into a Theme Preference and should use the foreground color and the corner rounding for the box behind the favicon, if enabled.

[Hadden89]

This post is deleted!

[taravasya]

Up vote for this option...
In addition, about what the topstarter wrote, there is another problem regarding the presence of the alpha channel in the favicon. Sometimes, if there is an alpha channel, its appearance completely deteriorates due to the white background highlight.

[ZuBB]

@tlk any chance to get your patch worked without binding to particular theme? I tried it without .theme-dark part (1st item in selector string) and get no luck. Any hints what I am missing?

[A Former User]

@ZuBB The .theme-dark is OK, the white background is only added with dark themes. You’re missing !important before the semicolon.

[ZuBB]

@potmeklecbohdan thanks it indeed works!

For anyone seeking for a final version of code that works here it is

.tab-position .tab.active .tab-header .favicon {
    filter: none !important;
}

[AltCode]

I now feel that the white background must be properly addressed. With version 3.3 the internal favicons now change their color depending on the theme you are using, so why, oh why must they still need a white background?

Below the active tab (right tab) gets a white background, and to be frank, they look absolutely hideous with the white background.

Meanwhile, some websites, such as Github, change their favicon depending on your OS's system theme. These really don't need a white background and also look very bad with the white background.

I really don't understand why Vivaldi must add a white background to every single favicon, even if they don't need it. If should only be added to favicons that would have a terrible contrast with the current theme.

As an example, Safari does this already:

If the favicon needs it, it adds a white background, but if it doesn't, it leaves them as they are. Vivaldi should be doing this as well.

[Nekomajin]

@AltCode
I would prefer full manual control over the favicon box color. Deciding if I want a box at all, and if so, what color should it be. It would be a step forward more advanced theming, but until that, your request could be a temporary solution.

[mizouniihichem]

@ZuBB thank you this code works

[elephantBrowser]

@ZuBB Thanks so much for this code. Agreed that this should be a built in option -- favicons like GitHub look awful with the current highlight.

[Zebrax00]

Agree there should be an option to disable. It makes some of the favicons uglier and harder to recognize. I also wonder if it would be considered defacement for purposes of trademark law.

[GSFCAT]

I Agree the stroke should be optional for the users if they want, because most of the time, it looks horrible, specially with small logos

[CinnaBread]

is there anyway to remove the white outlines that appear on active tab's icons? It stands out a ton on darker themes and bugs me a little haha

[luetage]

@CinnaBread With a custom modification. Something like this:

.transparent-tabbar .tab-position .tab.active .tab-header .favicon:not(.svg), .theme-dark .tab-position .tab.active .tab-header .favicon:not(.svg), .acc-dark.color-behind-tabs-off .tab-position .tab.active .tab-header .favicon:not(.svg) {
    filter: none;
}

But some favicons will be almost invisible then.

[vectorwhiz]

I don't understand why Vivaldi is persisting in keeping the white trim around favicons. No other browser has it. At least there should be a setting to disable it. This issue has been around and annoying users for far too long.

Besides the absence of text wrapping in Android, this is one of the reasons Vivaldi is not my main browser.