Changing bookmark and browser tab favicons on a per-website basis

For web sites that have no favicon (or an unsuitable one) I would like to add my own icon for all instances where that website's favicon would usually be displayed within the web browser.

I have already successfully tackled the site icon that shows up in the URL bar drop-list, so I think that just leaves the bookmark favicon and the favicon that is displayed on the web browser's tab.

Tab icon

I've already managed to change tab icons by using label but this is only useful for single pages (because the tab label could change as you navigate around the web site). I therefore wanted to be able to assign the browser tab icon based on a web site's URL (which would mean that I could then use wildcards to determine how much of the web site is affected).

I found this example tab[image*='sitename'] .tab-icon-image { ..custom icon.. } which works, but it does not work for subdomains. For example: entering userstyles.org as the sitename in the example code above, will change the tab icon for all pages on the main userstyles.org web site, but it won't work for any of the userstyles.org Forum pages. Even if I put forum.userstyles.org as the sitename, it still does not work.

By the way, I don't really understand why 'image=' has been used in this example, and not something like 'url='.

Bookmark icon

I also looked up examples for changing the icons of individual bookmarks, but despite finding a few examples, not one of them worked. Absolutely nothing was happening when I tested the example code, and so there was no way for me to know where to even start troubleshooting. I also don't know whether multiple changes are needed in Waterfox/Firefox in order for the new changed bookmark icon to be visible everywhere (e.g. in the sidebar, as well as in the main Library window, and also on menus and toolbars).

Here are a couple of code examples that I used as a template (neither of which did anything at all):
.bookmark-item[container][label="Paymo"] menupopup .bookmark-item[label="Clients"] image {
	width: 0 !important;
	height: 0 !important;
	padding: 0 0 16px 16px !important;
	background: url('images/person.png') !important;
}

and

.bookmark-item[label="Youtube"] image {
width:0!important;
height:0!important;
padding: 0 0 16px 16px !important;
background:url(imagename.png)!important;
}
.bookmark-item[label="Youtube"] > .toolbarbutton-text {
display: none !important;
}

I also found this code (see below) which gives clues as to the various places in the browser that a site icon might need to be changed, but I couldn't get any of this code to work either.
.bookmark-item image[src*="www.spamcop.net"],
.autocomplete-richlistitem[url*="www.spamcop.net"] image.ac-site-icon,
#page-proxy-favicon[src*="www.spamcop.net"],
.tab-icon-image[src*="www.spamcop.net"] {
padding-top: 16px;
background-image: url("test.png") !important;

Questions:

Q1: Is the tab[image*='sitename'] method the best way to change the web browser's tab icon for a specific web site?

Q2: How do I change the browser tab icon for subdomains? (it would be useful to be able to do this separately from the main domain).

Q3: How can I change the bookmark favicon for a specific web site? (regardless of where the bookmark is displayed within the browser).


FYI: I'm using Waterfox v2020.01- which is basically the same as pre-Quantum Firefox v56 (although I've changed my user agent to stop websites complaining about my browser being 'out of date').

Comments

  • edited February 1 [?]
    To change the tabs, use this code as example:
    .tabbrowser-tab:not([pinned]):not([busy]) .tab-icon-image:not([src]) {
    display: -moz-box !important;
    }
    .tabbrowser-tab[label*="serstyles.org"]:not([busy]) .tab-icon {
    visibility: hidden;
    }
    .tabbrowser-tab[label*="serstyles.org"]:not([busy]) .tab-icon::before {
    content: url("https://www.waterfox.net/favicon-16x16.png"); visibility: visible; margin-right: -16px;
    }
  • To change the bookmarks:
    .bookmark-item[label="/*name of your bookmark*/"] .toolbarbutton-icon {
    visibility: hidden;
    }
    .bookmark-item[label="/*name of your bookmark*/"] {
    background: url("https://www.waterfox.net/favicon-16x16.png") no-repeat 3px 3px;
    }
  • João. said:

    To change the tabs, use this code as example:

    Thank you for your reply, João.

    However, the css that you provided is no different (in its outcome) to the simpler css that I was already using.

    My question was: How do I change the tab icon only for a sub-domain without affecting the main (root) site?

    As I pointed out in my original post, anything that relies on using 'label' will not work properly, because a web site's page label can change from page-to-page within the web site.

    The solution therefore needs to be URL-based, so that the css will continue to work even if different pages on the same web site have different labels.

    If anybody out there knows how to do this, your assistance would be very much appreciated.
  • João. said:

    To change the bookmarks:

    Unfortunately this css does not work either. It does nothing at all. It doesn't even make the bookmark icon go blank (which would at least be a clue that the desired item was being correctly targeted).

    It may (possibly) be something to do with the fact that bookmark icons are displayed as part of an XUL tree. I have noticed that it is impossible to use DOM Inspector to select an individual bookmark icon; you just get a general #bookmarks-view-children id instead of the specific bookmark entry (and no individual bookmarks are listed in the Inspector).

    I have seen css that CAN change the entire set of 'parent' icons within the Bookmarks Library and SideBar panel etc. This css is part of the code used by the Classic Theme Restorer extension, and it definitely works (I've already used sections of the css to change things like the top-level 'History' icon in the Library, for example). But that css is only for changing built-in top level Library icons (e.g folder icons etc.), it's not for changing individual user-created bookmark items.

    The overall css from Classic Theme Restorer is a bit too complicated for me to understand, so I can't tell if there are useful clues in there could be modified to help change individual bookmark icons.

    Here is a link to the CSS code (which works for changing top-level Library and SideBar icons) in case it gives anyone some clues on what might be the best approach for changing individual bookmark icons, seeing as all previous examples do not work.

    https://pastebin.com/zfMNSM5S

    Thanks.
  • As far as I know, it's only possible to modify the icon of a specific tab using the "label" attribute. There's no URL-based solution.

    As for bookmarks, the code works only on the bookmarks bar, below the URL bar.
    It's not possible to modify the icon of a specific bookmark in the library or in the sidebar, because there's no way to individualize an item in the tree, except through the line number (nth-child).
Sign In or Register to comment.