How to change your blog icon in Blogger

Wanna know how to change your blog icon in Blogger (like the one on this page)?

It's simple, just follow these simple steps below!


First, choose a .png file (of any size) that you deem nice enough to put as a blog icon.

Then, upload the .png to http://html-kit.com/favicon/-/selpic-2/ and download the resulting file in .ico format.

After downloading the .ico file to your computer, upload it to http://picpanda.com or http://imageboo.com or http://www.iconj.com/icon_generator.php and obtain a direct link for the file after it is uploaded into the website's storage.

Log into your Blogger account and select: Dashboard>Layout>Edit HTML.

You will see a window with all the HTML mumble-jumbles you do not understand. Fret not, you only need to find the code right at the top, that should look like this:

<head>

<b:include data='blog' name='all-head-content'/>

<title><data:blog.pageTitle/></title>

<b:skin><![CDATA[/*

After the line of code:

<title><data:blog.pageTitle/></title>

on the next line, type:

<link href='URL of your icon file' rel='shortcut icon' type='image/vnd.microsoft.icon'/>

Make sure not to simply copy this exactly, but actually put your icon’s URL in, instead of the words ‘URL of your icon

The whole thing will look like this:

<head>

<b:include data='blog' name='all-head-content'/>

<title><data:blog.pageTitle/></title>

<link href='URL of your icon file' rel='shortcut icon' type='image/vnd.microsoft.icon'/>

<b:skin><![CDATA[/*

Here is a sample of the code:

<head>

<b:include data='blog' name='all-head-content'/>

<title><data:blog.pageTitle/></title>

<link href='http://www.picpanda.com/images/123456789abcdefg.ico' rel='shortcut icon' type='image/vnd.microsoft.icon'/>

<b:skin><![CDATA[/*

Click to save your new template and you should see the new icon next to your blog's address!

PS: If the above codes do not work, try inserting this code instead:

<link href='URL of your icon file' rel='shortcut icon' type='image/x-icon'/>


MS©  – (8 July 2009 at 11:53)  

unlike other posts that i read and tried out before, this one really worked. I used www.imageboo.com to host the .ico file. Thank you for the tip.

Andrew  – (8 August 2009 at 21:25)  

Thanks, this was very useful!

Angeline  – (2 October 2009 at 07:57)  

Your post is good source of knowledge.You helped me so much.
rossie_jordan@yahoo.com

iisaw =)  – (3 December 2009 at 03:34)  

wow.. thank you for sharing :)
it's working for me too!

Forrest  – (9 April 2010 at 20:26)  

That's AWESOME! i couldn't find anything else for blogger on the internet!
Five stars!
*****

TRISULAPURI GROUP  – (24 July 2010 at 05:29)  

how to make all these? i'd tried all the steps but its not worked:( help me please..

sandeep kolakaluri  – (2 December 2010 at 07:09)  

thank you so much
it was so helpfull for me
once gain thank you............................
sandeep kolakaluri

Gunther  – (15 May 2011 at 19:01)  

Great code examples! Thanx.

Post a Comment

  © Blogger template Shush by Ourblogtemplates.com 2009

Back to TOP