Favicon

A favicon (short for favorites icon), also known as a shortcut icon, website icon, URL icon, or bookmark icon is a 16×16 or 32×32 pixel square icon associated with a particular website or web page. If you look at your browser information header for this site you will see a tiny black square with a section of a purple cats eye in it. That is my favicon for this site... it matches with the cyberphysics favicon above.

It is your mini-logo - it appears on your browser page next to the site name each time you visit the site and if you have saved the link on your bookmarks tool bar it serves as a visual cue to the site you want to visit.

All of the main browsers support a 16x16 .ico as your favicon - some support the 32x32 - but you want all browsers to see your icon - so I suggest you put a 16x16 one up..

It is very easy to add one to your site. Most web browsers do not require any HTML to retrieve a favicon that is named as below located in the web site's root.You therefore just have to save the 'favicon.ico' in the same place as your index.html file.

If you look at the designs above you can see they have to be very simple. The design area is a 16x16 square grid - you are limited.

There is a really good free site that allows you to upload images that you wish to be changed into icons. Click here to open it.

Under the grid is an button that allows you to upload an image to the grid - you can then adjust it using the on screen tools.

Design a simple square logo with whatever art package you wish to be your favicon.

Click 'choose file', browse your hard drive for the graphics file you want to make into a favicon, then press go and it will appear on the screen.

It will look odd because it is pixilated to a 16 x 16 size - but when seen in miniature it will have a different effect on your eye.

Now download the icon. You can then put it in your web site folder at the same level as index.html

If you want a more sophisticated icon try using this site. It allows you to produce 64 x 64 pixel icons and it really is easy to use :)