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 site's name in your browser's address bar. Having your own Favicon with a nice graphical reminder of your site is a good way to grab visitors attention. Blogger users can add a custom favicon on their blogs by going to the 'Layout' section and click 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 into your Blogger's Dashboard, then go to the "Layout" and click on the "Add a Gadget" link


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


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


Step 4. Now you should see your own Favicon instead of the Blogger's default favicon.


Please keep in mind that 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 use the following method instead.

How to add an animated Favicon in Blogger

Step 1. Log in to your Blogger account > Template > Edit HTML.


Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the search box. Type or paste the following tag inside the search box and hit Enter to find it:
<b:skin>

Step 3. Paste this code just above it:
<link href="your-favicon-links-goes-here" rel="icon" type="image/gif"/>

animated favicon blogger
Note: replace your-favicon-links-goes-here with your Favicon link location

Here you can find some cool favicons for your site or 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 4. Save the Template and you're done adding the Favicon in your Blogger blog.

58 comments:

  1. what is tiny pic?

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

      Delete
  2. 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..

    ReplyDelete
  3. 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
  4. It is not appearing in tab, how long will it take(a guess)?

    ReplyDelete
  5. How Much Time It tooks TO Change?

    I Change It with 16x16 icon

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

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

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

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

    ReplyDelete
  9. 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
  10. blogger's setting's are not supporting .ico
    Its saying invalid format.
    But accepting other formats like .png very well

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

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

    www.drsneez4u.com

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

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

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

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

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

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

    ReplyDelete
  19. 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
  20. hi, I tried adding it into my site but it's not appearing on chrome, only in firefox :(
    www.1like4.me

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

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

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

    ReplyDelete
  24. Thanks a lot!

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

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

    Regards,

    Divya @smtutorial

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

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

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

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

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

    ReplyDelete
  31. 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
  32. i have added favicon component in my template, but still it is showing blogger default favicon. Pls help me.

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

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

    ReplyDelete
  35. 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
  36. 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