Improved FavIcon Contrast in Tab Bar

[Nish7009]

seems like this mod doesn't work anymore I've had some issue with it and cause I don't know any js I can't really fix it tho I've gotten the output of the error from console which might help you out

[nomadic]

@nish7009 Sorry, I will have to take a look at it later.

I stopped using this mod as GitHub finally started serving me the correct white favicon, so I didn't need to continue working on the mod for my usage.

Is there a site in particular you are having issues with favicon contrast? It would be useful for me to know when I have a chance to do some testing.

[g_bartsch]

@nomadic said in Improved FavIcon Contrast in Tab Bar:

Is there a site in particular you are having issues with favicon contrast? It would be useful for me to know when I have a chance to do some testing.

These site icons are dark and almost invisible when using a dark theme:

https://www.atlanticcouncil.org
https://www.cfr.org
https://www.heritage.org
https://www.cato.org
https://www.brookings.edu
https://carnegieendowment.org
https://csbaonline.org
https://www.military.com
https://www.navytimes.com

I fully agree it would be great if Vivaldi dealt with these natively. To your knowledge has anyone filed a feature request on the forum? I'm sure this affects many people using many different theme colors since favicons come in all colors and shades.

[Dancer18]

@codic I found a script here in the forum, with which at least in Linux the .js file is reactivated after a vivaldi update in a simple way.

First you create a new folder vivaldi-modding in the /home - directory.

Then save the following script as stable.sh in this new folder:

#!/bin/bash
stable=/opt/vivaldi/resources/vivaldi
moddir=$HOME/vivaldi-modding/
sudo cp $moddir/custom.js $stable
sudo sed -i -e 's/<\/body>/  <script src="custom.js"><\/script>\n  <\/body>/' "$stable/browser.html"
sudo chgrp rainer $stable/custom.js
sudo chmod g+rw $stable/custom.js
echo "vivaldi patched"

Finally, create a starter stable-bash stored in ~/.local/share/applications as stable-bash.desktop Command: bash /home/rainer/vivaldi-modding/stable.sh
Run in Terminal.

[Desktop Entry]
Name=stable-bash
Exec=bash /home/rainer/vivaldi-modding/stable.sh
Comment=
Terminal=true
Icon=vivaldi
Type=Application

You might chose any icon other than vivaldi to not mix up with your browser icon.

Usage:
After any update just click on this starter. A terminal will open asking for your password.
Type it in and press ENTER.
That's it.
Vivaldi will start with your .js activated.
Do this short process only once, otherwise Vivaldi won't work and you would have to edit the program subfolder.

[barbudo2005]

@g_bartsch

Said:

These site icons are dark and almost invisible when using a dark theme

Use:

.tab[title*="Council"]  .favicon img

{border: 1px solid #d8d8d8 !important;
border-radius: 4px !important; 
background: #adadad !important;}

[Hadden89]

@g_bartsch Which is just a "lite" version of the vivaldi stock filter for the active tab:

.tab-position .tab:not(.active) .tab-header .favicon {
filter: drop-shadow(1px 0 0 rgba(246, 246, 246, 0.25)) drop-shadow(-1px 0 0 rgba(246, 246, 246, 0.25)) drop-shadow(0 1px 0 rgba(246, 246, 246, 0.25)) drop-shadow(0 -1px 0 rgba(246, 246, 246, 0.25));
}

[g_bartsch]

@barbudo2005 Thank you. I like this solution - particularly the fact that it can target specific icons only and apply different effects to them - but for some reason the code isn’t working for me. I'll keep trying a few things.

[g_bartsch]

@Hadden89 Thank you. Hmm? I'm not sure what is wrong with my install but this code also isn’t working.

[Hadden89]

@g_bartsch if you used the code with

filter: none !important

you probably have to remove the !important

[barbudo2005]

@g_bartsch

If you feel lazy to modify the code for different favicons, use this general code for all:

.tab  .favicon  img

{border-radius: 5px !important; 
background: #adadad !important;}

The influence on the "good" favicons is minimal, rather imperceptible.

[Hadden89]

@barbudo2005 This doesn't mean is a good idea. Often is better to avoid it.

---

Tl;Dr: !Important may break ancillary CSS.

[g_bartsch]

@barbudo2005 and @Hadden89 Thank you. Maybe it's my simple mistake; do I need to install that JavaScript for the CSS code to work?

[barbudo2005]

@g_bartsch
Said:

do I need to install that JavaScript for the CSS code to work?

No. The code is simple CSS and work perfect in custom.css.

The code by @nomadic is other solution with Javascript.

Please post the code you are using.

[g_bartsch]

@barbudo2005 said in Improved FavIcon Contrast in Tab Bar:

Please post the code you are using.

I've used these two sections of code (not simultaneously).

/* add background behind icon in Tab Bar */
.tab[title*="Council"]  .favicon img
{border: 1px solid #d8d8d8 !important;
border-radius: 4px !important; 
background: #adadad !important;}

/* add background behind icon in Tab Bar */
.tab[title*="Council"]  .favicon img
{border: 1px solid #d8d8d8;
border-radius: 4px; 
background: #adadad;}

[g_bartsch]

@barbudo2005 said in Improved FavIcon Contrast in Tab Bar:

No. The code is simple CSS and work perfect in custom.css.

The code you gave me for the Web Panel side bar icons works perfectly.

[barbudo2005]

@g_bartsch

Said:

The code you gave me for the Web Panel side bar icons works perfectly.

So the "system" of CSS is Ok.

Maybe there is another code with .favicon that is interfering. Look in your custom.css for this.

[g_bartsch]

@barbudo2005 I removed all CSS from the file except for the two snippets of code (tried each separately) and no joy. I wonder if my icons are named differently? So far using Developer Tools I can understand how to determine the tab names.

[barbudo2005]

@g_bartsch

Post this image of developer tools:

[barbudo2005]

Alternative code considering domain and not tab title:

.tab:has(img[srcset*="atlanticcouncil.org"])  .favicon  img,
.tab:has(img[srcset*="cfr.org"])  .favicon  img


{border: 1px solid #d8d8d8 !important;
border-radius: 4px !important; 
background: #adadad !important;}

[barbudo2005]

By applying this selector you can give color to the title of webpage groups:

.tab:has(img[srcset*="atlanticcouncil.org"]),
.tab:has(img[srcset*="cfr.org"])

{color:  cyan !important;}