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 file formats may be used too with modern browsers.

favicon online editing

Creating a favicon

To create a favicon on the desktop:

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

With Gimp, you can save the image directly to 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.

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 added.

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.example.com/favicon.ico" /> 

Replace example.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.example.com/favicon.gif" />

and for the PNG format:

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

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