My Google App Site

This is my place for putting various programming examples and experiments.

Favicon Image File

A favicon is that small icon that appears next to the URL of a page, in the tab UI or as part of the bookmark for a page, depending on what browser you use. A favicon is a graphic that should be 16×16 or 32x32 pixels in size, and either 8-bit or 24-bit in color depth - in the ICO image file format.

Get/Make a Favicon

It is fun to make your own favicon, either on the web with the very nice Favicon.cc or even with Paint (save as a GIF then save to ICO format with Irfanview). I warn you this will be time sink: it is quite hard to make something that small look good!

For my Google App Engine site, I instead opted to use an icon from the IconBarn Creative Commons collection of favicons. Unfortunately, the icon had an opaque white background, which looks quite ugly. Thanks to a tip from Joe's Blog, I found you can use Irfanview (freeware) to make a transparant ICO background.

1. Open the image (GIF, ICO, whatever) in Irfanview.
2. Select File > Save As > ICO - Windows Icon. Note that a dialog pops up when you do this: "PNG/PNM/ICO save options".
3. Tick Save Transparent Color on the "PNG/PNM/ICO save options" dialog.
4. On the next screen, click on a part of the image that is the color you wish to make transparent.

Link Favicon to your Site

Finally, I link the favicon to my page using three separate link tags to enusre maximum browser compatibility. Gotta love standards!

<link href='/content/global/images/favicon.ico' rel='icon' type='image/vnd.microsoft.icon'>
<link rel="shortcut icon" href="/content/global/images/favicon.ico" type="image/x-icon">
<link rel="icon" href="/content/global/images/favicon.ico" type="image/x-icon">

Favicon in Blogger

You can have a custom favicon in your Blogger. It involves the same steps as above, but two things are tricky: where to put the HTML links and where to put (host) the favicon image file.

Host Favicon for Blogger

Options that don't work.

• Blogger (and Picasa - default storage for Blogger images) won't let me upload ICO files.
• Neither do Flickr, Photoshop Express, PhotoBucket, or Facebook.
• Sour Image seem to freely host any image files - without a login even - but didn't accept my ICO file.
• Box.net (a favourite file storage service of mine for ages) is free, but although I can share my favicon file though Box.net, I can't "direct link" to it with a free account i.e. the URL is to a download page, not to the image itself: a Pro account will allow direct linking.
• I saw www.myfavatar.com mentioned in a few places as a site meant just for this purpose. Alas, the site is dead.

Options that do work.

• If you run your own website, host it from there. For example, I have my favicon hosted on my Google App Engine site.
• I have a Google Sites account that I play around with occasionally that allows me to upload my Favicon and display it on my Google Site, but not use it on another site i.e. that URL works in IMG tag only on the Google Site. Get your Googe Site account at http://sites.google.com/.
• There are other free file hosts you can use. Fileden will let you host files; I put my favicon there too. I found Fileden's sign up process to be extremely annoying - so many ads.

Options that may work (free image hosts).

• A commenter on the Why Oh Why blog entry How To Add A Favicon To Your Blogger Blog mentioned IconJ but as of 7 Jun 2009, they were hacked and the entire site was blown away. I really like that name. I think J is my favourite letter. :)

Link to Favicon

To add the LINK elements you need to edit your Blogger's template.

1. Log in to your Blogger page and click the Customize link.
2. Select Layout > Edit HTML.
3. Back your template first! Click Download Full Template and save it somewhere safe.

Pages that helped me with this article.

• Wikipedia favicon page that lists the three link tags to use.
• Tool to draw your own favicon.
• How to make your background favicon transparent with Irfanview.
• IconBarn: a very nice collection of Creative Commons favicons you can use.
• Bluejar.com on How to Create Your Own Favicon and how to add a favicon to your blogger. Warning: www.myfavatar.com / www.myfavatars.com is dead.
• Why Oh Why blog entry How To Add A Favicon To Your Blogger Blog - btw, this is possibly the most elegant Blogger page I have seen!