Pages

How to use a Favicon in your Blog

What is a Favicon? If you are a newbie to blogging, you might be unfamiliar with the term. But you have definitely seen a favicon before. A favicon aka favourite icon is a small piece of icon used to identify your blog in the browser's tab.






Having your own unique favicon makes your blog standout and grab your visitor's attention. Without a favicon, your blog will display the blogger logo or the generic paper icon.

There is a another plus. Having a favicon will make it easier to spot your blog right away if one is having multiple tabs opened in the browser. See how the pink favicon stands out in the image below.




Favicons are usually 16x 16 pixels. It has to be in .ico file format. When creating a favicon, you have to keep it simple and recognizable. Even if you add too much letters or graphics in it, no one will be able to read it anyway.


If the favicon you chose is not square, you have to save it as a .png file first before you convert it to an .ico file, to ensure your background is transparent. Otherwise, a white square will surround your image which is not nice. See the icons in the image below.





You can create a favicon image in any image editing software. Before you use it on your blog, change the file format from a .jpg, .gif, or .png to an .ico file. The easiest way to change the file format is to upload your favicon image to a website that converts your image into an .ico file. You don't have to size the image to 16 x 16 because the websites will do the resizing for you.

Favicon.cc is the best place to upload and resize your favicon image. It also lets you design your own customized favicon file.

So lets see How to add a Favicon in your blog.

Step 1: Log on to your blogger's dashboard and then go to the layout. 


Step 2: Click on the "Edit" link on the favicon setting above the nav bar element.
Step 3: A popup window will appear where you can upload a customized favicon image. Click on the search button and browse for your favicon image on your computer. Then click on the save button. 
Step 4: Now you should see your own favicon icon instead of the blogger logo.

Refresh your blog and........ tadaaa ....... you will see your new favicon in the browser tab.