Favicons & UI aesthetics / real estate

This is a quick post to share a strategy I’ve long used to keep a lot of my favorite sites bookmarked in Firefox / Chrome while using minimal screen space.  It’s based on favicons, which are those tiny little icons to the left of the URL in your browser’s web address bar.  They’ve become pretty common these days, and typically they’re miniature versions of the logos of their respective sites–e.g., Amazon’s favicon is an a with their signature swoop; Gmail’s is an envelope.  When you bookmark a site in your web browser, it usually remembers the favicon associated with the site and attaches it along with the page title (sometimes you’ll need to reload the page from the bookmark for the favicon to show up).

42913-FaviconsThus, in my browser I have favicons for around 2 dozen sites in the bookmark toolbar, which allows me to quickly access the sites that I visit most often.  There’s even one for accessing my blog–the little hand holding a pen, just to the left of the ‘Games’ folder.

I also have bookmarklets for posting links to Facebook, Mendeley, or my Amazon universal wishlist–or even to save something as a draft to this blog, so I can use the link later on when I’m writing a post.  Unfortunately, bookmarklets often don’t load favicons themselves. Enter this addon for Firefox: Bookmark Favicon Changer. This addon lets you set your own custom favicons, or export the icons associated with existing bookmarks. That way you can export your Facebook icon and re-use it as the favicon for the ‘share to Facebook’ bookmarklet.

{Update: Recent changes to the Firefox API have broken Bookmark Favicon Changer, and I’ve yet to find a suitable replacement. The addon is still available for Chrome users: Bookmark Favicon Changer.  I’ve just installed another addon for Firefox that promises to create favicons for sites that don’t already have one; perhaps it will apply to bookmarklets as well?]

Another useful tool is the FavIcon Generator at Dynamic Drive, which lets you upload any image and convert it into a favicon for your own site, or an icon for use in Windows.  It works best with images that are already squared. Whenever I’d like to add a site to my bookmarks toolbar that doesn’t have its own favicon, I head over to this site and create one myself.  That way I can use the bookmark with the small amount of space required by a favicon (16 pixels), rather than taking up enough space for text spelling out the name of the site.

Finally, if you’re looking to add a favicon to your own website, it’s pretty easy–just create one at the site above, then upload the image to your website.  Originally, any image named favicon.ico located in the root folder would be picked up by your browser and identified as the favicon; these days, to be on the safe side it’s worth adding this tag inside the HEAD of your index page:

<link rel="shortcut icon" href="http://example.com/favicon.ico" />

For far more information about favicons–including some history and more details on proper formatting of code for maximum cross-browser support, head over to Syed Fazle Rahman’s discussion at Sitepoint– Favicon: A Changing Role


Leave a Reply