Replacing a web site's favicon in the URL bar 'drop list' - SOLVED

edited January 2020 in Style Requests [?]
I'm trying to change the favicon for a specific (previously visited) web site that is displaying in Firefox's URL bar drop list.

I've managed to isolate the icon using the following code:

.ac-site-icon[src^="page-icon:"] { background-image: url("chrome://browser/skin/identity-icon.svg") !important; }

but the problem is that this css displays both the old and the new icon at the same time (instead of only displaying the new icon).

I've had a similar issue in the past when I was trying to change an icon on a Firefox browser tab, however in that particular case I was kindly given some css that used width:0 and padding to get rid of the original icon. I've tried adapting that same method for the code above, but I just can't get it to work.

How do I need to amend the above css so that only the new replacement icon is visible?


  • edited January 2020 [?]

    Try this, edit as needed.

    width: 0px !important;
    height: 0px !important;
    padding: 0px 0px 16px 16px !important;
    background-image: url("chrome://branding/content/icon32.png") !important;
  • Thank you for your reply, calico. Once again you have come to my rescue (just like you did last time).

    Unfortunately on this occasion, the css that you provided did not work. But it was enough to set me off in the right direction, and after some trial and error experimentation with several variations to your code, I finally got it to work correctly.

    I probably should have mentioned that I am now using Waterfox Classic (the latest v2020-01 that was released this month) instead of Firefox; just in case that has any bearing on the outcome (although Waterfox is designed to have its GUI stay as close to Firefox v56 as possible, so this should mostly make no difference).

    Perhaps this is the reason why .urlbarView-favicon would not work under any circumstances; it had to be .ac-site-icon (which was the object class that I found when using DOM Inspector on the URL Bar drop list icons).

    Also, setting the icon width and height to 0px caused issues, especially in the absence of a subsequent setting that sets the icon to the correct size (i.e. width: 16px !important; height: 16px !important;).

    So, taking the above factors into account, this css below is the exact code that works perfectly (whereas all other variations did not).

    .ac-site-icon[src^="page-icon:"] { padding: 0px 0px 16px 16px !important; background-image: url("chrome://branding/content/icon16.png") !important; width: 16px !important; height: 16px !important; }

    Thanks to your help, I can now see that the issue of double 'overlaid' icons is solved by using padding to literally push the old icon out of the way. In previous icon changing examples (such as on browser tabs) it was not necessary to state the final display size of the replacement icon (which is why I did not include any such value in my first css attempt in the opening post of this thread). However, in this particular instance, it was absolutely needed (otherwise nothing would display).

    Thanks again for taking the time to reply. I now have a better understanding of how the process is actually working, and so I should be able to adapt this for other unrelated instances in future where icon replacement is needed.
  • Happy to have assisted in a small way. .urlbarView-favicon is the selector on Quantum Firefox, used because your user agent indicated you were posting from Firefox 69. I still miss the old classic Firefox/Waterfox, styling the UI was so much easier and fun with the old Stylish. Glad you figured it out!

Sign In or Register to comment.