As part of establishing your “brand” as a blogger (or marketer, business or commercial website) you need to pay special attention to the consistency in which you present your image. This includes what people see in the tab of their browser when they are on your site.

The “FAVICON” or Fave Icon if you’re a human, helps identify your site in the URL and in a tab. Originally Favicons appeared on the bookmark menu when you “favorited” a site. (Thus the name)

To make a favicon there are several methods and tutorials you can use.

If you already have an image or logo that would look ok at 16x16 pixels:

(Example)

Use these online tools to create your favicon out of an image

http://www.html-kit.com/favicon/ *note, this tool also uses your twitter icon if you’d prefer.

http://tools.dynamicdrive.com/favicon/

You’ll notice your file becomes a “.ico” file. This is an “icon” file that IE requires in order to display the icon correctly in the toolbar and bookmarks menu.

You can also DOWNLOAD A PHOTOSHOP PLUGIN to create your own favicon.ico (Be sure you save it with that file name. You know how IE is when you don’t do what it needs.)

Be sure you size it at 16px x 16px
*Note: You can also save it as a 32px x 32px icon for bookmarking purposes. This will automatically get scaled to 16x16 for the URL bar.
*This is the method I used on my site.

If you don’t already have an image

You can use some online tools to create a new favicon.ico:

http://www.degraeve.com/favicon/

Or you can download some of the ready made ones.

http://www.freefavicon.com/

http://www.loreleiweb.com/faviconz.htm

Placing the Faveicon.ico on your server.

Use your FTP program to place the image on the root level of your domain. (Example: http://blogher.com/ or http://mrsflinger.com”)

You’ll be able to acess it by going to http://yourdomain.com/favicon.ico

*Yes, it is possible to put the image elsewhere on the server like some Wordpress Themes do. However, browsers don’t always recognize this method so for consistency, it’s best to place your icon at the root.

Placing the Faveicon.ico on your server.

Place this code between the

tag in your header template.

<link rel="icon" href="/favicon.ico" type="image/x-icon">

If you want to use a GIF or PNG instead, use this format instead (just remember that it won’t work in IE):

<link rel="icon" href="/favicon.png" type="image/png">

<link rel="icon" href="/favicon.gif" type="image/gif">

And VIOLA!