Create your own shortcut icon/ address bar icon

Stumble del.icio.us Reddit MyWeb! Facebook Google bookmark

Are you fed up of the generic/common blogger icon that appears on every other blog when you open it in the browser ?



Well, assuming that the Blogger terms of service are not violated if we try to change the shortcut icon (or FavIcon as it's well known), here is a series of steps on how to accomplish this with any of the templates that the blogger provides:
[YOU ARE ADVISED TO "DOWNLOAD FULL TEMPLATE" BEFORE YOU MESS WITH ANYTHING.]

1. If you already have an icon somewhere on the web, goto step 7. Otherwise for uploading a new icon, click on new post.
2. On the Compose or Edit Html tab, click on "Add Image" button on the text toolbar.
3. Click browse under the "Add an image from your computer" text and select the image you want as icon. Be sure that you choose only the formats specified by Blogger. It should be one of jpg, gif, bmp and png images, 8 MB maximum size. Though, you can upload upto 8MB of image, but it won't be wise to do so. Choose an image which is not beyond 4-8 Kb size or a 20x20 or 32x32 pixel size will be sufficient. The larger the images, the slower your pages will load.
4. Once uploaded, Click "Done", and come back to the New Post page.
5. Now from the "Edit HTML" tab, select the src="http://www.blogger.com/......png etc" within the <img tag. Copy just the url/link of image.
6. Click on "save as draft" button. Keep this post as draft forever.
7. Now go to Customize -> Layout -> Edit HTML, then click "Expand widget templates" checkbox.
8. Scroll down until you find ]]></b:skin> or </head>.
9. Paste the full url of the image you just uploaded or the image url where you have your icon in the following format just above the </head> part as shown.
   

10. 
    < href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPBYIXunMn2FBIUnJdFS3mVP2f_ScLkYyMgYLRhSv3mftWAggyT8y9v9liBxNKwW5YEWB5D_QyLxo_XKnH3gku4QBAWk_YR2pvGTCd4qlNOskyd3JjOw1_ZLXw43f_2stf8dDHcQCbDkA/s320/Pinto.jpg' rel='SHORTCUT ICON'/> </head>

    
    
    The highlighted url will be your url image. The one shown here is mine.
    
11. Click Save template and enjoy!