Create and add Custom Favicon for Blogger blog

If your blog is powered by blogger then the default favicon should be a orange-white logo.A favicon basically an icon associated with a particular website, and typically displayed in the address bar of a browser viewing the site.

you can see blogger default favicon in your address bar or in your bookmark toolbar.

Like this

Now you can see my own custom favicon

Now I will explain how to add this custom favicon to your blog.It is very easy , just follow the steps given below.

Step 1:Create your Favicon

First of all you need to create your own favicon.

For animated fevicon just like me goto one of this sites.

Animated Favicon

Favicongenerator

If you dont want that scrolling text then dont enter any word in that area and your fevicon will be a static pic.

For ready made fevicon you should go to one of this sites

Iconbarn

clickfire

you just need to remember that a size of a favicon should be 16 X 16 pixel.

Step 2: Upload your Favicon

So your own favicon is generated.Now you need to upload your favicon to a image hosting site.

So i recommend you to upload your image one of this sites

Imageshack

Imageboo

Step 3: Add your favicon to your blog template


Go to Layout and then goto Edit HTML and download your current template.


after that press ctrl+F and find

</head>

Immediately before this line,add one of this code depending on your Image type [.gif,.png,.ico] and replace FAVICON-URL with the URL where your favicon is hosted:

For gif image [.gif]

<link href='FAVICON-URL' rel='shortcut icon' type='image/gif'/>

For Icon [.ico]

<link href='FAVICON-URL'  rel='shortcut icon' type='image/ico'/>

For png [.png]

 <link href='FAVICON-URL'  rel='shortcut icon' type='image/png'/> 

Step 4:Save your template and refresh to see your new favicon

Posted in: BlogTips