A favicon is a tiny image, most often of size 16×16, that is the logo of a webpage. Most webservers rely on the favicon having the conventional name favicon.ico and being in the ICO format.

What follows is a short summary of Stefan Konarski’s blog article.

The necessary steps to create a favicon with Gimp depend on whether or not your Gimp can save directly to the ICO format. The following instructions have been tested with Gimp 2.8. In earlier versions of Gimp you would rather need to Save an image instead of Exporting it.

With ICO support

  1. Draw/copy/… an image of size 16×16 pixels.
  2. Select File -> Export… -> <target-path>/favicon.ico. Most webservers rely on the favicon having the conventional name favicon.ico.
  3. Upload the favicon to your web server’s/homepage’s/template’s root directory.

Without ICO support

For this, you need the tool ppmtowinicion that is part of the netpbm package on Ubuntu.ß

  1. Draw/copy/… an image of size 16×16 pixels.
  2. Select File -> Export… -> <target-path>/favicon.pnm.
  3. As encoding, choose Raw (not ASCII).
  4. Go to the directory containing favicon.pnm and execute:
    ppmtowinicon -output favicon.ico favicon.pnm
  5. Upload the favicon to your web server’s/homepage’s/template’s root directory.

Referencing the favicon

Add the following line to the <head> of your HTML site:

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

 

References

  • [1] Original blog post (German)
  • [2] ICO (file format) in Wikipedia(EN)