A WHAT? A favorite icon or favicon is the little 16px square image that shows up next to your URL address in a web browser, on the browser tab marking your site and next to your site in someone’s favorites list. If you don’t have one you’re missing out on a great branding opportunity. Dragon Blogger supports my position:

Sometimes when I click on my bookmarks, all I need to see is the Favicon to know what I want to click on, I don’t even need to read the bookmark title.

I know, I know - how much can you do in 16px and how do you even work in such a small area?

I use a free tool called favicon.cc  I created my wylisa favicon using favicon.cc.

You can search for and download a favicon published under a creative commons license or use the favicon creator to make your own.  The creator allows you to create a freehand favicon or upload an image which is then converted into a favicon.

Check out this little demo:

The favicon.cc favicon above provides a link to their site if you care to check it out.

Once you create and download your favicon simply upload it to your site, either at the top level of your domain directory or your image files and insert the following code in between your <header> </header> code, (the code often exists in the header of sites built with a generator like Wordpress):

<link rel=“icon” href=“http://www.YOURSITE.com/favicon.ico” type=“images/x-icon” />

If you upload your favicon to a level other then your root (or top level) directory make sure you reference the folder before the text “favicon.ico”  for example:  <link rel=“icon” href=“http://www.YOURSITE.com/images/favicon.ico” type=“images/x-icon” />