How to Add Your Own Favicon to Blogger

What is favicon? Favicon is an image located at the most left side of your blog url. Normal or default favicon for a blog at blogger.com or blogspot.com is an image "B". Now, if you need to change that image to be something from your own creation, follow the instruction below:

1. You have to have your own image from somewhere else or you can create your favicon image. You can use Adobe Photoshop etc. Try to size the file into 100 pixels x 100 pixels. Then you need to change it into an image icon file. To do this follow the step 2 below.

2. Open URL address http://www.favicongenerator.com/ Then locate the image that you would like to use as your Favicon and make sure that the dimensions are perfectly square (ie. 100 Pixels x 100 Pixels). Press browse button to select the file's location on your computer and select the image.Then, press the Generate Favicon! button. If you succeed, a link below the button appears something like "Click Here to Download Your Favicon!" then click that link. After downloading, you need to save it and the next step is you need to simply upload your favicon.ico to an online host.

3. After you have the image you would like to use as your favicon, goto your Blogger.com blog and create a new post. It does not matter what you call it since you don’t need to publish it. Make it just as a 'Draft' (Don't publish it. Once you have created a new post use the image upload button to upload your favicon to your Blogger.com blog. Once you have uploaded the image, you will need to switch to “Edit HTML” mode if you are using the “Compose” mode. Once you are looking at the HTML you will see something like this:

<img src='http://..../favicon.ico'>

Then copy that URL start from http:...until the end of that URL code. So, this is your favicon URL address.

4. Next, you need to copy this into your HTML source.

<link rel="shortcut icon" href="Your URL address here"/>

Such as:

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

5. Login to your Blogger account. Go to "Layout" and click "Edit HTML" button.

6. Paste the above code into your HTML editor just before the following symbol:

</head>

7. Click "save template" button and refresh your blog URL in your browser. Your Blog should now have your fancy new custom favicon showing on the address bar when you visit your blog.

--------------