Adding a Favicon to Your Web Site

I thought I would share a little trick to add a bit of zip to your site. Do you like those little icons on the side of a company or person's web address when you search on the internet? It's alot easier than it looks! Here are the steps to create your own favicon image to your web site.

Creating the Image

1. Create a 16x16 pixel image that you would like through a graphics software.
2. Try to keep your icon simple and clear since it will be very small.
3. Use as few colors as possible. Most browser can display 256 colors, but its best to use the Windows 16 colors.
4. Save this image once you're happy with how it looks.
   

Creating the Icon

1. There are several free favicon generators. I've used http://www.htmlkit.com/services/favicon/ several times with no problem. You upload your image and the site generates the favicon for you.
   
2. Download the generated code.
3. You'll have to probably unzip the file. Remember where you saved your favicon.

Include the icon in your web pages

1. Publish the icon into the root directory of your web site .This is the location IE or Firefox will look for your favicon when a person bookmarks your site.
2. To ensure the browser finds your icon, you need to include the html code the site gives you. This needs to be placed between the beginning and ending 'head' tags. It would be best to place it closer to the ending tag.
3. Save your web page and upload it to your site.
4. If you want to create different icons for different pages, you need to call them something other than favicon.ico. Make sure though, that you keep the suffix of .ico.
5. Link to them in your pages in the same way as you did previously, just changing the href location for the different icons.

If you run into problems there is a wealth of knowledge and help on the internet. Enjoy!

Carol from Firebird Web Designs.