How To Add or Change Favicon on Blogger Blogspot

Favicon (Favorites Icon) is the small picture (usually 16px x 16px in size) you see beside some some site's name in your browser's address bar. Having your own favicon with a nice graphical reminder of your site beside is a good way to get visitors attention. Blogger users can add a custom favicon for their blogs going to the Layout section  and by clicking on the Edit link on the "Favicon" element.


"For many bloggers, having a custom favicon (the tiny image displayed in your browser’s window or tab) is the finishing touch that ties together the design and identity of a great looking blog. Today, we're pleased to announce that Blogger in Draft users can now add a customized favicon to their blog. ~Blogger in Draft"

How To Add a Favicon to Your Blogger Blog

Step 1. Log in to your Blogger's Dashboard, go to the Layout and click on Add a Gadget link


Step 2. Click on the "Edit" link on the "Favicon" setting above the navbar element.


Step 3. A popup window will open where you can search for an image in your hard drive to replace the default favicon image. Click on "Browse" button and search for your favicon (it should have the .ico extension) - then click on "Save".



Step 4. Now you should see your own favicon instead of blogger's default favicon.


It might take some time until your new favicon will appear in your Browser's tab or window.

If you want to add animated favicons to your Blogger blogs, then follow this method below.

How to add an animated favicon in Blogger

Step 1. Log in to your Blogger account > Template > Edit HTML (if needed, click on Proceed button)


Step 2. Select the "Expand widget templates" box


Step 3. Search (CTRL + F) for:

 <b:skin> 

Step 4. Paste this code just above it:

<link href="your-favicon-links-goes-here" rel="icon" type="image/gif"/>

See the screenshot for more details
animated favicon blogger, how to





Note: replace your-favicon-links-goes-here with your favicon's link location

You can choose from here some cool favicons for your site/blog: http://www.favicon.cc/ (just download the favicon you like - upload it on tinypic or on a blogger's post, then copy the link address/direct link)

Step 5. Save the Template. And you're done!
Share this post:

    Random Posts

60 comments:

  1. Replies
    1. site wich can uploade pics and then use the url with ur pic for ur blogg as background/favicon etc

      Delete
  2. That's it! well explained

    ReplyDelete
  3. doesnt work for me please help

    ReplyDelete
  4. please help i cant change my Favicon i dont know why

    ReplyDelete
    Replies
    1. The favicon you created might be a larger one..
      so create a 16X16 picture and save it with .ico extension or change it to icon using tools like formatfactory after saving it as jpg or png or any other picture. By this we can get a picture less than 100.
      Even I couldn't change my favicon..But now I got it..
      Try this method... have a good day..

      Delete
    2. my favicon is 16*16 px but it also not work for me plz help.

      Delete
  5. my favicon is replaced but it is not changing i have uploaded animated favicon..Please help!!!

    ReplyDelete
    Replies
    1. Hi Serve Boy,

      Chrome and IE don't support animated favicon. As far as i know, only Firefox support it. Sorry for that

      Delete
  6. It is not appearing in tab, how long will it take(a guess)?

    ReplyDelete
  7. How Much Time It tooks TO Change?

    I Change It with 16x16 icon

    thanks.note(not an animated icon)just normal icon ;D

    ReplyDelete
  8. Then why are you still using the default?

    ReplyDelete
  9. How come that your favicon is not working in chrome? Like mine, I think this solution will not work in chrome browser.

    ReplyDelete
  10. hello Friend your site looks great and all post are awesome. how to check blog views in blogspot.

    ReplyDelete
  11. its not working, help me.. :(

    ReplyDelete
  12. Followed the instructions to a tee but it doesn't work. Also, there is no way to change the extension to .ico in photoshop. The favacon is still the blogger one.

    ReplyDelete
  13. blogger's setting's are not supporting .ico
    Its saying invalid format.
    But accepting other formats like .png very well

    ReplyDelete
  14. nice post and nice blog

    ReplyDelete
  15. Thanx For Sharing Nice Post

    ReplyDelete
  16. I have change my favicon icon, thanks to you!

    www.drsneez4u.com

    ReplyDelete
  17. please help where can i get not animated favicon

    ReplyDelete
  18. It perfectly works but why it is a kind of blurry and not understandable.
    http://readerssightandsmell.blogspot.com/

    ReplyDelete
  19. It's work thank you very much...

    ReplyDelete
  20. If in mobile i can't change my blog favicon. So, how i can change my favicon?

    ReplyDelete
  21. Thank you for your complete explanation. It really works! Great post sharing.

    ReplyDelete
  22. Thank you very much for the sharing,
    I will try it.

    ReplyDelete
  23. Hi I do this but don't appear to my safari :( but the other tutorial of comments widget works so nice, and I also pinned it in my pinterest. Thank you !

    ReplyDelete
  24. hi, I tried adding it into my site but it's not appearing on chrome, only in firefox :(
    www.1like4.me

    ReplyDelete
  25. Very well explained.I like it.I appreciated you.Keep it up thank you

    ReplyDelete
  26. wah ternyata gampang juga ya bikin favicon
    thanks!!

    ReplyDelete
  27. Anonymous9/22/2013

    after i uploaded the image for favicon, it is not showing..

    ReplyDelete
  28. Thanks for the help <3

    ReplyDelete
  29. Thank you so much. It worked!

    ReplyDelete
  30. Thanks a lot!

    http://handynettips.blogspot.co.uk/

    ReplyDelete
  31. We can use our site logo in the place of Favicon provided size is 16X16 px . nice stuff.

    Regards,

    Divya @smtutorial

    ReplyDelete
  32. Thank you so much! I appreciate it. :)

    ReplyDelete
  33. It works on Explorer but not on Chrome. Does Chrome need more time or is there a problem? Thanks!
    www.audreysglams.blogspot.com

    ReplyDelete
  34. Oh ok I just clared the cache and it works, thanks!

    ReplyDelete
  35. doesn't work...plzt teach me how to add....which url have to replace???

    ReplyDelete
  36. Thanks a lot!! High Five from - http://bit.ly/1fUcAre

    ReplyDelete
  37. Thanks dude you brighten my day.

    ReplyDelete
  38. can you help? i dont know where im going wrong?

    ReplyDelete
    Replies
    1. Hi Sarah,

      Try to clean your browser's cache and then restart it.

      Delete
  39. i have added favicon component in my template, but still it is showing blogger default favicon. Pls help me.

    ReplyDelete
  40. thanks, this really help me

    ReplyDelete
  41. nice post ...but my favicon didn't removed when i try to remove it
    www.atultec.org

    ReplyDelete
  42. thanks worked for me on firefox but not chrome
    http://girlallover.blogspot.com/

    ReplyDelete
  43. nice post, I've tried it but it seems not work on my blog
    I followed all the instruction well, but it's not work :(

    http://ayokepo.blogspot.com/
    or
    http://eka-design.blogspot.com/

    ReplyDelete
  44. My favicon changed on my tab but not my blogger profile (next to my name) on the side of my blog. Any idea how to change it there? Thanks!

    www.gritandtang.blogspot.com

    ReplyDelete

Although every comment is appreciated, due to time limitations I might not be able to respond to everyone. Keep in mind that comments are moderated and may take some time to appear. All spam comments will be deleted. Thanks for understanding!