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 to change the picture of folder icons in bookmarks?

  • 11 replies
  • 22 have this problem
  • 4 views
  • Last reply by Gungistoker

more options

In Windows Explorer you can go to the properties of a folder and change the look of the folder. I can't seem to be able to do the same with folder icons in bookmarks within Firefox. Is it not possible to do so? If yes, how please? Thank you

In Windows Explorer you can go to the properties of a folder and change the look of the folder. I can't seem to be able to do the same with folder icons in bookmarks within Firefox. Is it not possible to do so? If yes, how please? Thank you

All Replies (11)

more options

As far as I know, there is no built-in way to change those icons.

What would you like to change them to?

more options

The comments for this extension suggest that the extension still works for folders, but is broken for bookmarks and won't be updated anymore because of API issues.

So if you are only interested in folder then you can consider to give it a try.


You would have to use code in userChrome.css do achieve this without an extension.

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

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

Add the code to the userChrome.css file below the default @namespace line.

more options

One folder is 'Work' so I would like an icon showing that (for ex. a businessman), another is 'Education' an icon for that (for ex.. a graduation hat), another is 'Computer stuff' I would like one for that (a PC), one is 'Security' (a lock), one is 'A-V Media' (a camera) etc. etc a total of 10, hence by having icons I could spot them easier as opposed to having to read through them. That's what I have in my Explorer folders for all my more often used ones, and it works great--Photoshop (photos folder) has its icon, my Personal folder has me, etc.

more options

I forgot to say thanks to jscher2000, the above is meant for you. As to co-rel, thanks to you as well. The extension you mention, as you say 'suggests' and since it doesn't work with other stuff I don't know if I'd want to try it out. As to writing the code myself, that seems OK except that you mention doing so with, "userChrome.css" which I am assuming is for the Chrome browser and this is a Mozilla Firefox forum. Sorry if I am wrong with my assumption here.

more options

The two customization files userChrome.css (user interface) and userContent.css (websites) are located in the chrome folder in the Firefox profile folder and have nothing to do with Google Chrome.

This chrome folder and the userChrome.css file do not exist by default and need to be created.

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

  • Help > Troubleshooting Information > Profile Directory: Show Folder (Linux: Open Directory; Mac: Show in Finder)

You can also use the Stylish extension to make this easier.

more options

Thanks buddy (co-rel) I truly appreciate this. Let me get this straight. In your first instance you mention one file and only one: userChrome.css In your 2nd email you mention 2--you now added: userContent.css Also in the this 2nd email you mention that these 2 don't exist and I have to create them myself. And yet in the first one you say, "Add the code to the userChrome.css file below the default @namespace line." Whereby I'm assuming that if there is a default line, then someone must have added it. But as you said, I had to create it myself, so what would this default line be? Anyhow, I think, basically, if I understood correctly what I would need to do is. R-click on this folder and create a new text file. Then I simply cut and paste what you wrote above:

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

  1. personal-bookmarks .bookmark-item[container][label="Folder Name"],
  2. bookmarksMenuPopup .bookmark-item[container][label="Folder Name"],

appmenu_bookmarksPopup .bookmark-item[container][label="Folder Name"]{

list-style-image:url('folder-icon.png')!important;
-moz-image-region:auto!important;

}

Exactly as I see it. Then I save it and rename the file, ' userChrome.css ' Is this correct? Assuming yes, where does the 2nd file come in--userContent.css--and what do I do with it? Thanks again

more options

Sorry but as of right now, this is not a feature on Firefox.

Sorry.

more options

userContent.css can be used for customizing the way web sites look. = Web Page Content
http://kb.mozillazine.org/UserContent.css
You don't need to use userContent.css for customizing the Firefox User Interface - that's what userChrome.css is used for.


In addition to the code that cor-el provided, you need to come up with your own images for list-style-image:url('folder-icon.png') and each of those images needs a unique name. Also, those images need to be placed in the user-created \Chrome\ folder along with the userChrome.css file.

more options

Thanks again. You've been great and I'm glad you gave this extra info whereby you state the 3 other things I would need to do. In other words--way too much trouble at this point. I think I'll consider the plugin instead.

more options

Sorry for the confusion by mentioning the userContent.css file.

The userContent.css and the userChrome.css are two different files and both have their own purpose. You need the userChrome.css file for any changes to the Firefox user interface like in this case.

The userContent.css file can be used to modify the appearance of web pages like hiding content or making changes to text and background colors for better reading and isn't needed for your issue.

Note that the name of the chrome folder needs to be lowercase.

more options

Bookmark Favicon Changer is being updated again. Version 2.12 works with Firefox 27 for both folders & bookmarks. See the link below.

https://sites.google.com/site/sonthakit/bookmarkfaviconchanger