How to add a Favicon

You ask what is a favicon? A favicon (short for favorites icon) is a 16×16 or 32×32 pixel square icon associated with a particular website or webpage. Browsers that provide favicon support typically display a page’s favicon in the browser’s address bar and next to the page’s name in a list of bookmarks. If you look at the image below you will see exactly where the favicon is visible:

  1. First you need to make your icon. You can use MS Paint, Paint Shop Pro or Photoshop or any other graphics program you have.
  2. I think the best results you have are from squares. So draw a square and then add detail to it (a letter and/or image). Make sure there is not a lot of detail because this is going to be shrunk down to 16 x 16 or 32 x 32 pixels which is not very big.
  3. Save it to your computer.
  4. There are many sites out there which allow you to create your own but one of my favorites to give customers is this one: ICONJ.
  5. Load your favicon up to their site and click on SHARPEN +3
  6. Once you have uploaded your image you will get a page with this type of image on it:
  7. In another tab open up your blogger dashboard and click on design/edit HTML
  8. Click on ctrl + F to find this part of your code: < /head > (remove the spaces before and after the < >.
  9. Right BEFORE the < /head > paste the code in the box under this heading Host It at IconJ.com: (Direct Link)

I hope you found this tutorial helpful. If you have any questions or you need help please do not hesitate to contact me.

Comments

  1. Thanks so much! This tutorial was very helpful and easy to understand! It worked on my very first try.

  2. FINALLY A FAVICON THAT WORKS!!! I’ve tried countless turtorials and none of them EVER work! This one finally did! Yipee!!! Thank you!!

  3. I really love this tutorial, it was easy to do and understand, but when I pasted it, it did not work, could you help me?

  4. Yay, I got a little dumb on this one and it took me longer than I would have liked to figure it out. But, I did it. In the end the biggest kicker is that I have done this stuff before. I just don’t remember how to do it for one. And for another… I swear this coding has changed!

  5. I had this bookmarked from a while ago..and just used it. IT is so easy and well, just wonderful. Thanks!

Trackbacks

  1. […] created this for me as a thank you for being one of her newsletter subscribers. She also wrote a do-it-yourself tutorial for those who would like to make one for […]

Leave a Reply to Photos, Favicons, & Blog Awards | Create With Joy Cancel reply

*