Blog icon for Blogger

I just learnt how to change the blog icon for Blogger. I tried a few times before I actually succeeded! I think many blogs missed out some parts! Let me give you the most detailed steps!


Step 1: Search for an image (.JPEG, .JPG, .GIF, .BMP, .PNG, .ICO, .TIF, and .TIFF) 


Step 2: Save the image (to your downloads page or desktop if you want convenience)


Step 3: Upload the image to http://picpanda.com/

-by clicking on 'Choose File',
-Select the image,
-Click 'Upload'.


Step 4: Log on to your Blogger account
-Click on 'Design'

-Then click on 'Edit HTML'

Step 5: You will see a chunk of HTML codes. Fret not! 

-Don't even scroll down, at the bottom half of that page try to search for

             <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:

<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[/*

Now I will show you how I did it:

Step 1: I choose my image (.jpeg)

Step 2: Selected the file on http://picpanda.com/ (images-12.jpeg)

Step 3: Upload and it will bring you to this page:

 *This is the tricky part! You DON'T copy and paste the whole chunk or whole strip of URL. You only use the section from 'Hotlink for Websites'

AGAIN, not the whole line! Select only the last part, which is:

http://picpanda.com/images/nbjzr4jyphff9kvkue76.jpeg

So, what you'll see as my code will be:

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

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

<link href='http://picpanda.com/images/nbjzr4jyphff9kvkue76.jpeg' rel='shortcut icon' type='image/vnd.microsoft.icon'/>

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

When you're done, click 'Preview'! If it's successful, click 'Save template'.

*If not, try inserting this code instead: 

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

-Credits to Toshi (http://www.scribd.com/doc/6372787/How-to-Change-Your-Blog-Icon-in-Blogger)