Tutorial: Add a Custom Favicon to your Blogger (Blogspot) Blog

Yesterday, I blogged about how to create a favicon for your blog. As promised, today’s post will be about how to add your favicon to your blogger (blogspot) blog. The process isn’t hard, but it does involve adding a code to your Blogger template. For this tutorial, I will use Gracie, my shih-tzu’s blog (www.tails-misadventures.blogspot.com).

If you publish with Blogger, then you should be familiar with the iconic default Blogger.com favicon. It’s the orange and white square logo. Most blogs on the Blogger platform use the default favicon.

Here’s what the default favicon looks like.

Adding your own custom favicon will help brand your blog, and it makes your blog distinct above the rest.

Favicon Image Extensions for Blogger

As I mentioned in yesterday’s blog post about how to create a favicon, favicons usually have the .ico file extension. However, Blogger does not offer hosting (one of the disadvantages of using a free blogging service), so you must upload the favicon to your own image hosting account. Most image hosting companies do not allow you to use the .ico extenuation (though you can find a few that do.)

To be on the safe side, save the favicon image that you want to use as a GIF, JPEG, or PNG.  You can easily do with this Picnik (www.picnik.com), a free photo editing program owned by Google that gives you the option to rotate, crop, and resize any photo that you want.

If you have Photoshop, you can create your favicon and resize the image to 16 pixels by 16 pixels. Save the image as a GIF, JPEG, or PNG.

After Creating Favicon, You Upload

Now that you’ve created the favicon that you want to use, you need to upload it to your image hosting account. I am using Picasa, because it’s owned by Google and the one that I’m most familiar with.

As you can see the favicon is TINY once it’s uploaded.

You will need to right click to copy the image URL. (Keep this URL handy. You will need it later).

My URL from Picasa looks like this:

If you use Picasa, your URL will look similar.

Creating the Link Code for Your Favicon

Now that you have the image URL, it’s time for you to place it in the link code, which looks like this:

<link href=’{image url}’ rel=’shortcut icon’/>
<link href=’{image url}’ rel=’shortcut icon’ type=’image/vnd.microsoft.icon’/>
<link href=’{image url}’ rel=’icon’/>
<link href=’{image url}’ rel=’icon’ type=’image/vnd.microsoft.icon’/>

** The {image url} is the URL from your favicon image. Make sure that it’s the exact URL for your favicon, starting with the http://

For example, my link code looks like this:

<link href=’http://lh6.ggpht.com/_33SCR_mnGZw/TT-qu2e_HEI/AAAAAAAAAaA/V0QVGTXLZSk/gracie1.jpg’ rel=’shortcut icon’/>
<link href=’http://lh6.ggpht.com/_33SCR_mnGZw/TT-qu2e_HEI/AAAAAAAAAaA/V0QVGTXLZSk/gracie1.jpg’ rel=’shortcut icon’ type=’image/vnd.microsoft.icon’/>
<link href=’http://lh6.ggpht.com/_33SCR_mnGZw/TT-qu2e_HEI/AAAAAAAAAaA/V0QVGTXLZSk/gracie1.jpg
‘ rel=’icon’/>
<link href=’http://lh6.ggpht.com/_33SCR_mnGZw/TT-qu2e_HEI/AAAAAAAAAaA/V0QVGTXLZSk/gracie1.jpg
‘ rel=’icon’ type=’image/vnd.microsoft.icon’/>

Final Step – Editing Your Blogger Template’s HTML

Now that you have the link code for your favicon, it’s time to tweak your Blogger template to make the Favicon show up.

Go to the “Design” tab of your blog, then to “Edit HTML.” Under “Edit Template,” scroll down to where it says </head> and paste your link code immediately before it.

Save the template. Refresh your homepage and you will notice that you have a favicon right next to your blog’s URL. Cool, right?

Congrats! You’re done! Feel free to Tweet, Digg, StumbleUpon, and share this post with friends, if you found it helpful!

About DP Nguyen

DP Nguyen is founder and editor of Hip Chick's Guide to PMS, Pregnancy and Babies. She’s an expert pregnancy and women’s health blogger, and she’s available for blog consultation, ghost writing, and general writing services. She is NOT a medical doctor and does NOT offer medical advice. A graduate of Vanderbilt University, DP spends her free time writing children’s novels and loving on her dog, Gracie Lu. Connect with her on Twitter and Facebook.