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

Hello,

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.

25 Comments
cybericius
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.

JDD
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! 😁

nv2p
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>
<html>
<head>
<title>My Redirection</title>
<link rel="shortcut icon" href="my-favicon.ico"/>
<meta charset="UTF-8" />
<meta http-equiv="refresh" content="0; URL=https://..." />
</head>
<body>
<p>Wait for it :)</p>
</body>
</html>

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 🤗

JoeAverage
New member

Hi all,

after much search I found a solution:

- create and/or edit
[path]\Mozilla\Firefox\Profiles\[Profilefolder]\chrome\userStyle.css

- 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("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* 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 ***********************************

jason49mac
New member

Being a non techie, I wanted a way to change the Bookmark Icon for items such as Banking, taxes, Insurance, Credit cards, to not show the real company icon.

For example:

I use Nationwide Bank but call the bookmark "Windsor" [the branch name], but it still has the banks logo as the icon.

I know I can change the icon if I use a desktop shortcut but don't want 20-39 splattered across desktop screen [Windows 10]

I will try and use the solution(s) provided above meantime.

JoeAverage
New member

@jason49mac

Sorry, it's userChrome.css, not userStyle.css.

Agentvirtuel
Collaborator

Hello

In addition and by way of illustration

#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;
}

.bookmark-item[image^="page-icon:https://connect.mozilla.org"] image {
    object-position: 16px 0px !important;
    list-style-image: none !important;
    background-image: url("Tipos_de_verde.png")!important;
}

.bookmark-item[image^="page-icon:https://www.mozilla.org"] image {
    object-position: 16px 0px !important;
    list-style-image: none !important;
    background-image: url("Rojos.png")!important;
}

https://www.youtube.com/embed/EEDuf3lnpJs

Ana_04
New member

Folder customization (elaboration)

I know other people have suggested this idea already but I decided to show how it could possibly look like.

Add the ability to change the icon for bookmark folders

View attached file: example.png

Jon
Community Manager
Community Manager

(Note: similar ideas have been merged into this thread)

spacename
New member

+1 for the idea.  I'm surprised this wasn't a basic day 1 feature.