recent posts

12 How-To: Add a Custom Favicon to your Blog

June 26, 2011






Would you like your own custom Favicon (Favorite Icon)?  If  you are a Blogger user, most likely you have that blazing orange B showing up in your Browser tab.  Blogger has implemented the ability to host Favicon .ico files so it is easier than ever to add your own favicon.  First you will need to create your Favicon images (use Microsoft Paint, Picnik, or just any jpg file that you own).  Ideally you would create it 16 px X 16 px, but if you are not able to, that is OK because the converter we are going to use can do that for you.  



Save your favicon image as a jpeg, png or gif file to your desktop.  Go to http://www.iconj.com/favicon_hosting.php and click Browse, find your desktop and select your Favicon file.  Click Open.  Click Upload It!

Click on 1. Click here to download your Favicon.ico File.  Save it to your desktop.


The above image shows the Favicon jpg image (Favicon_Be...) and how it looks FOLLOWING the conversion.

Go to http://draft.blogger.com/home and login.  



Click on DESIGN.



 Click on Edit next to Favicon.



In the Pop-Up window click Browse and select your Favicon.ico file from your desktop.  Click SAVE.

That's it.  You're done!  No having to mess with the html code of your site!
Blogger has plans to support jpg, png, gif and other file-formats in the future, so hopefully that happens quickly because then we can skip the whole conversion process all together!

UPDATE: I've heard from several readers who weren't seeing their favicon's at first, but after a day or so they did show up.  So if you see it in your design page but not on your actual blog, give it a day!  Thanks to everyone who kept me updated with their progress!  I'm loving all the great Favicons!

I would love to see the Favicon's you come up with!  And if you want help creating a Favicon, shoot me an email.  I charge $10 for the creation and installation!

12 comments:

  1. whoa! this is great! thanks for sharing the info

    ReplyDelete
  2. This comment has been removed by the author.

    ReplyDelete
  3. A mystery to solve. Everything loaded up as it was supposed to and shows in the "favicon" spot above my nav bar. It just doesn't show in the menu bar yet. hmmm.
    Thanks for the tute, Kim!
    xoxo
    Donna

    ReplyDelete
  4. Grrrr I've been trying to get this to work for over an hour. I got through most of it...except where to put it in blogger. I don't have a "favicon" option. or is that an html input?

    ReplyDelete
  5. Fabulous! I've been wanting to do this for awhile now. :) Thanks for the tute!

    ReplyDelete
  6. Carolyn - You missed the part about logging into Blogger in Draft - the regular design page does not have the Favicon option. You have to login via http://draft.blogger.com/home and click on the Design tab.

    ReplyDelete
  7. Thanks for the tutorial. I did everything and it shows in blogger design, but when I visit my blog it won't show! What's wrong? I use firefox, is that wrong?

    ReplyDelete
  8. I am having the same problem as comment #7, also using firefox. weird. but thank you for the easy to follow information!

    ReplyDelete
  9. Mine also isn't showing up and I've checked in Explorer, Firefox and Chrome. Maybe it takes awhile?? Other than that, great tutorial!Thanks, Kim!

    ReplyDelete
  10. It does just take awhile!! Mine is showing up now! Thanks for your concern, Kim!

    ReplyDelete
  11. Just gave this a try and yes, I was already freaking out cuz it wasn't showing up at first, but I am going to be patient and wait that day or two and see then. :) Thanks so much for your tutorials. I am trying to fancy up my blog...it really needs help!!

    ReplyDelete

I love hearing from you!