When you visit many websites you will see a special logo icon in the URL Navigation bar and if you make a bookmark shortcut to the website you will see that same icon used next to the description in the menu. If you drag the url bar to your desktop a larger icon will represent the website that the shortcut links to.
So, how do you make these images and include them within your HTML so you visitors can quickly identify your website in their menus?
Making Your favicon.ico File
First you need to make a 32×32 pixel image that represents your logo.
This image will be automatically scaled to the smaller size used in your menus and on your desktop for your shortcut icons.
Because the image will be very small it is important to keep it simple.
You can draw the picture in your favorite image processing program. GIMP will allow you to save the file in a .ico format but if your software does not support that format you should look for an online resource to convert your image.
Sites like http://www.favicon.cc/ provide the ability to convert your image and they also allow you to draw your image with their paint tool.
You can convert most major file types including jpg, gif, png, bmp to ico format.
Remeber when you save in jpeg format you will lose detail in the saving process.
Animation
Animation is another feature you may want to use in your favicon file.
Animated Icon Files are not really .ico files they are Gif files that are renamed to the .ico extension.
For this reason their use can not be considered reliable in all browsers and all operating systems but for the most part they will work.
To make an animated Gif file you will need software that can place many layers of individual frames in the single image file.
Animated Gif Files allow you to change the rate at which the animation plays. Default is one second per frame but you can adjust that as you want.
Placing the HTML on your pages
To include the favicon.ico file in your html so your visitor’s browser will download and show it you need to link to the image file in your html <header> selector area.
use the following link format
<link rel="shortcut icon" href="http://www.mysite.com/directory/favicon.ico" />
remember if you are using an animated gif file you need to rename it from favicon.gif to favicon.ico
Final Note
Designing a good looking icon logo can be difficult. You need to be unique so your icon stand out against others and you need the image to be scalable so it will look good in the URL bar of the browser and also on your visitors desktop if they make a shortcut.
Many themes and website templates come with favicon files and there are a number of sites that provide galleries for you to choose from.
Never use a favicon from another persons or companies website It will not only make you look bad but it may confuse your visitor when they try to find your site in their bookmark listings.
