Step by step guide to making and installing your own favicon

A favicon is that little icon that appears next to the items in your favorites list (the name is short for favorites icon), the browser address bar, and a few other places. It is an easy way to make your site stand out and look more professional.

Bookmark (add to your favorites) http://yarntree.com and you will see the favicon of a Y in a yellow box. If you bookmark http://needleworkretailer.com, you will see our favicon is an N in a blue box.

Making a favicon is just like charting cross stitch. The most common favicon (and the one you want to make) is 16 pixels square. For a reason unknown to me, a favicon is NOT a .jpg or .gif format. You need a special program to make the file. Since you only need one favicon for your site, the easiest way is to use one of the free online sites that let you design and download the favicon file.

Step 1. Create the favicon

http://www.favicon.cc has an easy to use online program to graph your own favicon. A Google search will find other sites.

Step 2. Name the favicon file

This is easy. The name should be:  favicon.ico   It is possible to use another name, but doing so requires additional steps and more work.

Step 3. Install on your web site

Load the favicon.ico file in the top level of your website (the same level as your main page).

 

You may need to clear the cache of your browser to make your new favicon display. Favicons can be a little quirky. Sometimes they disappear, only to reappear later. Some browsers may not display them. Wikipedia has additional information.