Favicons are a great thing for websites–they let you identify the website easily in tabs and in bookmarks, and especially in the bookmarks toolbar. It’s always annoying to run into a favicon you don’t quite like, however. Here’s how to change a site’s favicon on the Bookmarks Toolbar in Firefox, without any additional add-ons.

Note: Easiest way is with this addon or this addon. However, the way below works such that you need no extra add-ons installed. Pick your poison.

What you will need:

Optional: Stylish

If the bookmark already had a favicon:

.bookmark-item[label="yourlabel"] image {

width:0!important;

height:0!important;

padding: 0 0 16px 16px !important;

background:url('yourimage')!important; 
}

If the bookmark didn’t already have a favicon:

.bookmark-item[label="your label"]{
 list-style-image:url('yourimage')!important;
 }

In both cases, for the ‘yourlabel’ part, write the name of your bookmark (right click the bookmark, and select properties). In the 'yourimage’ part, you can paste in the URL to your image. However, it would be better if you convert your image to a dataURI (basically converts an image to text–I don’t understand this to well, but go here to learn more). You can do this with this. Use language = CSS, encoding = base64, then copy from data: all the way to the end of that line, like below (click for a bigger image):

Place that data:… jumble into the 'yourimage; box from earlier. That’s it!

—

That should be about it. I hope this helps! I’m sorry the tutorial was so much more confusing earlier. I’ve rewritted it so you don’t need the DOM Inspector at all.