A favicon is a small icon that can be shown in the address bar, or in the list of favorites. This image is generally a small visual clue as to which site it belongs to. For this site it is the star symbol which is also used for links and posts.

A favicon is an image 16px high and 16 pixels wide.

How to use

Depending on which browsers you are targetting you can either place a favicon.ico file in the root directory and or place both the following tags in the head of all your html documents.

<link rel="icon" href="http://www.yourdomain.com/favicon.ico" />
<link rel="shortcut icon" href="http://www.yourdomain.com/favicon.ico" />

Note that it is not needed to use ‘favicon.ico’ this might as well be ‘/images/icons/myicon.gif’.

History

In IE 5 the favicon was first introduced. When someone would bookmark a site, they could see the favicon in the list of favorites before the name of the site. This actually gave some interesting statistics to the webmasters. By checking how often the favicon.ico was requested they knew how many people were bookmarking the site. Since newer browsers use the favicon more often than just with bookmarking this doesn’t work anymore.

.ico

When the favicon was introduced it was decided (by IE) that it should always be in the root of a site and be named favicon.ico. However, this conflicts with the architecture of the world wide web. It is not allowed to reserve a URI for a specific function.

Also, the .ico format is what windows also uses for the icons in the taskbar and such. And, an .ico file excists of a few different images in different resolutions and sizes. So a special program is needed to make one. Newer browsers (such as opera and firefox) decided to not only allow .ico files for the favicons but also .gif and .png.

Photoshop and .ico

It is possible to make an .ico file with photoshop by downloading the plugin from Telegraphics. Copy the “ICOFormat.8bi” file into the “File Formats” folder inside your Photoshop Plugins folder. (C:\Program Files\Adobe\Photoshop 7.0\Plug-Ins\File Formats). This way you save images as .ico

Related posts

No related posts.

This entry was posted on Saturday, February 11th, 2006 at 8:28 by Sonja Duijvesteijn and is filed under Webdevelopment. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.