Finally, A Favicon For This Blog!

Hi! I almost thought I won't be blogging today :) But then I finally got this favicon thing to work on this blog so I thought why not make a guide so others can do the same.

Of course, there are a lot of guides out there on how to change the favicon on Blogger and yet it still takes 2 days for me to get it right even though I follow the instruction step by step! I have to tweak a little bit here and there to make it works.


For those who don't know what favicon is:
A favicon (short for favorites icon), also known as a shortcut icon, website icon,URL icon, or bookmark icon is a 16×16 or 32×32 pixel square icon associated with a particular website or webpage.

Source: http://en.wikipedia.org/wiki/Favicon


So this is the original instruction I got from various websites and blogs on how to put favicon on Blogger. They are basically the same in most places.

1. Create a .ico file. (I went to http://www.favicon.cc/ to create mine)
2. Upload the file somewhere (At first I uploaded mine on Google Site)
3. Login your Blogger account.
4. Go to Design tab.
5. Click on Edit HTML.
6. Click Ctrl + F to open browser search function
7. Insert </head> as the search phrase and click Enter.
8. Put these codes,
   <link href='url to your favicon' rel='shortcut icon'>
   <link href='url to your favicon' rel='icon'>
   before the </head> section.
9. Click Save Template.
   

But, this is how I get mine to work:

1. Create a favicon, the file format doesn't matter as long the size is right, it's okay.
2. Upload the file somewhere (I uploaded mine on Webs.com)
3. Login your Blogger account.
4. Go to Design tab.
5. Click on Edit HTML.
6. Click Ctrl + F to open browser search function
7. Insert </head> as the search phrase and click Enter.
8. If you use .ico file, use this code:
   <link href='url to your .ico file' rel='shortcut icon' type='image/x-icon' />
   Example, <link href='http://elinaw.webs.com/favicon.ico' rel='icon' type='image/x-icon' />
9. If you use other file type such as .png, .png and .gif, use this code:
   <link href='url to your .png, .jpg, .gif, .bmp or other file type' rel='icon' type='image/file_type' />
   Example, <link href='http://elinaw.webs.com/favicon.png' rel='icon' type='image/png' />
10. Or if you want to play safe, use both codes in step 8 and 9.
11. When you're done, click Save Template.
    

Thank you to http://www.iconj.com/ for the correct codes.

By the way, not all file format can be used for favicon so pick one of the popular file types like .png, .jpg, .bmp and .gif to avoid any nasty surprise.

So that's all for now. I hope I didn't make you more confused :D If I do, please tell me so I can fix it.

Good night!

PS: For more detailed info and instruction, look at Favicon Walkthrough on my other blog called Free To Use. It covers every step with a lot of explanation but easy enough to follow and it's not limited to Blogger blog only.