All About Favicons

Published Jan 28, 2009

Y'know those small images that appear in your web browser's address bar as you move from site to site? Or that appear in your list of favourites or bookmarks next to each site?

Those are Favicons, short for Favourites Icons. They are a great way to help users see at a glance what site is open in their browser, especially if they have several tabs open at once.

How do I create one?

A favicon is simply a 16 x 16 pixel square image.

Typically the icon is a representation of your organization's logo or letters of its name or colour scheme. The image below shows some examples open in separate tabs in the Firefox browser.

You can create one from scratch using your favourite image editing program (or asking your graphic designer for a favour), or you can use one of several online tools to create one for you.

These two tools generate icons from images you upload:

http://www.favicongenerator.com/

http://www.html-kit.com/favicon/

The following tool generates an icon from text you type (great for organizations without a logo, or one that doesn't reproduce well in the small size of an icon):

http://antifavicon.com/

The image can be in any format supported that a web browser can display, such as GIF, PNG and JPEG.

How do I add one to my website?

Once you have an icon image, save it to a location on your web server. Traditionally the file was named "favicon.ico" and saved in the root folder. However, the latest browsers support alternate locations and file names.

If you choose to name your file favicon.ico, note that the image format may still be a PNG, GIF, JPEG, etc.; it's only the extension that is changed to ".ico".

To include the icon in your website, edit the pages to add one of the following lines to the <head> section:

Either

where type is the image type (e.g. png, jpg, gif, etc.) and href points to the image location on your web server.

Note that the first link tag example does not conform to W3C recommendations, so the second example is preferred.

How do I add one to my Inmagic WebPublisher PRO pages?

If you have used the Andornot Starter Kit to publish your textbase online, you may be able to simply edit the file "\layout\include\HeadTag.htm" to add the above line to the <head> section of most pages served by WebPublisher PRO. You may also need to edit your search pages. It all depends on how your site is configured.