How to add your own blog icon to your blog

The icon that appears next to the URL of a blog is called a Favicon. Have you seen blogs that have a different logo(other than the Google's default blogger logo) in the address bar? That adds some professionalism to your blog and says to the world that you know something more than what the average blogger knows. Take a look at the URL of this blog. Can you see the animated red-yellow logo at the beginning of the address bar? That's what I'm talking about. Today, I will tell you how to do this with your own blog. It is quite easy and it took only ten minutes for me to do it. So follow the steps below...

Step 1

Create a 16x16 .gif or .jpg image using any photo editing software(MS Paint, MS Picture Manager, Photoshop etc.). If you don't know how to do it, you can use a free online tool for that. I recommend this site to create your favicon because it's so easy and it's completely free!
Once you create it, download it and save it on to your desktop.

Step 2

Upload your image(the favicon you just created) to a photo sharing website. I suggest you use Google Picasa which is available to all blogger account owners. You can use this service to host all your blog-related images and again the good thing is it's completely free! Here is how you upload your images to picasa

• Log in to your picasa account using your gmail username and password.
• Select the blog that you want to apply the favicon for.
• Click upload button.
• Select the image/favicon from your desktop.
• Upload the image.

Step 3

Click on the newly uploaded image. Then you will be taken to a page that has information about that image. On the right-side of the screen, you will see a link called "Link to this Photo". Click on that link to expand it (see the screen shot on the left of the window).
Under the "Embed image", tick the "Image only (no link)" checkbox.
Then copy the URL of the image. Make sure to copy the URL provided in the second text box (I have encircled it in blue). This value will be different from what you see in this screen shot.

Step 4

Now go to your blogger dashboard and click "Layout" and then the "Edit HTML" tab.
Before you do anything, download the current template(in case something goes wrong).

Now comes the tricky part :-)

Step 5

Locate the following line of code

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

Step 6

Immediately after that line, paste this code

<link href='theUrlOfTheImageThatYouObtainedInStep3' rel='shortcut icon' type='image/x-icon' />

Make sure to replace the part in red by the URL of your image. Everything in the above code is case-sensitive, so don't make any changes except replacing the relevant URL. The quotation marks are very important so don't omit them either.

Step 7

After doing that, save your template and preview and if everything went well, you should see your new blog logo in the address bar instead of the orange blogger logo.


So that's all there is to customizing your own blog logo. I hope this article will be useful to you and if you encounter any problems or error messages while editing the HTML, feel free to leave a comment below and I'm very happy to help you with it.