How to Create your own Favicon

Wednesday, May 05, 2010

A favicon is that little image that you see beside the webpage address on your address bar, beside the website title in your browser tab, and beside the website title in your favourites.

Blogger has a default "B" icon that loads in any blogger page.

I recently switched to my own domain ( - yay!) and I wanted to personalize my page by getting rid of the orange B and replacing it with a little icon of my own.

I Googled a whole bunch of websites, but after trying out code after code and suggestion after suggestion, nothing would work.

I found out that the name favicon.ico doesn't work with Blogger - I can't get into the technicalities because, well, I don't know how it works!

But I do know how to get the favicon working on the Blogger blog.

Step 1:

Create your own image. It should ideally be 50x50 pixels small and in .gif or .png format.

Step 2:

Upload the image to favicon generator. This is the website I use, and I highly recommend it. You'll see why later.

Step 3:

Host your favicon. The website above both generates and hosts favicon files, and if you don't want to create a favicon of your own, they also have a variety of cute favicons to choose from.

Step 4:

Paste the code generated by the favicon host right before the

< / head >
tag in your blogger template. Pick the code that says 'Direct Link'. This is because if you download your own favicon file to host elsewhere, it will be saved as favicon.ico - which Blogger does not recognize.

For those of you unfamiliar with editing blog templates, just click on 'Layout' in your Blogger dashboard, and then click 'Edit HTML'.

Step 5:

Save your template and view your blog. Your favicon should appear on the address bar and your browser tab.

I'm so happy with mine!

You Might Also Like


Flickr Images