How do I completely remove favicons from bookmarks toolbar?
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;}
Modified
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 👍 0All Replies (13)
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?
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;}
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.
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).
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 */
- 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;
}
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.
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; }
Thanks for your help! It worked!
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?
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.
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
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
For anyone having this problem on a Mac, this worked for me:
deleted spam link
Modified