Monday, October 13, 2008

Changing the favicon for your blog

People who are not happy with the Orange and White Blogger favicon, can use their own instead. First create a 48 X 48 px image using Gimp or whatever software you prefer. Save the image as a .ico file, say myicon.ico. Upload the image to some webhost like Google Pages or Geocities (Picasa WebAlbum doesn't accept .ico files).
Next go to your Blogger DashBoard --> Layout --> Edit HTML.
Locate the line <head>
After the line insert the code-
<link href="http://imagelocation/myicon.ico" rel="icon">.
Replace http://imagelocation with your webhost's address. Save the template. The job is done. Refresh your Blog page, your own icon will appear instead of Blogger's.

9 comments:

sarthak said...

Thanks a lot!
However, interested bloggers may face a small obstacle.

In HTML the link tag has no end tag.

In XHTML the link tag must be properly closed.
Therefore, if your blog uses XHTML, you need to add a '/' after rel="ico".
ie
link href="http://xyz.googlepages.com/boy.ico" rel="icon"/
before closing it with the '>'

But, i did all that still my 48x48 px icon isnt showing up. I dont know whats the problem.

sarthak said...

the reason cud possibly be that i just uploaded the icon on googlepages..maybe it'll take some time for the ico to come up. Lets see.

sambit said...

Thanks for pointing it out. It is indeed necessary for xhtml compliance.
Anyway, the icon shouldn't take time to show up. Have you checked whether "http://xyz.googlepages.com/boy.ico" is really leading to your icon file?

sarthak said...

yes it does lead to the ico file.
it prompts me to SAVE the file or CANCEL.
The icon doesn't load in the browser.

sarthak said...

The icon still hasnt loaded.
I checked the source of my blog page, and i found something:
Other than my own link tag, there was the default favicon link tag a few lines below too.
If i commented b:include data='blog' name='all-head-content'/ in edit HTML of the Layout, the faviocn tag along with many other tags would get commented in the page source, but still the icon would be the favicon, not my own.

sarthak said...

Oh it was pretty easy. I looked up your blog source code, and i found your icon tag was below the standard code generated by defaukt which included the favicon command.
so i put my link tag BELOW the b:include data='blog' name='all-head-content tag.
Now the favicon has gone, but instead of showing my ico, its showing a white square. is 48 by 48 a wee bit too big? thats why my icn isnt showing up?

Sambit said...

Even I am using a 48x48 icon...

sarthak said...

it certainly took a while but FINALLY the icon's come..thanks!

Angeline said...

Icons are coming.I'll see.Thanks for sharing.
rossie_jordan@yahoo.com