Tutorial: Custom Blogger FavIcon (Website Url Icon)

If you have a Blogger blog, you will notice that Blogger uses a default "B" icon for your blog:

However, it's actually fairly easy to customize the image to your own picture to look something like this:

Here are the simple steps:

1. Find a picture you want to use for your custom icon.  
2. The picture ideally needs to be a square size.  If your picture is not square then the resulting icon will look deformed (not good).  To resize your picture to something square, you can do it easily in Picnik.
1. Go to Picnik and upload your picture.
2. Select the Crop button from the top toolbar.  
3. In the crop window, now resize your picture so that you have the same pixels for both the width and height.  Move the crop window so that the image you want to have shown for your icon is selected.

http://www.iconj.com/favicon_hosting.php


4. Once the picture is resized, then save it to your computer.
3. Now go to IconJ
4. Upload your picture:
   
   
5. Once the icon is generated, copy the second link that allows you to have IconJ host your images.
   
   
6. Now log in to Blogger to edit your blog. Select the Design tab, and then choose Edit HTML.
7. Check the box to Expand Widget Templates.
8. Search the code (use Ctrl + F) for </head>
9. Paste the copied line from IconJ right before the </head> tag.  
10. Save your template and you're good to go!  Refresh your blog and you should now see your custom icon! 

Let me know if you have any questions! 

P.S. In case you missed it, I did get dressed today.  :)


Follow Me | Twitter | Facebook
Ask me anything on FormSpring