Help with URL bookmark icons color

[soilentgreen]

Hi @Godiesc , I use LibreWolf 121.0-1, and I like to know if you can help me to find a way to color the URL bookmark icon to red.

Thanks :-)

[Godiesc]

Hello, I don't think there is a simple way to do that, that icon is provided by the website, so you can change it, but you have to do it for each bookmark. I found this way in change_icon_for_bookmarks

1.- I first search for an image for amazon here: https://iconduck.com/icons/2881/amazon-square. 2.- I edited that image code to add the property fill="context-fill" to give the image the color of the theme.

3.- Add the image into chrome/icons folder. 4.- Into the file ogx_tricks.css add the next code:

.bookmark-item[image*="page-icon:https://www.amazon.com"]>.toolbarbutton-icon {
        width: 0px !important;
        height: 0px !important;
        padding: 0 0 18px 18px !important;
        background-image: url("../icons/amazon-square.svg") !important;
        background-size: cover !important;
    }

[soilentgreen]

Many thanks, It worked like a charm :-) Can I ask another help? There is any way to color the tabs webs icons to red as-well?

[Godiesc]

for the new-tab favicon I use this, I wonder why librewolf change it:

/* Favicon de pagina newtab */

.tab-icon-image[src="chrome://branding/content/icon32.png"] {
    content: url("../icons/foxlogofavicon.svg");
    fill: var(--identity-icon-color, var(--general-color)) !important;
}

for the sites favicon I don't know how to do that, maybe you should ask in https://sh.reddit.com/r/FirefoxCSS/ to see if is possible i some way.

[soilentgreen]

Thanks again @Godiesc for your help. It worked :-) For the sites favicon I'll ask in reddit as you suggested.

[soilentgreen]

@Godiesc , I don't know if it something you want to use in your theme, but the user ilovebmo01 give me this code:

.tabbrowser-tab .tab-icon-image { filter: sepia(1) saturate(5000%) hue-rotate(0deg); }

https://www.quackit.com/css/functions/css_hue-rotate_function.cfm

And it's partially succeeded. All the webs icons with one color as github, virusetotal...are colored in red, but all the webs with more than one color as google, amazon.. are colored partially in red. It as like this code can color only one color of the icon.

Just so you know.

[Godiesc]

thanks for sharing, I didn't consider that cause the favicon is essential to distinguish the tab, and make it just 1 color or similar can do confusion.