How To Change Blogger Favicon

Favicon stands for Favorite Icon. It is a small image displayed next to the URL in the address bar of web browser as you can see in the photo. This can also be considered as the identity of the website. This appears in Favorite Menu too when the website is bookmarked as Favorite. Hence, you may want to customize your own favicon and change it.

Favicon was first introduced with Internet Explorer 5 by Microsoft. Currently, it is supported by all major web browsers such as Internet Explorer, Firefox, Netscape, Opera and Safari.

Initially, the concept was to store a file called "favicon.ico" in the root directory and the Internet Explorer would automatically find it there. Later, more flexible solution was introduced which makes it possible to add customized favicon of our choice to blogger blog. This is achieved by adding two line of html elements between <html> and </html>. Only ICO file was allowed initially but now GIF and PNG image files are also supported provided they are 16X16 or 32X32 pixel in size.

How to create a favicon file


First of all, you need to design an image which will be used to generate the favicon. You can use PhotoShop, IrfanView or even Paint to design a simple image for the favicon. There are many online sites where you can convert your image file into favicon.

My favorite is Microsoft Paint to play with pixels and Microsoft Office Picture Manager to edit, resize and crop the image. Then, i use an online generator to create the ICO file.

How to add favicon to blogger blog


1. First step is to host the favicon.ico. I would suggest using Google Page Creator where 100MB of file can be uploaded for free and it is easy too.

2. Create Google Page Creator account and upload the favicon.ico to your googlepage account. Alternatively, you can use your own host of choice.

3. Now, Login to your Blogger account, Click on Edit HTML in the Template Tab and add the code shown below between <head> and </head>.

<link rel="shortcut icon" href="http://youraccount.googlepages.com/favicon.ico" />
<link rel="icon" href="http://youraccount.googlepages.com/favicon.ico" />

Replace youraccount with your account name.

Now, save the template and you should be good to go.

No comments:

Post a Comment

Commonly Used Abbreviations Used Daily

Although, we tend to use short form of long words in daily life but there are many abbreviations which we don't remember. Below is the l...