Favicon is a small icon (image) displayed at the beginning of the address bar of the browser. It is also called Favourite Icon, Pageicon and urlicon. See the image below :
The main advantage of creating and using favicon is ,it makes it easy to find your blog or site when someone favourited or bookmarked your site/blog among several other sites. It's easy to add a favicon into self-hosted blogs, but it's not so in case of free hosts like Blogspot blogs. Adding a favicon to your Blogspot blog requires a workaround. Here is the step-by-step procedure for that :
Step 1 - Create Your Favicon
The first step of adding the favicon is creating your own unique favicon file. The favicon is a very small icon file with ‘.ico’ extension. Most of the people use 16x16 pixel, 32x32 pixel with ".ico" format. But, other than that you can also use gif, png (image formats) as well.
Now let's create your own "image" first, it can be in any format, but I prefer jpeg, gif or png. If you have Photoshop, or any other programs like that, open it and create a 16x16 image and save it as png or gif format. As for me, I use GIMP (free software).
See the sample image of my favicon below (jpg):
Now your icon is ready, we need to convert it to .ico format. Use these online services to create your favicon: http://www.html-kit.com/favicon/
Upload your image file (in JPG, PNG, or GIF) and click on "Generate FavIcon.ico" button. The next thing, you'll see the preview of your icon. Download the Favicon package if you're already satisfied with it or else Customize it once again.
Unzip the file, and your icon is now ready.
Step 2 - Host Your Icon
Once you have your favicon ready, upload it to a web location, from where it can be accessed by Blogger. Remember, icon file is a small image file with ‘.ico’ extension. Since Googlepages is not available, what I did was create a free account with Photobucket, and upload the file there. See the image below.
Copy the Direct Link to your icon as shown above.
Step 3 - Add Script
Now, go to your blogger Dashboard -> Layout -> Edit HTML. and search for <head> or </head> code.
add the below code between <head> or </head> code
<link href='Your Icon URL' rel='shortcut icon'
type='image/vnd.microsoft.icon'/>
and replace the 'Your Icon URL' with the url of your icon file.(like http://i429.photobucket.com/albums/.............../animated_favicon1.gif).
Once you have this script ready, save the template and check the website, your favicon should be loading fine.
P.s : How To Add Favicon On Wordpress Blog (self hosted blog)
Subscribe to:
Posts (Atom)
