Adding a favicon

Graphics improve the quality of a website. A favicon is an image that is displayed at left in the field of the URL of the currently displayed webpage and also at left of the name of a website in the bookmarks panel.
It is a graphic file, 16 X 16 pixels, with the ICO file format of Windows, but other size and format may be used too with modern browsers.

Creating a favicon

To create a favicon, I use:

The Paint utility provided with Windows (any other drawing package can be appropriate).
The image is saved with BMP or GIF format.
I then use XnView to convert it in the ICO format.

Using an online service

These services propose you to create the favicon starting from a text which you type, or from an image present on your hard disk, which is then reduced to the desired size.

Antifavicon. Defining a favicon online from a text.
HTML-kit, creating online a favicon by reduction of an image which you provide.
Drive Dynamic, uses also an image.
Degraeve Favicon Generator. The image above has been uploaded on this site.
Favicon.cc. Online drawing tool.

Using the favicon

It is enough to place the icon at the root of the Web site, into the www sub-directory if it does exists, so that it is displayed automatically in the URL bar, and it will also automatically appear in bookmarks when the site is selected.

Some browser are not able to recognize the existence of a favicon? Try to add the following line into the HEAD section of the HTML code:

<link rel="shortcut icon" type="image/x-icon" href="http://www.scriptol.com/favicon.ico" />

Remplace scriptol.com by the domain name of your website.

Other formats

New browsers can recognize the GIF or PNG formats. But a special tag has to be added into the HEAD section:

<link rel="icon" type="image/gif" href="http://www.scriptol.com/favicon.gif" />

and for the PNG format:

<link rel="icon" type="image/png" href="http://www.scriptol.com/favicon.png" />

Here also, replace scriptol.com by your domain name.