If you've spent any time stumbling around the net, you've run across a site using an irritating animated favicon—a moving icon that shows up in the address bar, the site's tab, and even the bookmarks toolbar in Firefox. (Here's one at the DHL site.) While there's no way by default to disable animated icons in Firefox other than completely disabling all favicons, there are a couple of possible ways to block a particularly distracting web page icon.
Blocking for a Single Site
If there's a single site that is giving you trouble, you can use the Adblock Plus Firefox extension to block the offending favicon. Just open up Blockable items, find the favicon in the list and choose "Block this item" to get rid of it.
Replace Favicons with Favicon Picker
Instead of blocking the icon, you can choose to replace it with the Favicon Picker extension, although this method requires you to bookmark the site before you can replace the icon. Just open up the properties for the bookmark, and you can either pick an image file to use as the icon, or use the default icon with the Blank button.
Once you've changed the icon, you can delete the bookmark and the change should stick as long as you have the extension installed.
Blocking (Almost) All Animated Favicons
Since almost all of the animated favicons have the filename "favicon.gif", we can use a Stylish user script or dig into Firefox's userChrome.css tweak to hide any image with that file name from appearing as the bookmark or tab icon. If you are using the Stylish Firefox extension, create a new blank style, and paste in the following code, which will replace animated icons on the bookmarks bar with the default icon and leave the favicon blank on the tab bar.
.bookmark-item[image*="favicon.gif"] .menu-iconic-icon,
.bookmark-item[image*="favicon.gif"] .toolbarbutton-icon,
.bookmark-item[image*="favicon.gif"]:not([container]) .menu-iconic-icon,
.bookmark-item[image*="favicon.gif"]:not([container]) .toolbarbutton-icon {
width: 0 !important; padding-left: 16px !important;
background: transparent url(chrome://global/skin/icons/folder-item.png) no-repeat !important;
}
#page-proxy-favicon[src$="favicon.gif"], tab[image$="favicon.gif"] .tab-icon{
width: 0 !important; padding-left: 16px !important;
}
You should be able to immediately see the favicons disappear by clicking the Preview button. If you are satisfied, click Save and they should be gone.
(Here are some more functional Stylish user scripts that can improve your browsing experience.) If you don't want to install the Stylish extension, you can still use this tweak by creating a userChrome.css file in your Firefox profile directory, and paste in the same code from above (make sure Firefox is not running). Note that this style doesn't seem to disable the icons if you are using the Awesome bar to search for a bookmark, or in the bookmarks manager. Got any other tips for killing animated icons? Post 'em up in the comments.