Favicon Presentation

Thanks to all who attended last night. Here is a summary as requested.

Favicon

A favicon is a small icon associated with a web site. It is used by browsers for bookmarks, minimized windows, location/address boxes, and desktop links. A favicon adds an extra visual experience to a web site that makes it look that much more professional.
Web site icon (favicon.ico)

A favicon is a small icon image that may be used by the browser visiting your site. It is declared in the head section of a page. Some browsers such as IE may send a request for this image in the root or highest folder even if it is not declared. To declare a favicon image put the following code in the head section of a web page.
<link rel="ICON" type="image/x-icon" href="favicon.ico" />
<link rel="SHORTCUT ICON" type="image/x-icon" href="favicon.ico" />
The SHORTCUT ICON declaration is all that is required but the ICON declaration is recommended. The type attribute may change depending on the image format of the favicon.

A favicon is a 16x16 pixel image. The information below covers the various file formats that can be used.

ICO file format

The favicon was introduced with Internet Explorer. It suggested the ico format for these images. It is a proprietary format used by Microsoft for icons in applications and web pages. This format has the capability of handling more then one size. The standard 16x16 pixels at 4bpp colour depth should be there. A 32x32 at 4bpp and 48x48 at 8bpp can be included to give more versatility. The web browser then has the option of selecting the image size that it thinks is appropriate to the situation. The ICO format can handle full transparency but not partial transparency.

The ico favicon can be declared in the head section of a file with the following. The x-icon type is an older declaration used before a formal mime type was decided for the ico format. The vnd.microsoft.icon is the standard mime type. It is recognized by most browsers today.
<link rel="ICON" type="image/x-icon" href="favicon.ico" />
<link rel="SHORTCUT ICON" type="image/x-icon" href="favicon.ico" />
or
<link rel="ICON" type="image/vnd.microsoft.icon" href="favicon.ico" />
<link rel="SHORTCUT ICON" type="image/vnd.microsoft.icon" href="favicon.ico" />

-The Gimp can save in the ico file format. The 16x16, 32x32, 48x48, 64x64, and 128x128 pixel sizes go on separate layers. The colour depth is selected for each layer when saving the file.
-icoutils is available on unix based platforms. It can convert png files into ico files. A sample of the command is below.
icotool --create --output=favicon.ico img_16x16.png img_32x32.png
icotool -c -o favicon.ico img_16x16.png img_32x32.png
-The NetPBM program provides ppmtowinicon. It can convert a PNM or PPM image of appropriate size into a ico file format.
ppmtowinicon -output favicon.ico favicon_16x16.pnm favicon_32x32.pnm
ppmtowinicon -output favicon.ico favicon_16x16.ppm favicon_32x32.ppm
-The png2ico program is a command line program available on Unix and windows systems.
png2ico favicon.ico logo16x16.png logo32x32.png
-ImageMagick can convert png images into ico favicons with the command
convert favicon.png -resize 16x16 favicon.ico
-PhotoShop requires a plugin to handle the ico format. Here are a couple telegraphics, sibcode.

PNG file Format

The PNG-format is considered to be the standard format for favicons by the w3.org standards group.

The png favicon can be declared in the head section of a file with the following. The format is declared with the type and the name is favicon.ico because browsers search for that name in the root folder.
<link rel="ICON" type="image/png" href="favicon.ico" />
<link rel="SHORTCUT ICON" type="image/png" href="favicon.ico" />

GIF file Format

This format can be used to provide animated favicon. There are many tools that can be used to make animated gif images. The main requirement is that the images are 16x16 pixels.

The gif favicon can be declared in the head section of a file with the following. The format is declared with the type and the name is favicon.ico because browsers search for that name in the root folder.
<link rel="ICON" type="image/gif" href="favicon.ico" />
<link rel="SHORTCUT ICON" type="image/gif" href="favicon.ico" />

Excellent Chris! Well Done.

Paul Rochford
Organizer