How to Hide Favicons in Opera, Firefox and Chrome

Favicons are pretty, aren’t they? Well, if you no idea on favicons then Favicons are tiny icons that represent a website. You can usually see them in the address bar next to the webpage address. For instance, if you open, you’ll see a mouse icon next to its name in the address bar. Most of us find these icons pretty and easy to identify a website. However, there are some that believe the bookmarks list doesn’t look professional or looks messy once due to too many favicons. Well, whatever maybe the reason, if you’re a favicon hater, then you can hide them in your favourite browser. Here’s how you do it:

hide favicons in opera

In Opera
Click on the Red button on the left hand top corner then go to Settings> Preferences.
Click on the advanced tab and on the left hand side select browsing.
On the right hand side, change the Page icons setting to ‘Show no icons’ and click ok.

In Firefox
Firefox displays favicons in the address bar, bookmarks list and in the tab. You may make use of the respective codes to hide favicons.

For hiding favicons in the address bar:
#identity-box {display:none!important;}

For hiding favicon in tabs:
.tabbrowser-tab .tab-icon-image {display:none!important;}

For hiding favicons in bookmarks:
#personal-bookmarks .toolbarbutton-icon {display:none!important;}

Navigate to the following directory:


Change ‘USERNAME’ with your windows username.

Now, in the Profile folder, you’ll find a user profile folder, open it.

hide favicons in firefox

You should now see a chrome folder. Open the file ‘userChrome.css’ with notepad. Add your desired codes from the above codes to this file and save it.

hide favicons in chrome macosx

In Chrome
I could not figure out a proper way to hide favicons in Chrome on Windows. But, I stumbled upon an extension- No Favicons that hides favicons in Chrome on Mac OSX.



11 comments for “How to Hide Favicons in Opera, Firefox and Chrome”

web analytics