I’m a fan of Javascript bookmarklets. I use them to quickly shorten links, post to Twitter, add webpages to my reading queue, and to help design web pages.
One thing that’s bothered me about using bookmarklets in Google Chrome is the fact that you’re not able to set a favorites icon, or “favicon.”
Standard bookmarks with favicons
Regular websites are allowed to specify images in .png or .ico format to use as a favicon, which is displayed in each tab and when bookmarking the website. Javascript bookmarklets are run by the browser each time they are called, and not served from a specific web server, which means they can’t specify their own favicons.
Bookmarklets without favicons
Firefox allows users to set their own favicons via an extension, but Chrome does not currently allow for this (but it is an open issue on the Chromium bug tracker.
While there are tricks to change Chrome’s favicons using SQLite editors, I found a simple and easy way to add pseudo-favicons to Javascript bookmarklets in Chrome, via the brainy folks at Markup.io.
Markup is a simple tool that lets you draw on and annotate web pages and easily send them to your friends. Instead of using a downloadable app or extension, Markup accomplishes this with a Javascript bookmarklet. Check out Markup’s home page. See where they say “drag to bookmarks bar?” Well, when you do so, you get a Javascript bookmarklet that reads “♒ MarkUp.” Whoa. Pretty slick use of the Unicode character for Aquarius, right?
This gave me the idea to use Unicode symbols as pseudo-favicons for my bookmarklets, to make them a little easier to recognize at a glance.
Bookmarklets with pseudo-favicons using Unicode characters
To accomplish this, all I did was edit each bookmarklet’s name by right clicking on it and pasting in a Unicode character from Twitterkeys or Wikipedia.
Pretty cool, huh? The bookmarklets still have Chrome’s “blank page” icon where a real favicon would otherwise go, but I like the additional customization I can achieve with the Unicode icons.