Showing results for 
Show  only  | Search instead for 
Did you mean: 
New member
Status: New idea


Many of us using bunch of folders in bookmarks toolbar, why cant we just change the icon of the folder, when we click the "Edit folder" button instead of just name..

This feature could be really nice and useful also can be efficient because it's easier to find folders by just looking their icon over reading names.

Thank you for reading and support.

New member

BTW, my use case is that I remove the title of the website from the bookmark and when I put it on the bookmark toolbar, then it looks simple and neat. It would be nice to have different icons for e.g. outlook emails and calendars. The other issue is that even if you delete a bookmark, the sqlite3 database remembers the icon, so when you add the URL again to the bookmarks, it takes it from the cached database. Bummer.

New member

@ KlaasV

Thank you for your solution!

However, I'm not a programmer so I have no idea how to implement your elegant solution 😥

Can you provide step-by-step instructions for us tech-not-savvy's?

Thanks! 😁

New member

Thanks a lot to @KlaasV for the "own small html" idea. If I followed right, you have to then click again on the website name, which is inconvenient. I prefer to use a redirection to avoid this:

<!DOCTYPE html>
<title>My Redirection</title>
<link rel="shortcut icon" href="my-favicon.ico"/>
<meta charset="UTF-8" />
<meta http-equiv="refresh" content="0; URL=https://..." />
<p>Wait for it :)</p>

And to answer the "non-techs" 😉, all you have to do is to save a text file with this code in it (adapt with the website you want, of course), give it a name ending with .html and put my-favicon.ico in the same folder (type "png to ico" in your search engine to find a converter of your image). Then you can create a bookmark with the URL "file:///PATH/TO/MY/FILE.html". You can repeat this procedure for other websites. Note that content="0 means that there is no waiting time. You still see very shortly the page, but if you want to have time to try (for copying the path) or if the favicon doesn't have time to be "registered", you can put 10 instead of 0 the first time.

If you want to have it work in many devices, put it in a synced folder (I use Syncthing, but Nextcloud or others would work too).

By the way, I noticed that when a URL doesn't have a favicon (the bookmark have the "blank" favicon), it's the previous one which stay when you edit the bookmark. So if this is your use case (also for bookmarklets for instance), you can just bookmark the site you want the favicon from and then edit the bookmark with the URL you want. Of course, if the idea is to override the favicon of a website, then you need this solution, because the favicon is updated when you click on the bookmark.

Greetings to all and thanks again for the inspiration 🤗

New member

Hi all,

after much search I found a solution:

- create and/or edit

- copy the whole text below into it
- follow instructions in comment of below text
- place folder Foldername-favicon.png into same folder as userStyle.css
- restart FF (FF profile enough)

have fun!

********************* text start ***********************************
/* create the file "userChrome.css" in subfolder "chome" of profile folder */
/* e.g. in %APPDATA\Mozilla\Firefox\Profiles\ske40259.default\chrome */
/* open a new tab in FF, open enter "about:config" in address bar */
/* set toolkit.legacyUserProfileCustomizations.stylesheets to TRUE */

@namespace url(""); /* set default namespace to XUL */

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

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

********************* text end ***********************************