How To Create And Install FaviCon For Your Sites & Blogger Blogs

FaviCons are the small images which you see inside the browser's location bar and bookmark menu when your sites is opened up. Its a good way to brand your sites and increase its prominence in the visitor's bookmarked menu.

So for installing and showing it for your site you need to create the favicon first. There are many sites in the Internet where you can create your custom favicon, a good one is favicon.cc . But if you want to create a favicon from an image of your choice then you can create it using a tool provide by Dynamic Drive Website. The tool Supports numerous file formats like gif, jpg, png, and bmp.

How to Install favicon for Your sites and Blogger Blogs

After you've created a neat favicon, it's time to add it to your site. To do so, follow the below simple procedure:

For Blogger Blog

Step 1: Upload the generated file ("favicon.ico") to your Blog. You can use the technique to host the images in blogger posted by me earlier or you can host ur image in free hosting websites like picassa, flickr etc. Now, note down the URL

and make it short using any url shortner like goo.gl.

Step 2: Navigate to Dashboard > Design > Edit html and search for the below code in your blog

                             <title><data:blog.pagetitle/></title>

Now paste the below code above this line.

                             <link href='ICON FILE URL' rel='shortcut icon'/>

Note:Replace 'ICON FILE URL' with the URL of the uploaded image.

                          

So the final code will look somewhat like this:

                           <link href='ICON FILE URL' rel='shortcut icon'/>

                           <title><data:blog.pagetitle/></title>

That's it! Save the template and you are done.

For Self Hosted Blogs/Sites/Pages

Step 1: Upload the generated file ("favicon.ico") to your site. Verify it's existence by typing http://mysite.com/favicon.ico in the browser's location, where "mysite.com" is your site's/blog's address.

Step 2: Next, insert the below code in the HEAD section of your pages, at the very least, your site's main index page:

<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">

That's it! Note that your favicon may not appear immediately after you've completed the above steps. In fact, it might take a few days, and in IE, sometimes the favicon will disappear from time to time due to a browser bug.