Friday, October 30, 2009

How to add Favicon to Blogger blog

Favicon stands for “favourite icon”, (also known as a bookmark icon, shortcut icon or website icon). It is a 16 X 16 pixels icon which appears next to a website’s URL in the address bar, it also appears next to the page’s title in a tabbed document interface and in bookmarks. Adding a favicon to your own blog is a good way to distinguish your blog from millions of other blogs.

How to add favicon to blog
There are many free online tools which can help you generate a favicon. As for me, i use http://www.html-kit.com/favicon/ for my favicons. When you upload your favicon image to HTML kit’s they will automatically give you two 16 X 16 favicons to download, one is still image and the other one is animated version. You also can create your own image for your favicon from any image manipulation softwares like Gimp or Photoshop, just by selecting the dimension to be 16 X 16. I know there are still many sites that many people recommend to generate a favicon, but i dont have time yet to explore them.

To add favicon to your Blogger:
  • You can upload your favicon image to an external web host, such as Photobucket or your Google Picasa album. Login to your Picasa photo album and Click upload button to upload your image. Once your image is sent, copy the URL by clicking “Link to this photo” on the right side of the screen. To copy your image URL, you also can do it by right-click on the image and select “Copy Image Location”.
  • Login to your Blogger, from the dasboard click Layout and then Edit Html.
  • Perform your back-up.
  • Find the following code:

    </head>
  • Just above the code (or in between <head> and </head> tags), add the following HTML code:

    <link rel="shortcut icon" href="Your-Favicon-Image-URL" >

    or

    <link href='Your-Favicon-Image-Url' rel='shortcut icon' type='image/vnd.microsoft.icon'/>

    Replace the red text above with your favicon image URL. Once you're done, the code should finally appear like this (i take mine for an example):

    <link href='http://lh6.ggpht.com/_9Jx2mcxSPVU/Su-zgL4iP0I/AAAAAAAAA9s/6X9yHgwaUGk/animated_favicon1.gif' rel='shortcut icon' type='image/vnd.microsoft.icon'/>
    </head>
  • Save your template and test.
If the favicon still doesn’t appear, clear your browser’s cache file and restart the browser. After that renavigate to your blog.

No comments:

Post a Comment