Google-chrome – How to add a favicon to a bookmarklet in Google Chrome


I'm on OS X and I want my bookmarklets to have favicons. I already found two articles but they didn't help much: It's a great article but as I understand it this doesn't seem to work for Chrome 🙁
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.

Best Answer

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/;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.