Tips And Tricks: Favicon for your Blogger blog

Tuesday, June 20, 2006

Favicon for your Blogger blog

UPDATE 22 July 2008: The website on which this post is based is no longer active. Please refer to favicon generator and host for an updated post.

A "favorite icon" or favicon (pronounced fav-eye-con) is a 16x16 pixels icon that appears next to a website's URL in the address bar of a web browser. If you are using a browser that supports tabbed browsing, the favicon will also appear next to the page's title in a tabbed document interface. If you look at the top of this page, at the left hand corner of the address bar, you will see a small graphic of a portion of a fake red-yellow-black "for Dummies" book cover (This has changed to a rare photo of myself laughing). That is the favicon for this blog. If you are using FireFox or Opera, you will also see that icon in the tab. If yours is a personal blog, a good icon will be your personal photo.

Adding a favicon to your blog is a good way to distinguish your blog from the millions of other blogs. To add a favicon, you need to generate a .ico format file, a place to host the file and add 2 link elements in the <head> section of your template. To generate the .ico file and to host it, you can go to MyFavatar. You need to have ready a roughly square graphic saved to your hard disk.

This was how I added the favicon to this blog. I had a fake "Blogger for Dummies" book cover generated by Dummies Book Cover Maker 2006. You can see the graphic here. signgenerator.org can generate other types of sign for you. (If yours is a personal blog, a good graphic to use will be your personal photo). I then use the free Irfanview to crop the bottom-right of the graphic and saved it to the hard disk. I then uploaded it at MyFavatar which also generated the codes for me to paste into the <head> section of my template.

(for instruction on how to get the script to paste into your blog's template, refer to update below)

Update: I have since changed the favicon to a photo of myself laughing. It was also cropped from a larger photo using Irfanview photoeditor (click "BACK" button to get back to this page).

Update: I have discovered that the favicon doesn't appear in Internet Explorer 6. It works for FireFox and Opera.

Further update: It does work with IE7. See the comments.

Update 15 February 2007: A reader complained of difficulties of making this work in New Blogger. I did exactly the same thing as what was described in this post for the New Blogger blog Testing Blogger Beta (now New Blogger). For the convenience of everyone, I paste below the relevant part of the template from that blog in the scrollbox below:

UPDATE: Received a request for help to get the script for the favicon. So what I did was to go through the steps to add a favicon (my mugshot) to Blogger for Dummies. I list down the steps that I recorded as I generate the script below, with some screenshots to make things clearer:

register
verify email address
sign in
click FAVATAR
click CHOOSE

browse to the image saved in your computer
click SUBMIT
message will say Favatar changed.
Click CODES at the top of the page
under FAVATAR CODE, click EDIT
enter URL
enter Title
choose Category
write Description
click SUBMIT
Message: Blog info successfully updated
click CODES at the top of the page
copy script from Favicon Code