Saturday, May 30, 2009

How to add Favicon to blogger(blogspot) blog

A question I got this week from a friend of mine in a forum was regarding the changes on my blog. I have been tinkering with it for quite awhile and wanted to clean it up alot. There are those who think that by removing all of my traffic links I had like msn links and google links I was going to lose traffic. That is true to a point but after having the site online for over two years it is time to make some drastic changes. To be honest I got tired of how dirty it was looking so I made some major changes. My personal opinion on this one. I don't suggest to anyone to remove any back link options you have but in my case I have built up quite a large fan base so I am okay with it, plus I am also testing a lot of traffic techniques and in all seriousness I figured I would see what I can do with very little help. I will be getting some expert assistance later on this week, right now I have no time to do it.

Okay anyway, on to the topic at hand.

How to add a favicon. If you don't know what a favicon is it is the little icon you see displayed at the beginning of the url in the address bar.

You should create one because it gives your site a specific brand instead of the orange B you usually see. Lot's of bloggers use this technique as it looks more professional.

Here we go.

Step 1




I recommend you use 16*16 pixel favicon with ".ico" format.

You create it in photoshop or paint, a program like that.

Once you create your image save it as 16*16 and save it in .png format as shown below.



If you don't have photoshop or a similar program go to google and type in free online 16*16 icon generator. You simply upload a picture and it get's converted. Easy peasy.

Next go to google site creator and upload your icon file by clicking on the upload link and browse the file and note down the url of the file by clicking on the file.





Log into your blogger account go to your Dashboard>layout>Edit Html.

Before you go any further please make sure you have a back up just in case ;)





Find the code that says:

data:blog.pagetitle

Simply type CTRL + F to find it quicker

Add above it put this figure < then type this "(without quotes)link href='icon file url ' rel='shortcut icon' type='image/vnd.microsoft.icon'/>

Directly above it and change the 'icon file url' with your created url from google site creator.

Click save.

Voila.

That simple.

Thanks to kranthi for the help