ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel
  • »
  • Technology»
  • Internet & the Web»
  • Blogs

How To Change Blogger Favicon In All Browsers - Get Rid Of The Big Orange "B"!

Updated on April 30, 2014
Blogspot Favicon
Blogspot Favicon

Not Liking The Blogger Favicon?

Blogger favicon? What? What on earth is a blogger favicon? If you found yourself asking that question -- don't worry! You're not alone. For those who are challenged when it comes to technical words, the word "Favicon" might be something new. It was for me! I was searching on and on for tutorials regarding how to change my blogger favicon without knowing exactly what the icon was called.

What is a favicon? A favicon (short for "favorite icon") is a small icon which comes in 16x16, 32x32 or 64x64 sizes and they are seen in the address bar of browsers. For blogspot, Favicon comes in the form of a big Orange "B". For Hubpages this Favicon is an "H". I'm sure those who are frequent Blogspot users must be aware of the big Orange B. Usually this orange B is something we totally ignore, but what happens when you feel like personalizing your blog to a whole new level. How do you change that icon? How do you add your own favicon?

I decided to type out my own tutorial after I made some dumb mistakes whle uploading my own favicon. There are many tutorials on the Web, but what I am trying to do here is to offer step-by-step instructions so that you get your blogger favicon uploaded in the very first try!

Step-By-Step Instructions On How To Change The Blogspot Favicon

  1. Log into your blogger/blogspot account.
  2. Click on "Design" for the blog you want to edit.
  3. Click on "Edit HTML"
  4. Use CTRL + F to search for "</head>"
  5. Just above that, type the following code -

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

where icon URL = a favicon icon URL ending in .ico format hosted at a free icon hosting site.

I recommend You don't need to create an account there (saves a lot of time), create your own favicon and then you will get a favicon URL immediately which you can then use in the code given above. Remember to use icon with .ico format! This is very important! The mistake I did was hosting a picture with jpg format. Even if this worked on Google Chrome and Firefox, it did not work on IE. This is why I totally recommend using a favicon with .ico format!

This single code is enough for you to change the blogspot favicon in all browsers!

Why Would You Want To Change Your Blogger Favicon?

  • To personalize your blogger page.
  • If you have just purchased a domain name and you are using blogspot platform to host your blog, then you might want to remove that big Orange B which loudly advertises blogspot.
  • A customized favicon makes your blog look unique from the rest.
  • A unique blogger favicon makes your site look professional!


    0 of 8192 characters used
    Post Comment

    • divacratus profile image

      Kalpana Iyer 5 years ago from India

      Hope it helps Magdelene! Thanks for stopping by and taking the time out to comment

    • Magdelene profile image

      Magdelene 5 years ago from Okotoks

      Will have to look into that myself, might just be the way to go. Good information.

    • nayaz1625 profile image

      nayaz1625 6 years ago

      very good gub. did not know about that. thanks

    • profile image

      Helpful Hanna 6 years ago

      This is very interesting. Thanks for the info!

    • Cagsil profile image

      Cagsil 6 years ago from USA or America

      An interesting hub. I had never considered changing it before now. I probably won't change it on the two blogs I have on Blogspot. However, your hub did give me knowledge I didn't have beforehand, so for that I say Thank you. :)