This website uses cookies. By clicking Accept, you consent to the use of cookies. Click Here to learn more about how we use cookies.
Accept
Reject
Support
Support
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Show  only  | Search instead for 
Did you mean: 

Be able to change custom icons for bookmarks

Eera
New member
‎05-08-2022 05:14 AM
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.

See more ideas labeled with:
Comment
27 Comments
cybericius
New member
‎01-08-2024 12:22 PM
‎01-08-2024 12:22 PM

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
‎02-07-2024 07:13 AM
‎02-07-2024 07:13 AM

@ 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
‎03-26-2024 06:54 AM
‎03-26-2024 06:54 AM

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
‎05-23-2024 10:30 PM
‎05-23-2024 10:30 PM

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
‎06-14-2024 02:26 AM
‎06-14-2024 02:26 AM

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
‎06-14-2024 07:11 AM
‎06-14-2024 07:11 AM

@jason49mac

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

Agentvirtuel
Collaborator
‎06-14-2024 10:11 AM
‎06-14-2024 10:11 AM

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
‎06-16-2024 08:16 AM
‎06-16-2024 08:16 AM

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
‎06-16-2024 05:22 PM
‎06-16-2024 05:22 PM

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

spacename
New member
‎09-10-2024 02:44 PM
‎09-10-2024 02:44 PM

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

AxelVernaut
New member
‎10-29-2024 10:44 AM
‎10-29-2024 10:44 AM

Customize Bookmarks and Favorite Icon Folder

Would be useful, to organize, to have different icon in favorites folder. Like: 1 for movie, social, health, communications, or custom. Can be defaults icons to choose but also a custom. Thank you for your attention.

Best wishes,

Axel Vernaut

Jon
Community Manager
Community Manager
‎10-29-2024 11:14 AM
‎10-29-2024 11:14 AM

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

Copyright © 2024 Khoros, LLC