Custom Favicon on Blogger

Favicon is the icon you see on most browsers URL box. You can make your own favicon and get rid of that big orange B for good.

First thing you will need to do is to make your favicon. You may want to use paint or photoshop either one will work great. You can also use one of the many online tools.

If you choose to use paint or photoshop you will need to upload your image onto one of the online favicon generators in order to change the extension to .ico. The reason you want to change it to .ico is so the code below displays it correctly in IE and Google Chrome. Firefox will  display the favicon in just about any format. But IE and GC are a little more strict and need to be .ico  format file. So after you upload it to the generator, you will want to download the .ico image it gives you.

The problems you will face now is that almost no upload sites support .ico format flies. So the solution I found to this is to make  www.webs.com account. Upload the  favicon as a file to the your webs site.

Now you will need to go to your Blogger Dashboard. From the Dashboard go to Design  then Edit HTML.
You will need to find (Ctrl+F) this code below in your template HTML code.


</head>


Once you have found the head tag in the HTML, paste this following code just above it.


<link href='YOUR WEBS ICON IMAGE' rel='shortcut icon' type='/icon/ico/index.html' />
<link href='YOUR WEBS ICON IMAGE' rel='shortcut icon'/>
<link href='YOUR WEBS ICON IMAGE' rel='icon'/>


Now go back to the window with your webs site opened and right click on the favicon file you uploaded. Then replace the red text above with the image link you just copied.

Example:

<link href='http://matrixanimes.webs.com/favicon(3).ico' rel='shortcut icon' type='/icon/ico/index.html'/>
<link href='http://matrixanimes.webs.com/favicon(3).ico' rel='shortcut icon'/>
<link href='http://matrixanimes.webs.com/favicon(3).ico' rel='icon'/>
</head>

Remember your uploading the icon image to .webs site as a file not a photo.