Join the AMA (Ask Me Anything) with the Firefox leadership team to celebrate Firefox 20th anniversary and discuss Firefox’s future on Mozilla Connect. Mark your calendar on Thursday, November 14, 18:00 - 20:00 UTC!

This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

How do I completely remove favicons from bookmarks toolbar?

  • 13 replies
  • 4 have this problem
  • 1 view
  • Last reply by skangerland

more options

I have added the following code to my userChrome.css file, but favicons pop up again when I download files (documents, photos, etc). How can I get rid of favicons completely, so that they don't reappear after a download? Thanks!

 */
/* Bookmarks Toolbar - hide favicons/placeholders for sites, but show folder icons for menus */
#personal-bookmarks toolbarbutton:not([type="menu"]) .toolbarbutton-icon {display:none !important;}
#personal-bookmarks menuitem .menu-iconic-icon {display:none !important;}

/* Bookmarks Menu - hide favicons/placeholders for sites, but show folder icons for menus */
#bookmarksMenu menuitem .menu-iconic-icon {display:none !important;}

#PlacesToolbarItems .toolbarbutton-icon {display:none!important;}
I have added the following code to my userChrome.css file, but favicons pop up again when I download files (documents, photos, etc). How can I get rid of favicons completely, so that they don't reappear after a download? Thanks! <pre><nowiki> */ /* Bookmarks Toolbar - hide favicons/placeholders for sites, but show folder icons for menus */ #personal-bookmarks toolbarbutton:not([type="menu"]) .toolbarbutton-icon {display:none !important;} #personal-bookmarks menuitem .menu-iconic-icon {display:none !important;} /* Bookmarks Menu - hide favicons/placeholders for sites, but show folder icons for menus */ #bookmarksMenu menuitem .menu-iconic-icon {display:none !important;} #PlacesToolbarItems .toolbarbutton-icon {display:none!important;}</nowiki></pre>

Modified by cor-el

Chosen solution

The CSS from the other thread should work. But first, remove the -example from the file name. In order to operate, it needs to be named exactly userChrome.css without the -example.

Read this answer in context 👍 0

All Replies (13)

more options

The forum decoded the # signs in your post as item numbers. If you edit your post and type a space before each # sign, that will help clarify what rules you have.

Downloads shouldn't affect whether icons appear on your Bookmarks Toolbar. Is that where they are appearing? Is the problem on the bar itself or on one the lists (e.g., "Most Visited") or in a folder?

more options

The problem is on the bar itself. When I open Firefox there are no favicons, only the names I've given the bookmarks on my toolbar. As soon as I download a file, the favicons pop up again. Until a recent upgrade, I was able to have no favicons on the toolbar itself, but they did appear in the folders I have (this doesn't bother me). I'd love to get rid of them on the toolbar, however, so that I have more space.

Here it is again, I hope that works correctly. Please let me know if the code below is still unclear. Thank you for your reply!

/* Bookmarks Toolbar - hide favicons/placeholders for sites, but show folder icons for menus */

#personal-bookmarks toolbarbutton:not([type="menu"]) .toolbarbutton-icon {display:none !important;}
#personal-bookmarks menuitem .menu-iconic-icon {display:none !important;}


/* Bookmarks Menu - hide favicons/placeholders for sites, but show folder icons for menus */

#bookmarksMenu menuitem .menu-iconic-icon {display:none !important;}

/*


#PlacesToolbarItems .toolbarbutton-icon {display:none!important;}
more options

I can't replicate this on Windows 7, but I notice you have the "bookmarks-deiconizer 2.3" extension. Due to the change in private browsing in Firefox 20, this extension does not work correctly in new windows. You may need to disable it to avoid a conflict with your userChrome.css rules.

more options

For cross-reference, here's the earlier thread about issues with and workarounds for problems with bookmarks-deiconizer: How to fix bookmark icons from reappearing in new browser windows despite having bookmark deiconizer enabled (Mac Snow Leopard/Firefox 20.0).

more options

Interesting. When I disabled the bookmarks-deiconizer 2.3 extension (which must have been what I used in my earlier version of Firefox to remove the favicons - I had forgotten how I did it), they came right back. Obviously whatever I added to my userChrome-example.css file did nothing. Would you suggest that I use this code that you posted on the other forum discussion?

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul); /* Hide icons for FOLDERS */

  1. PlacesToolbarItems .bookmark-item[type="menu"] .toolbarbutton-icon {
 display:none !important

} /* Hide icons for SITES */

  1. PlacesToolbarItems .bookmark-item:not([type="menu"]) .toolbarbutton-icon {
 display:none !important

} /* Add a bit of spacing */

  1. PlacesToolbarItems .bookmark-item {
 margin-left:3px !important; 

}

more options

Chosen Solution

The CSS from the other thread should work. But first, remove the -example from the file name. In order to operate, it needs to be named exactly userChrome.css without the -example.

more options

If you used the userChrome-example.css name for this file then you need to rename it to userChrome.css

Also make sure that the file is i the correct location in the chrome folder in the current Firefox profile folder.

You can use this button to go to the Firefox profile folder:

  • Help > Troubleshooting Information > Profile Directory: Show Folder

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */

#personal-bookmarks .bookmark-item:not([container]) .toolbarbutton-icon{
display:none!important;
}
more options

Thanks for your help! It worked!

more options

I cannot find the userChrome-example.css file in Firefox version 21. I can locate it in version 3.6.23 and have hidden favicons in this version by modifing the userChrom.css file. How can I hide favicons in Firefox version 21?

more options

Hi KDSXflat, the userChrome-example.css file is not necessary. The correct spelling of the file you want to create or edit is userChrome.css. The location for the file can be discovered as follows:

(WIN) Help > Troubleshooting Information > "Show Folder" button
(MAC) Help > Troubleshooting Information > "Open in Finder" button

Then look for a chrome folder. If there is no chrome folder, create a folder named chrome and open it. This is the proper location for your userChrome.css file. More info: http://kb.mozillazine.org/UserChrome.css.


Due to changes in the design of the Bookmarks Toolbar, please use the updated style rules instead of the rules for Firefox 3.6. Here are some examples:

(1) cor-el's global rule above

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */
#personal-bookmarks .bookmark-item:not([container]) .toolbarbutton-icon{
  display:none!important;
}

(2) targeted rules from the linked thread (use just the ones you like):

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul); /* only needed once */
/* Hide icons for FOLDERS */
#PlacesToolbarItems .bookmark-item[type="menu"] .toolbarbutton-icon {
  display:none !important
}
/* Hide icons for SITES */
#PlacesToolbarItems .bookmark-item:not([type="menu"]) .toolbarbutton-icon {
  display:none !important
}
/* Add a bit of spacing */
#PlacesToolbarItems .bookmark-item {
  margin-left:3px !important; 
}

There are more ways to slice and dice, but hopefully that will get you started.

more options

Worked!!!!!!!!!! I haven't updated Firefox in along time and the old version had the Chrome folder already there. Love having all my favorites readily available.

Thanks again

more options

To stop icons from coming back, you can block both favicons and site icons from the about:config list.

  • browser.chrome.favicons = false
  • browser.chrome.site_icons = false
more options

For anyone having this problem on a Mac, this worked for me:

deleted spam link

Modified by the-edmeister