Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Modify favicons with a site-based userstyle


I have a style that modifies the appearance of tab favicons by modifying userChrome on Firefox.
In order to keep the install easy in upcoming Firefox versions and maybe even support other browsers, I would like to convert it to a site-based userstyle.

Here's what it does:
1. Accesses tab favicons:
tab .tab-icon, .tab-icon-image
2. Applies CSS filters to them:
filter: grayscale(1) brightness(0.5) contrast(2);
3. Inverts the filter as an optional setting:

So here is the code that I tried to make:

@-moz-document domain(*) {/* set the Userstyles category */}

@-moz-document regexp("chrome://browser/content/browser.xul") {
  #page-proxy-favicon[src$="/favicon.ico"] {
     filter: grayscale(1) brightness(0.5) contrast(2) invert(1);

I based it upon these styles because they claim to apply to a specific site, however

  • it doesn't work
  • these and other favicon styles I found still seem to base on XUL, which is not what I intend

Any ideas?


  • edited May 2017 Chrome

    Reading it back, I'm not sure my advice was accurate.
  • edited May 2017 Firefox

    You're at least attempting to target the UI with:

    @-moz-document regexp("chrome://browser/content/browser.xul") {

    This looks wrong to me, but I'm no expert. I have made UI styles in the past, and mine looked like the example you linked. No @-moz-doc, just

    @namespace url(;

    at the top.

    Yeah, it does look kind of wrong but I tried to follow others' example.

    In your example, the @-moz-doc doesn't really count. The empty

    @-moz-document domain(

    code section is just for US.o categorization purposes, so it'll show up in Google searches.

    It can claim to be a "site style" because it uses selectors like:


    which would only apply to Gmail tabs, presumably.

    So it's misleading basically. Okay, makes sense.

    Basically, you can't wrap a browser chrome style in any type of per-site @-moz-doc rule. It is the UI, outside of, and independent from any website.

    Yeah, that's why I need some help to do this properly. My goal for this is to use only site-based code.

    On a side-note, in my experience [src$="/favicon.ico"] is far from universal. It will account for a large percentage, but at least 10% will use different addresses for favicons.

    I see. If I wanted to do this properly, I would probably need to make an userscript instead that actually reads the metadata, but unfortunately I'm not that familiar with JS.

  • edited May 2017 Chrome
    Guess I didn't delete quick enough. The favicon address and "misleading" US.o are accurate. I'm not positive about my assertion regarding per-site UI styles. It occurred to me that I've done something like that before with scrollbars. May be talking out of my ass there. Firefox is not my specialty.
  • As far as I know, what you want to do is impossible.
    Only XUL-based styles can change anything in the Firefox interface. Accessing Firefox elements through a website's code will not work.
    I believe that, unfortunately, all such styles will only work until FF 56.
    Userscripts are also not an option because extensions such as Greasemonkey do not have access to browser elements.
  • edited May 2017 Chrome

    Seems like I need to reclarify.

    The link I posted to OP refers to a XUL-based style that works only in Firefox and basically changes the way tabs look by applying a style to their icon.

    What I want to do now, however, is to make a site-based style with a similar idea that applies style directly to every site's favicon file, so it wouldn't rely on any UI elements, just sites' icon files. That means it should work on more browsers, but somewhat less sites (internal pages, extension stores).

    With the way site styles work, it seems to be possible as long as a favicon.ico can be found. But how can I do it?

  • Which browser?

  • Firefox, although I don't see a reason why it wouldn't work on others.
  • They're both very different. Chrome actually has a good extension for this, but you'd have virtually no access to any hacks like FF. Last I checked (maybe a year or so ago), FF's favicon extensions were all buggy to some degree. Maybe worth rechecking. A couple worked, but missed the bookmark library. If that's not important, you might find a suitable one.

    Bottom-line, no it's not possible the way you're thinking with Stylish. You could go to the icon URL and change it to whatever you want, but that wouldn't apply to the icon when it's pulled by FF and placed in the tab. You'd need a UI style to swap the icon that's injected for the one you want.

    Along the same lines though, swapping icon image file URLs behind the scenes would be an interesting approach. IIRC, I played around with a link redirector a while back that was quite good with behind the scenes requests. Wish I would have thought of that back when I was looking.

    Maybe this is it:

    If not, search "link redirector" or "URL redirector" and try them out.
  • edited May 2017 Firefox

    I have now found a style that successfully applies filters to all images on a page (without XUL):

    body img,a[href] img, a[href] button, input[type="image"],*[onclick]:empty, body a:empty
      opacity: .5!important;

    But if it still isn't possible to do this for favicons, I guess I will probably try forking someone's extension to achieve this :P

  • I doubt, you can do it in a regular style without XUL, because you'd have just the same access rights a regular STYLE tag would have in HTML.
    The favicon is different from other images. It doesn't appear in document.images.
    However, it would be rather simple in javascript: See changing-website-favicon-dynamically
    Recently, I was trying the same thing, but only if the load failed. I couldn't find a load indicator, though.
Sign In or Register to comment.