Dazed and Confused: Faviconise your blog

Some of my friends who saw my blog asked me, " Maga, how did u get that P next to your blog title da ?? ". He was actually referring to the favicon. Lot of you would have seen that google changed their favicon and their reason for this change is given here.

Anyways, i thought i'll tell how simple it is do it and how i actually learnt to put a favicon in my blog.

A favicon is actually short for favorite icon. There are three steps to follow:

1) Create your favicon:
You can create your own favicon. Use paint or photoshop or whatever and create an image that you think suits your blog best. Try to keep it as close to a square and make its size as small as possible. Possibly around 32 x 32. And also it should be less than around 10kb - 15kb. If you have a larger image, then it might not be clearly visible or it might take longer for your page to load.

Now, initially favicons were all *.ico files but now most of the browsers like firefox, opera and others are compatible with .jpg, .png and other files also (And internet explorer is not one of them). You can also create favicons which are *.gif files. Check out the favicon on this website. This was the company where i did my training. DeciDyn.

There are different favicon generator websites also on the net. You can also get gif images generating favicon sites. Just give a search.

Now that you are done with creating your favicon. You need to have a place to keep it. Somewhere on the net.

2) Storing your photo:

There are a lot of free photo sharing websites. Picasa, Photobucket, Flickr, etc, etc.
You can upload your favicon into any of these websites so that its easy to access it. I preferred photobucket because its really easy to use compared to others.
When you upload any photo in photobucket, it gives you a list of links for that uploaded photo. Now, what you actually need is the direct link to the photo. The following image shows all possible links that you have in photobucket for every photo you upload.

If you prefer using Picasa you can get the HTML code of the photo. It would be something like this.
<a href="http://picasaweb.google.com/xxx/yyy/photo?authkey=XIjQw#521754">
<img src="http://lh5.ggpht.com/xxx/SG-zrI/AAU/VOc/s14/xyz.JPG"/>
< /a>
The link in the bold letters is the direct link for your picture. (And the above is not an actual link)

You can upload it in blogger itself. Every photo that you upload has a link which is the direct link. So, you can upload it in a post and not publish it. Whatever you do, get the direct link.

3) Change your template code.

Now that you have your direct link, go to layout --> edit HTML

and just below the <head> tag, write in the following code :

<link href='your direct link' rel='icon'/>

Here's a screenshot of the code part.(Though not clearly seen)