How To Create A Favicon For Your Blogger Blog

Google+ Pinterest LinkedIn Tumblr +

A favicon (favorite icon) is the little icon (picture) that shows up in your browser’s address bar when you visit most sites.  It represents the company, or person, that site is about.

If you started your blog on the Blogger platform, by default you will have the Blogger big orange ‘B’ as your favicon.  However, even if you are still using their free hosting, you can brand your site and make it look much more professional, by changing the appearance of the favicon to your own personal style and/or logo. It doesn’t take but a few minutes, but will keep your blog, that you’ve worked so hard to customize, from screaming, ‘Blogger.’

Note: You may want to download a copy of your template before beginning just in case you make a mistake and need to revert back to it.

  1. Decide what picture or text you want to use as your favicon.  Remember, it will show up tiny, only about 1/8 inch, so to be seen it needs to be something simple.  Think of the Blogger ‘B’, or the Twitter ‘T’, and the Google ‘G’, as examples of simple, yet memorable favicons.  Also look at your list of bookmarks.  Next to each bookmark is that site’s favicon.  This will give you more ideas on what types of favicons are best.
  2. Save the image you want to use in a place you will remember on your hard drive. The image needs to be in GIF, PNG, JPG, BMP, ICO or TIFF file formats and no larger than 1MB.
  3. Go to IconJ.com .  This is site will not only create your favicon in the .ico format, but it will also host it for you, if you’d like. (This is what I suggest, and these instructions are for doing it in this manner.)
  4. Click on the ‘Browse’ button and find the image you want to use on your hard drive.  Either double click it, or click ‘open’.
  5. Select a sharpness level. 
  6. Click on ‘Upload Now’.
  7. Your favicon (.ico file) is now created. To host it yourself you will need to download it to your hard drive and then upload it to your server (host).  Or, you can just copy the code to have it hosted by IconJ.com.
  8. Go to your Blogger Dashboard.
  9. Choose ‘Layout’ for the blog you want to apply the favicon to.
  10. Click on the ‘Edit HTML’ tab.
  11. Search for the line in your HTML that says:
  12. Paste the code you copied from IconJ.com just ABOVE this line.
  13. Preview your blog and your new favicon should appear.
  14. If everything previews correctly, click ‘Save Template’.
Share.

About Author

Leave A Reply