≡ 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 ().

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 (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 />

For example, my link code looks like this:

<link href=’/ rel=’shortcut icon’/>
<link href=’/ rel=’shortcut icon’ type=’image/vnd.microsoft.icon’/>
<link href=’/ /> ‘ rel=’icon’/>
<link href=’/ /> ‘ 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: 7sharov-spb.ru 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 , and .

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

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

  • 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!

  • 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.

  • 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!

    • 7sharov-spb.ru January 1, 2012, 9:41 pm

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

  • October 14, 2011, 1:59 am

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

  • 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 :-/

  • 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.

    • 7sharov-spb.ru 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!

  • 7sharov-spb.ru May 6, 2011, 9:16 am

    Can you edit the HTML of the template?

  • 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

  • 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 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!

  • 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

Related pages

is anal safe during pregnancynewborn yeast infection diaper rashhow long does spotting last after conceptionhow to know when your ovulating on the pillis your nipples itching a sign of pregnancymuslin babypruritic plaquesbreaking out in hives during pregnancynipples hurting before periodis henna hair dye safe during pregnancypremenstrual symptoms dischargesore nipples before period or pregnanthow soon to take a pregnancy test after intercoursebelly shape and baby gendercan you dye your hair when pregnant first trimesterovulation breast sorenessfell while pregnant third trimestercold and flu remedies in pregnancywhy are nipples sore during pregnancyyeast rash newbornovaries pain right sidewhen does fetus start movinglight brown discharge instead of period am i pregnantvery faint positive on pregnancy testgreen color stool in infantsbaby poop newborn13 weeks pregnant and bleeding after intercoursepregnant sharp pain lower right sideball rash treatmentcramping beginning of pregnancywhy does urine infection keep coming back3 month old sinus congestionnewborn stool color breastfedsour stomach pregnancy signcan u get a period and not ovulatesore nipples two weeks before periodstrange taste in mouth during pregnancypregnant navel ringmood changes during early pregnancywhy is my period lighter and shorter than usualwhats the earliest pregnancy can be detectedcan amniocentesis detect genderspotting and perimenopausewhen do u ovulate after birthold wives tales baby heart rate genderriding horses pregnantreasons for missed period on pillpregnancy monitor apphow soon after conception do cramps startfibroid in the fundusbooks for unborn babiesbaby shower favor etiquettewhen umbilical cord falls off earlypregnancy symptoms at 1 week after conceptionovulation pain one side6 week infant milestonespain in the lower abdomen after intercoursefolic acid prevent miscarriageperiod is 3 days late but pregnancy test is negativefatigue during third trimesterbleeding after intercourse ovulationear piercing for infantsskin rash on testiclesvaginal cramps before periodperiods and perimenopausesigns of a cyst on the ovarieshow many days do u bleed after a miscarriageafter sex cramping in stomachgas in breastfed newbornssoak hemorrhoidsnasal spray infantswhen is the earliest signs of pregnancyscrotum sore skinpregnant feels like menstrual cramps