≡ Menu

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 the author: 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. She is NOT a medical doctor and does NOT offer medical advice. Connect with her on Google+, Twitter and Facebook.

{ 28 comments… add one }
  • Mukesh January 28, 2017, 4:39 am

    thanks for this tutorial..really great help to struggling newbies like me..kudos!

  • Cayla and Ashley March 11, 2013, 12:01 am

    Wow! Another excellent guide! Thank you for all the inforand tips that you shared!

    I made my favicon myself for my new blog. (Feel free to check it out! Just Google “Cayla and Ashley” or visit our website: caylaandashley.blogspot.com )

    If you cannot see your favicon after you uploaded, try deleting your cache or history. If you view it from another computer or electronic device and it is there, relax. My computer still won’t show my favicon, but my Nook, iPod, and iPad do!

  • How To Make Blog February 27, 2013, 3:40 pm

    We’re a bunch of volunteers and opening a brand new scheme in our community. Your site offered us with valuable information to work on. You have performed an impressive process and our entire community might be grateful to you.

  • April December 28, 2011, 10:02 pm

    I can’t figure out where to copy the url address, I can’t find it, when I right click it, it doesn’t have one like yours?? I just started my blog today, so I’m very new at this!

    • DP Nguyen January 1, 2012, 9:41 pm

      I used Picassa Web Albums, and right clicking allowed me to copy the image URL..

  • CCSVI Cancun October 14, 2011, 1:59 am

    I love all the details you do on your layouts. 🙂

  • kayteelauren October 13, 2011, 9:54 pm

    I’m having the same issue as above ^ any suggestions?!

  • Winlove October 10, 2011, 1:53 am

    🙁 can’t make it work..keeps giving me the Error 500..Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: Element type “link” must be followed by either attribute specifications, “>” or “/>”.
    i dunno what i did wrong :-/

  • Forum | Bye Video October 5, 2011, 7:51 am

    Thank you SO MUCH for this blog. It was soooooo easy! If you don’t mind, I will be eventually blogging about this. You will get all the credit, but I want to blog my experience if that’s okay.

    • DP Nguyen October 5, 2011, 11:46 am

      You’re so welcome. I would LOVE a link back 🙂

  • Miriam June 15, 2011, 2:22 pm

    These instructions worked!!! Follow them exactly and it works! I had Rhonnie’s issue with the Blogger sign coming back up but I chose the wrong”head” code. I found the exact code and it works! Thanks a million!

  • Asian Tv May 21, 2011, 12:38 am

    wow – never even knew what a favicon was before this. I’m going to install it on my site, now im aware of it, every site i vist seems to have one!

  • DP Nguyen May 6, 2011, 9:16 am

    Can you edit the HTML of the template?

  • Cherrylej May 5, 2011, 5:08 pm

    this is amazing! i really really want a custom favicon for my site, but i am using a template where i just put it n html gadget, you know like shabbyblog’s… so i don’t know now what to do…

  • Rhonnie February 28, 2011, 11:17 am

    Hi I added the code exactly as shown but with my url and double checked to make sure it looked the same but the blogger logo still shows up. What am I missing?

    • DP February 28, 2011, 3:01 pm

      Double check the quotes. You may need to manually retype the quotation marks around the links. That can cause problems for some people.

      • Rhonnie March 1, 2011, 11:57 am

        tried that but still no joy? Do you think Blogger has now disabled the ability to change it?

        • DP March 1, 2011, 2:56 pm

          That is very strange. I tested it out my instructions when I wrote the post, and it worked for me then. (This was recently, too!) Are you copy and pasting into Notepad? Are there any extra spaces in the code that shouldn’t be there?

          I am not aware of any changes on Blogger but I am on a Wordpress template now. However, Google has gone through a few changes in recent days. The favicon that I used for this blog post for my doggie blog still works, though.

          You are welcome to send me the code and I will troubleshoot for you. Email me at dp@mypregnancybaby.com

  • ReNOUNed January 27, 2011, 3:17 pm

    Great info! I’m just learning the ins and outs of making my blog stand out. Thank you for the easy to understand instructions! I can’t wait to try!
    My blog is at http://www.renouneddesign.com come visit me!

    • Anonymous January 27, 2011, 3:30 pm

      No problem. If you have any other questions about blogging, please let me know so that I can write future tutorials to help everyone out. I am always looking for new ideas!

  • jared's mum January 26, 2011, 10:49 pm

    thanks for this tutorial..really great help to struggling newbies like me..kudos!

    • Anonymous January 26, 2011, 11:02 pm

      Let me know if you have any questions about blogging. I’d be happy to post about them and answer your questions.

  • Caroline Calvelo January 26, 2011, 7:16 pm

    i love love your website! following you from socialmoms

    • Anonymous January 26, 2011, 7:18 pm

      Thank you for the sweet comment, Caroline!

  • Amy January 26, 2011, 1:07 pm

    I wish I had found this a few months ago…I totally slaved away figuring out how to do this 🙂

    One things I haven’t figured out however is how to make my icon pop up in a reader instead of the blogger icon. Any thoughts?

    • Anonymous January 26, 2011, 2:58 pm

      I haven’t figured that out but I will let you know when I do 🙂

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.