How To Create A Favicon For Your Blogger Blog

Posted Dec 20, 2008 by amh615 / comments 3 comments / Print / Font Size Decrease font size Increase font size

A favicon represents your site. By default Blogger uses a big orange B. To give your blog a more professional appearance, you can change the favicon to your own personal logo.

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'.
Rate this Article:

Be the first to rate me.


* You must be logged in order to leave comments, please login or join us.

Comments

PamelaR
PamelaR said... on January 12th, 2009 at 8:22 PM

Great instructions, I’m going to give it a try!

kimmi9371
kimmi9371 said... on December 21st, 2008 at 5:56 AM
Score: 1 You have voted for this comment already. You have voted for this comment already.

I had changed a couple of mine many months ago and actually forgot how I did it.  I was glad to see your article so I could go change the rest of mine.

Jenny
Jenny said... on December 21st, 2008 at 4:58 AM
Score: 1 You have voted for this comment already. You have voted for this comment already.

I have always wanted to know how people changed those!! I love it! Thanks! I can’t wait to start working on my own! Great article, very thorough and well written, thanks!



Bookmark and Share
Sign up for our email newsletter
Name:
Email: