Tap here to go to the mobile version of the site.
Your Firefox is out of date and may contain a security risk! Upgrade Firefox

Support Forum

Can I replace (edit) a Folder Icon on the bookmark bar?


I've got most of my bookmarks in Folders on the Bookmark bar as I did in IE. To get as many as possible showing on the bar I gave each folder a distinct and telling icon and then only had to use one letter in IE for description. Zero letters would be even better.

How can I edit the generic yellow folder icon to a custom icon in Firefox?

Additional System Details

Installed Plug-ins

  • getplusplusadobe16291
  • Default Plug-in
  • Google Update
  • Shockwave Flash 10.1 r102
  • 4.0.50917.0
  • Office Authorization plug-in for NPAPI browsers
  • The plug-in allows you to open and edit files using Microsoft Office applications
  • Virtual Earth 3D 4.00100226006 plugin for Mozilla
  • npPGPlugin
  • Next Generation Java Plug-in 1.6.0_18 for Mozilla browsers
  • Adobe PDF Plug-In For Firefox and Netscape "9.4.0"
  • The QuickTime Plugin allows you to view a wide variety of multimedia content in Web pages. For more information, visit the QuickTime Web site.


  • User Agent: Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv: Gecko/20101026 Firefox/3.6.12

More Information

  • Top 10 Contributor
  • Moderator
3195 solutions 24387 answers

See this UserStyle for the basic code that is needed. You will need to use that code for every folder you want to customize.
http://userstyles.org/styles/34038 - hit the Show Code to see the code

  • Top 10 Contributor
  • Moderator
10739 solutions 96651 answers

Add code to userChrome.css below the @namespace line.
Substitute the Folder_Name with the real folder name(s) (case sensitive).
Place the folder icons in the chrome folder where userChrome.css resides.

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

#personal-bookmarks .bookmark-item[container][label="Folder_Name"] {
 list-style-image:url('folder-icon.png') !important;
 -moz-image-region:auto !important;

#personal-bookmarks toolbarbutton.bookmark-item[container] > .toolbarbutton-text {
 display:none !important;

See http://kb.mozillazine.org/Editing_configuration#How_to_edit_configuration_files

Question owner

Thanks for the quick replies. Unfortunately I'm new to Firefox and don't know what to do with the info that you kindly provided. Find myself clicking from link to link getting more confused as I go along. In IE I simply right click on the Folder/Options/Change Icon.

I really just want to use a browser without spending a whole lot of time learning new tricks.

johnchatman 0 solutions 1 answers

I am having this problem as well. I have folders on my tool bar that I would love to give icons to so that I can distinguish between them more easily.

Is there a plugin developed for this yet? If not, can someone shoot a video on it??



Modified by cor-el