Wednesday, July 15, 2009

Adding Favicon to Blogger Template

Favicon or Shortcut Icon is a small picture which appears in web-browser address field, tab and bookmark of the corresponding web site. Blogger has a default icon assigned, but it seems pretty nice to add an original favicon to your blog: it would give a distinctive, easier to remember view to the bookmark and to the web page itself. Adding a favicon is not difficult at all, but the solutions I found on the Web were not quite correct, at least they did not work for my Blogger and web-site.

Considering that a desired image have already been prepared the following issues should be resolved:
  1. A proper internet storage for ico file should be found. While some web browsers are flexible to work with different picture standards (jpeg, png, gif) as a favicon the main limitation comes from IE which can work with ICO images only. On the other hand not many sites including Blogger itself accept ICO files for uploading. I chose 1 Pixel Host - so far it seems working fine. Convert your image into ICO format of 16x16 or/and 32x32 pixels and upload to the host. Have to say: while favicon file probably should stay with the *.ico extension unchanged, it may have any name, not only "favicon.ico". 1 Pixel Host replaces the original file name with a random mess. For instance, mine got the name "yjtxmkry15su2xsg8em.ico", so copy Direct Link carefully.

  2. Reference to the ico file should be added to the blog template. There are direct instructions from Mictosoft how to do it in "How to Add a Shortcut Icon to a Web Page" , but it does not work by some reason neither for my Blogger nor for my home page at ISP (Internet Service Provider). Somehow the problem was resolved by changing position of the "Shortcut Icon" line. Microsoft suggests it like this:

    <head>
    <link rel="SHORTCUT ICON"
    href="http://www.mydomain.com/myicon.ico">
    <title>My Title</title>
    </head>
    To make it work I had to put the "Shortcut Icon" line below the "title" line:

    <head>
    <title>My Title</title>
    <link rel="SHORTCUT ICON"
    href="http://www.mydomain.com/myicon.ico">
    </head>
    Replace the "href" value with the Direct Link to your ICO file, add the line to your Blogger template, save - and that's it. From now the favicon should appear at every page of your blog.
Adding a favicon to a web-page is similar besides that you don't need to find external file storage - upload the picture to the web-site hosting directory and put a proper direct link to it in the web-pages.

If you have any questions regarding favicon you can check out source code of any website which has favicon including mine.

0 comments:

Post a Comment