Wednesday, October 5, 2011

How to Add a Favicon to your Blogger Blog

What's a favicon? Short for "favorite icon," it is the little icon that shows up in the browser bar next to the website address. Most savvy big-name companies have them, and they use them as a subtle reminder of their iconic brands:



If you have a Blogger blog, even if you have a custom domain name, the standard Blogger favicon will show next to your site:




So how do you get your own custom favicon for your Blogger blog?


It couldn't be easier. 



1. Create or choose a favicon. In Photoshop, create a square file and design a simple icon or logo. You can crop an image, use pre-set brush shapes (like a star), or use an existing logo. Once you are satisfied, resize the image to 16 x 16 pixels and save as a .png or .ico file. Remember to keep it simple, because the final image is so small. 


  • If you don't have Photoshop, just google "favicon generator" and a number of sites will help convert an image into the appropriate file.


2. Go to the Layout setting. Find the tab entitled "Favicon" and click "Edit."


How to add favicon on Blogger




 3. Upload the flavicon. Follow the prompts and save.


Configure favicon on Blogger


4. Be patient. This is the most important step. You will hit save and reload your page, and . . . nothing. It takes 24 to 48 hours for the change to take place, so don't despair. Before you know it, you will have a nifty favicon of your own:




If you liked this post, you may also like:


  

32 comments:

  1. Thank you for this. I was able to make it work on my Blogger site but have not yet worked through it on my Wordpress site. It's a lot more complex on Wordpress. . . as is everything.

    You have been most helpful.

    ReplyDelete
  2. Feeling a little less lost in the crazy world of blogging thanks to your posts! You're awesome-sauce buddy!

    ReplyDelete
  3. Thank you all for stopping by!

    ReplyDelete
  4. Thanks so so much! You are amazing! xx

    ReplyDelete
  5. good stuffs!!thanks a lot

    ReplyDelete
  6. wow thanks! I had no idea I could even do this! :)

    ReplyDelete
  7. Thanks a lot for your help I used your tutorial to make mine.

    ReplyDelete
  8. I've been ignoring the favicon for a while now X_x> Thanks for the making it seem so easy :D

    ReplyDelete
  9. thanks for this wonderful topic ....I've done as you said and it worked well
    for those who don't have Photoshop ,I advise them to use favicon.ico generator
    it's simple,easy and effective

    ReplyDelete
  10. Thanks! I had no idea doing this was so easy :)

    ReplyDelete
  11. sir that's my blog can you please tell me improvements required in it :- http://geeksprogrammings.blogspot.in/

    ReplyDelete
    Replies
    1. Hi, your blog looks fine. A few thoughts: (1) The banner is a bit hard to read and may be too wide for some computers, so you may want to make the width of your blog a bit narrower. (2) Maybe consider doing 2 columns instead of 3 to make it less busy. (3) How about adding an "About" page so people know what kind of blog you are doing. Good luck.

      Delete
  12. Hey once again thanks for this information :) I don't plan on using a favicon now because I cant think off any logo to make and also afraid to copy from google images due to copyright issues.

    ReplyDelete
  13. Hey I finally added a favicon to my blog.
    www.theticgaming.blogspot.com Thanks for this info :)

    ReplyDelete
  14. Hi, many thanks for your tips. Still thinking of blogger or wordpress for my next coming website :D

    ReplyDelete
  15. Thanks, great tips and clear instructions!

    ReplyDelete
  16. Your tips are so helpful ... thank you millions ... Social Media stuff done (they're a bit big but I'll change that later) ... on now to Favicons . I've been trying to do this stuff for ages and finally it's starting to look like something lol
    Fil @ Fil’s Place - Old songs and Memories

    ReplyDelete
  17. Thanks, now we have a cool monkey face favicon :P

    ReplyDelete
  18. It worked! :D I put it on my humour site. Very useful with browser tabs. http://www.comicalfolly.com/

    ReplyDelete
  19. Thank you so much for this post! very useful! :)

    ReplyDelete
  20. Thank you! First time blogger here..you helped me so much!!!

    ReplyDelete
  21. This has been important for the students to regard about every good stance in detail, because, these are the ones which create better understanding to getting advance. best 3 column wordpress themes

    ReplyDelete
  22. Thanks! The trick is to wait, which is not obvious!

    ReplyDelete

Join the discussion...