How can I add a favicon to a bookmarklet in Google Chrome?

Question

I'm on OS X and I want my bookmarklets to have favicons. I already found two articles but they didn't help much:

http://www.tapper-ware.net/blog/?p=97#comment-2076 It's a great article but as I understand it this doesn't seem to work for Chrome :(

http://www.tech-recipes.com/rx/3032/google_chrome_how_to_change_icons_on_the_bookmarks_bar/ The problem with this tipp is - if I'm wrong, then please correct me - that after I cleaned the history, the cache, etc. the whole thing will be gone again.

If there is a chance to modify the bookmarklets by hosting them myself I'd instantly do it, but I found no solution so far.

Answer 1

Well, it took some time but I stumbled upon the solution:

You have to export your Bookmarks, edit the HTML file and import it again. It sounds way more complicated than it is and it's a clean solution since Chrome puts all of your re-imported bookmarks are in a separate "Imported" folder which you can delete after the changes are applied.

Step by step guide:

1. Open the Bookmark Manager and export your bookmarks
2. Open the exported html file in your favorite editor and look for the bookmarklet you want an favicon applied to.
3. Convert the 16x16 px favicon you want to use into the BASE64 format (there a lot of free online converters out there in case you have no native application).

4. Now you can add the favicon via adding the ICON=”insert-your-base64-image-code-here" attribute in the link.

   Like this:

   

5. Save the file and import it in the bookmark manager. If the favicon doesn't show up try hitting the bookmarklet. Afterwards the changes should stick and you can delete the imported bookmarks.

Answer 2

Another very simple solution is to use the "I hate your favicon" chrome extension. It allows you to input a url for a website that you want to change its favicon, and a url of an image of what you want the favicon to be. The rest is handled for you.

Link to their website here