Super User is a question and answer site for computer enthusiasts and power users. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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.

share|improve this question
up vote 12 down vote accepted

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.

share|improve this answer
    
I updated the post. If you need a detailed tutorial, check out the link I added. – pattulus Sep 17 '12 at 12:30
    
Just to make you aware that link is no longer working – Skuld Aug 5 '14 at 8:32
1  
    
Fixed the link to use the cached copy suggested by @MarkusJarderot, and added clarification about the necessity to add a data: prefix. – Tom Feb 19 at 19:30
    
Also, the linked blog post says that Chrome doesn't synchronize these manually-added favicons - although I haven't tried this to see if that's still the case. – Tom Feb 19 at 19:32

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

share|improve this answer
1  
This doesn't seem to work for bookmarklets. – GollyJer Jul 27 '12 at 2:46

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.