I’m a big Chrome fan, and I’m an even bigger fan of simplicity. So one thing I really like doing is making the sites I visit most often one click away in Chrome, represented entirely by their favicon.

Favicon Only For Bookmarks

Favicons are distinct enough that I don’t need the title of the page to identify the bookmark. This is quite easy to do in Chrome, but it never occurred to me to try it until someone pointed it out to me, so I’m pointing it out to you.

Just put the bookmark on your bookmark bar, then right click it, choose to edit, and remove the name. That’s it, really.

Chrome supports this out of the box, so it’s quite painless.

Add a Favicon to Bookmarklets

Adding a favicon to things without one is another story, which is the real motivator for this post. I have bookmarklets for Readability and Read it Later and I wanted them to have icons as well. This is not something Chrome supports out of the box, so there’s some work to do here.

First, find the favicon you want. Often this is as easy as adding “/favicon.png” or “/favicon.ico” to the url for the site in question. The icon should be 16×16 pixels in size, so make sure what you get is the right size.

Save that to your hard drive somewhere. Now, make sure your bookmarklet has a relatively unique name, you’ll have to find it in a big mess of stuff.

Now select right click on your Bookmark Bar and select Bookmark Manager. Then go to Organize > Export Bookmarks to HTML File....

Open the exported file in a plain text editor (don’t use Wordpad, use Notepad, gedit, TextMate, or something like that). Search for your bookmarklet by its name and when you find it, it should look like this:

<A HREF="javascript:(bunch of stuff)" ADD_DATE="1333139863">Read Now</A>

We’re going to add an ICON attribute to this HTML element. It’s going to be the content of the icon, encoded in Base64. To get that, you can use various online tools but I’m going to do it via commandline because that’s how I roll.

You’ll need the base64 tool, which you probably already have if you’re running Linux, and can easily acquire for Mac via homebrew. If you’re using Windows, hey, what are you doing reading a blog post, don’t you have people to shoot in an FPS game? No but seriously, just use the online tools, then.

The tool usually outputs linebreaks, which we don’t want, so we’ll use tr to remove them, like so:

$ base64 -e readability.ico | tr -d ‘\r\n’

Put that output in your clipboard (if there’s a % at the end, leave that out, the last character should be an =) and go back to your text file.

Add an ICON attribute with the base64 version of the image as the value. It will need a prefix indicating that it’s an icon, which will look like data:image/png;base64, – for example,

<A HREF="javascript:(bunch of stuff)" ADD_DATE="1333139863" ICON="data:image/png;base64,iVBORw0K(...)5ErkJggg==">>Read Now</A>

In this case, I didn’t use a png, but an actual .ico file, so my MIME type is image/vnd.microsoft.icon. Seriously, that’s .ico’s MIME type, it’s not image/x-icon.

Our final version looks like this:

<A HREF="javascript:(some code)" ADD_DATE="1333139863" ICON="data:image/vnd.microsoft.icon;base64,AAABAA(...)AAA==">Read Now</A>

Now save this modified file, then go back to your Chrome window and select Organize > Import Bookmarks from HTML File... and re-import it.

Don’t worry, this won’t overwrite any of your bookmarks or do anything funky. All bookmarks will go in a folder called “Imported”, separated from everything else.

What’s great is that Google Chrome actually uses the content of the URL to uniquely identify the “site”, which means that once it parses the file, it learns what the “icon” for your unique bookmarklet is, and applies it to your old icon. You can immediately delete the “Imported” folder.

One major downside of this is that Google Chrome Bookmark Sync will not sync favicons, so your other machines will have the bookmarklets, but you’ll have to go through this process on each machine if you want the bookmarklets to have a favicon.

Maybe someday Google will sync those values, along with my Search Engines data (fucking do it, Google!) with Browser sync.