How To Change the Favicon of Your Blogger (Blogspot) Blog

Sunday, January 30, 2011 Stef dela Cruz 24 Comments

If you want to change the favicon on your Blogger (Blogspot) page, you’re not alone. Many people want a well customized page for their blogs, whether those blogs are professional or personal. And yes, the Blogger favicon is that little icon right beside your blog name whenever you open it in a browser:

 favicon

I haven’t changed mine yet because I’ve recently changed my template and I still don’t have the time to think of a proper icon. However, I’ve changed my favicon before and I know that some of the guides on the Internet don’t actually work.

Below is the step by step guide on how to change a favicon for your Blogger (Blogspot) blog:

1. Create your own favicon. You may use programs like Adobe Photoshop to create your own favicon. The size of your favicon should be 16 x 16 px (pixels). Save it as a .png or .jpg file. It would also be more convenient if you named it “favicon.”

2. Upload your new favicon to any photo hosting website, such as Photobucket. Copy the direct link of your uploaded favicon. If your favicon is a .png file, the direct link should look something like this:

http://i555.photobucket.com/albums/osososo/favicon.png

Note: it will NOT look exactly as the above link. Simply note that the link ends with “.png” if your uploaded favicon is indeed a .png file. If your uploaded favicon is a .jpg file, then the link to it once you’ve uploaded it would also end in “.jpg.”

3.  Log in to your Blogger account. This should bring you to your Blogger dashboard.

4. Click “Design” underneath the blog that has the favicon you want to change. That will bring you to the “Page Elements” part of the Design tab. Right beside the “Page Elements” is the “Edit HTML tab.” Click on that:

 change blogger favicon

5. You will now find yourself looking at a lot of code that doesn’t seem to make sense. Don’t worry, you’re in the right place. Before anything else, click on the “Download Full Template” link. This should back up your blog (which you should always do when editing your HTML!). Save the XML file.

6. Next, press the CTRL button on your keyboard. While you’re still pressing the CTRL button, click on the F button on your keyboard. That should bring up the “find” field on your browser. Type this into the search field:

<b:skin>

7. The <b:skin> tag will then be highlighted in the code on your browser. Right above it, copy and paste this code (this is the code that should prompt your blog to change the favicon):

<link href='type the link of your new favicon here' rel='shortcut icon' type='image/vnd.microsoft.icon'/>

Change the red text to the link of your favicon (see step 2 of this guide). If, for example, I were to type in the link of my make-believe favicon above, the new code would look like this:

<link href='http://i555.photobucket.com/albums/osososo/favicon.png ' rel='shortcut icon' type='image/vnd.microsoft.icon'/>

9. Next, click on the “Save Template” button.

10. That’s it, you’ve successfully changed your favicon on Blogger (Blogspot)! Try viewing your blog and you’ll see that the favicon has changed. If it doesn’t appear immediately, try refreshing several times as it might take some time before the new favicon appears.

Let me know how this works for you. Hope this guide on how to change a favicon on your Blogger (Blogspot) blog has helped you!

Stef dela CruzAbout the blogger
Stef dela Cruz is a doctor and writer. She received the 2013 Award for Health Media from the Department of Health. She maintains a health column in Health.Care Magazine and contributes to The Manila Bulletin. Add her to your circles.

24 comments:

  1. What's the URL of your blog? :)

    ReplyDelete
  2. great! thanks. changed my favicon but need to design better one, deleted it but waltkhrough works thanks

    ReplyDelete
  3. didnt work on my blog..
    www.armoirehomme.com
    please help..been tryin to change this for days

    ReplyDelete
  4. Hi Armoire Homme,
    I've looked at your website and you already have a favicon. :)

    ReplyDelete
  5. :( I have tried so many ways over the last few days and I always get the same problem when I try to save the template.

    "Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: The reference to entity "current" must end with the ';' delimiter."

    Any help would be amazing as your guide was by far the best.

    ReplyDelete
  6. Open your template editor and search for "current". Perhaps you wrote current with the symbol "&"? Instead of just "&", change it to "&amp" and try saving the template again.

    Hope that helped. :)

    ReplyDelete
  7. I just realized that many bloggers claim they can't get the favicon to work simply because they want me to visit their blog. Tsk tsk...

    ReplyDelete
  8. perhaps blogger doesn't give us a chance anymore to change our favicon, it's like a mark for blogger that give blog hosting for free. so let's just give blogger respect for this.

    it's really not works for favicon. so, what about yours steffie?????

    ReplyDelete
  9. I've changed the favicon of my other blogs. I haven't changed this one yet because I haven't gotten around to making one for this blog. My other blogs have their own favicons now, though. So it works! :)

    ReplyDelete
  10. This isn't working. Seriously.

    ReplyDelete
  11. Maybe you have code that conflicts with it. Tell me how you went about with it and maybe I can help you. (It worked for my clients and for my other readers. ;P)

    ReplyDelete
  12. Study Materials blog http://pptmaterial.blogspot.com

    ReplyDelete
  13. Don't work for me :(... and I'm not saying this just for you visiting my site.

    PS: great blog

    ReplyDelete
  14. it really works
    cheak
    http://m707.blogspot.com/

    ReplyDelete
  15. Good to know my walkthrough works for you guys as well. :)

    ReplyDelete
  16. http://reyneil.blogspot.com/ - it only works on mozilla?

    ReplyDelete
  17. Nope, it's supposed to work universally on all browsers. :)

    ReplyDelete

Get Email Updates! (You don't wanna miss out, yes?)