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 into 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 a favicon applied to.
3. Encode the 16×16px favicon you want to use as Base64 (there are a lot of free online converters out there, or see the link below for commandline instructions). Remove any linebreaks in the output; it needs to be one long line.
4. Prepend a "data" prefix to the Base64 blob that is appropriate for the type of favicon you used; e.g data:image/vnd.microsoft.icon;base64, for .ico files, and data:image/png;base64, for .png files.
5. Now add an ICON attribute to the link to hold the prefixed Base64 blob; for example: ICON="data:image/png;base64,iVBORw0K………5ErkJggg==".
6. Save the file and import it back into the bookmark manager. A folder called "Imported" will be created; however, the favicon should be applied to the original bookmarklet immediately, so you you can immediately delete the new "Imported" folder. If the icon doesn't show up immediately, try clicking on the bookmarklet.

If you need further assistance, I discovered a blog post which describes the whole process in greater detail.

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

Answer 3

I had the same problem, but at first didn't actually realize it.

Recently I deleted my favicon file in Chrome (without making a back-up) and suddenly all my bookmark toolbar links were missing their icons, since I'm using javascript:window.open to open them in a new tab.

Today I realized why I was happily having favicons on my bookmarklets for months: When I first switched from Firefox to Chrome, I imported all my bookmarks from there and later manually edited them all in Notepad with the above JavaScript.

Firefox added all the icons with their base64 code.

I can now confirm that pattulus' solution works, and in addition, if you don't want to manually convert to and add every base64 code, just export your clean, non-bookmarklet bookmarks, edit the them externally and re-import them.

That is, if it's as simple as in my case, where I edited in the same JavaScript for all bookmark links and could simply use Notepad's replace function.