Create your own Blogger Favicon

Just figured out how to create and upload my own favicon.  For those of you who aren't familiar with the term, it's the tiny "logo" that appears next to the address in your web browser window. 

Here's my new one.  Pretty simple, but it fits with the new web theme that I have going on.

Follow the steps below to create your own.

1) Open a new document in Photoshop, Illustrator (or whatever design program you use.)  I created a document that was 130 pixels x 130 pixels at 72 dpi.

2) Create your favicon to fit within those dimensions.

3) Save it as a JPG

4) Go to http://www.iconj.com/ 

5) Create a free account at IconJ - this site will convert your JPG, GIF or PNG to the ICO format and host the graphic for free.

6) Upload your JPG - just as you would upload photos to Flickr or Photobucket and save.

7) Click on "My Account" in IconJ

8) Under "Account Profile" click on "My Favicon Code"

9) Copy the code in the "My Dynamic Favicon Code:" box

10) Login to your blogger account

11) Click "Layout"; on the Layout tab, click "Edit HTML"

12) You will want to place the code that you copied from IconJ directly above the closing of your blogger header.  You can quickly locate this by pressing Ctrl-F and typing "/head" into the search box (without the quotation marks).  This will highlight the closing header code in your blog's html.

13) Paste the IconJ code into the html box directly above this line.

14) Save your Template

15) Open your blog in a new window, and your new Favicon should appear.

Good luck!