Faviconise your blog

Some of my friends who saw my blog asked me, ” Maga, how did u get that A 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. 

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 Flickr, you need to get the direct link to the photo you’ve uploaded.(In flickr, just right click and then click Copy Image location).

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 tag, write in the following code :
Here’s a screenshot of the code part.(Though not clearly seen)

  

And after that, voila!!!

You have your very own favicon…
It wasn’t that difficult. was it ? 

P.S.: This post was borrowed from a friend’s blog.