Wednesday, November 10, 2010

How to add A FAV ICON to your Blog/Website?

FAV ICON are the lil icon you see next to Address Bar. It gives your website/Blog an Identity. A pictorial reprentation for your space.

Simple ... just a few steps .

  • Create a picture/symbol that will potray your blog using your photo software. I have used GIMP software to create my Picture SK representing Sandhya's Kitchen of size 100px * 100 px.
  • Use the following online converter software to scale it down to 16*16 px .This is the desired size we require to upload for a fav icon.
    http://www.coolutils.com/online/image-converter/ 
  • Using the same software convert the 16 * 16 px jpeg pic into an .Ico pic.
  • Most external picture hosts do not allow us to upload icon files.. Pic Panda (http://www.picpanda.com/) just makes our work easy.. and uploads icon files too.
    Once uploaded , collect the link

    For eg : http://www.picpanda.com/images/4h96yxrufbwuw5hfsp.ico


  • Use them in
    <lin href='Fav Icon URL'rel='shortcut icon'/>

    Eg: <link href='http://www.picpanda.com/images/4h96yxrufbwuw5hfsp.ico' rel='shortcut icon'/>
  • Backup your HTML codes before venturing out to experiment. Locate the </head> tag in your Edit HTML code. Place this code above the </head> tag and remember to save the file.
  • Enzoy your Newly created Fav ICON ..  Easy to locate in BookMarks

8 comments:

  1. Wow this is such a useful post....and nice motive to start a seperate space for helping bloggers ...Cool Idea Sandhya!

    ReplyDelete
  2. Thanks sharmilee.. Having a bit of IT working and with passion for IT ,I have been working on editing my blogs with templates and other lil things .. Just thought of posting my learnings together...

    ReplyDelete
  3. Very useful....I was actually looking for something like this...Thanks Sandhya....I am going to try this.....

    ReplyDelete
  4. I tried this...but the logo is not showing in IE or safari....I can see the logo in Firefox...
    I read somewhere that it will take few days for others browsers to show the logo....
    Thanks a lot for posting this....:)

    ReplyDelete
  5. Wow.. Foodie Ann..
    Ur Fav icon is cool ..and is showing up too in IE and mozilla..
    Just a piece of info...
    Mozilla is a lighter browser and loads things faster than IE or Safari...
    Glad it worked out :)

    ReplyDelete
  6. This should be helpful for beginers (with blogs)

    ReplyDelete
  7. thanks for sharing a valuable information for us , heartly thanks for u sandhya

    ReplyDelete
  8. i followed ur steps upto pic panda & got it
    then you haave said
    Use them in


    I thought i would use this url in favicon in layout
    but there is option for to choose only images
    i selected the image but it tells it is 2 large
    where should i place this url from pic panda

    ReplyDelete