Search This Blog

13.7.12

0 HOW TO ADD FAVICON TO BLOGGER BLOGS.

A blog/site with a favicon is considered more professional than a site which has not,as it gives your website its own uniqueness.

This feature has been long known with Wordpress blogs,but in this tutorial,I will be guiding you on ́how to add a favicon on your blogger blog`.

Before I proceed,I will like to explain what a favicon is,for the benefit of newbie bloggers who might have not come across this tutorial before.

What is a favicon?

Favicon was extracted from the word “favorite-icon”. It's that tiny image you see behind every website-title on your browser. For a better understanding,look at the top left-hand side of your browser→behind this blog's title,you will notice a small image(),right? That's what is called a favicon.

By default,all blogger blogs display blogspot's icon which we are about to change.

Can't see an image?

If you can't see any image,then it can only mean two things »
  1. Your browser's image is turned-off → Switch it on[Not all browsers].
  2. Your browser does not support favicon.
NOTE:-Not all browsers supports favicon e.g Internet Explorer 6.So,for the benefit of this tutorial,you should try using a higher version of Internet Explorer or some other browsers.

HOW TO ADD A FAVICON.

Below,I will be giving you the steps to take in order to add a favicon to your blog.

STEP 1→

  1. Visit http://tools.dynamicdrive.com/favicon(preferably in a new tab).
  2. Click on the image-browse box to generate a favicon from any image in your computer.
  3. Next,upload your image and click on “create icon”
  4. You will see a download button,click on it to download the generated image icon to your pc.

What to do with the generated icon?

Upload your generated icon to an image hosting site to get the url. I know many people find it very hard to get a .ico image hosting site,but after so many trials,I finally got one. So,to host your “ico” image file,GO HERE.

STEP 2→

Once you finish uploading your icon,copy the generated link and save it somewhere & follow the steps below.
  1. Login to Blogger» Go to Design/Layout » Edit HTML.
  2. Check the box next to Expand Widget Template.
  3. Search for <b:skin><![CDATA[/* in the <head> section of your template by pressing CTRL+F.
  4. Just before the code above,you'll see a similar code to the one below,so just replace it with the code snippets below→
  5. <link href='http://hostsite.faviconname.ico' rel='shortcut icon'/> <link href='http://hostsite.faviconname.ico' rel='icon'/>

    So,like I mentioned above,replace the red text with your generated icon url.
  6. Finally,SAVE your template & you are done.
NOTE↓ Your uploaded icon will take some time before it starts to display in your blog.In some cases it might use days,so be patient.!!!
«PREVIOUS NEXT» ¤HOME¤

Be the first to reply!

Leave your comments behind!!

If you experienced any difficulty understanding this post,do tell us. But,please do not spam.
Your suggestions are also very valuable to us. Thanks...
The Author.

Leave your comments.

If you need reply to your comments,please do not comment as `Anonymous`
Found a Dead or Unresponsive link?, Kindly inform us using the Comment Box.

 
[GET THIS]