Saturday, January 22, 2011

how to change favcon


How to Add Favicon into Blogger Blog?

Adding a Favicon icon to your blogspot blog will help your blog to looks more professional than other similar blogs. So, you know how to add a favicon to blogger blog? Well, in this simple guide I'll explain you how to add a small favicon icon to your blogger blog easily within few steps. If you're using a blog platform other than blogspot such as wordpress or live journal, you can learn it in adding favicon to wordpress article. So, let's begin.

First you need to create a small image to use as your favicon logo on your blog (Probably favicon is an icon .ico file with 16x16 pixels in size). There are many ways to do this easily. You can use any photo editing software like Adobe Photoshop, Open Office GIMP or any other tool you prefer. If you're using Photoshop there is a single free plug-in to download to simplify this task. If you feel it hard to manually do this, there are various free online favicon code generators that automatically convert your logo image into a both favicon and blogger supported icon file. All you need to do is simply upload your newly designed image into one of these websites, configure some of its settings such as color, brightness, blogger platform and crop settings and finally download it as a favicon icon image. Isn't it easy? But I suggest you to manually design your favicon to your blog with your photo editing software since you can tweak it well.

Now it's time to use our new favicon in our blogger blog. But you can't upload icon files into blogger directly to use as our favicon logo. So, you need to find a place to host your favicon image other than blogspot. I personally use Google Pages which is available for free to host my favicon icons. Now it's time to tell the most important part. Finally we need to tell the blogger to use our logo in our blog.

To do this…

  • Login to your Blogger Dashboard
  • Click on the "Design" tab and choose "Edit HTML"
  • Now look for the following piece of code between <head> and <body> tags.
        <title><data:blog.page.Title/></title>
  • Now simply add following HTML favicon code in the next line.
        <link href='YOURFAVICONURL' rel='shortcut icon' type='image/x-icon'/>
  • You can replace "YOURFAVICONURL" with your own location URL address of your previously uploaded favicon icon. It should be something like "http://domain.com/upload/imagename.ico".

0 comments:

Post a Comment