Favicon HOWTO

Disclaimer

All Tips and Tricks and HOWTOs on this website are provided as-is for information purposes. Any alterations you make to your system is entirely your own responsibility. Crann Tara cannot be held responsible for any consequential loss or damage to your system caused by using any of the following information.

We strongly suggest you make a backup of your system and/or settings prior to making any adjustments.

All trademarks mentioned are owned by their owners and their use, on this website, does not affect their validity. The use of brand names, trademarks or website names should not be seen as an endorsement or criticism.

Introduction

A favicon1, "Favourites Icon", is the small graphic displayed in the address bar and tab of most modern internet browsers which is used to aid user recognition of a particular website or webpage. It is also common for browsers to use the favicon in the bookmarks section for the same reason. The screenshot below shows the, simple but very effective, favicon used by the main British Broadcasting Corporation (BBC) website.

The BBC favicon has a simple black rectangle with white lettering and the rest of the area is transparent. The transparent area is useful when it is placed on top of different coloured backgrounds. The BBC favicon looks the same whether it is placed on top of the address bar (white background) or the tab (bluish-grey background) due to the transparency.

Including the favicon on a Webpage

Each individual webpage2 must reference the graphic that you want to use for your favicon. The following block shows the code needed to include the favicon for this page (note - depending on your text size the code may be displayed inside a scroll box , so as not to break the page format):

<head>
<link rel="icon" href="/images/favicon.png" type="image/png" />
</head>

For the sake of brevity other statements in the head section have been omitted. Looking at the code from left to right: firstly it states it is a link, the relationship is an icon, where the link is located and finally it is an image of the type Portable Network Graphics. The graphic can be PNG, GIF (Graphics Interchange Format) or ICO (Icon image file format).

Creating the graphic

The favicon graphic, regardless of the format used, needs to be either 16x16 or 32x32 pixels. There are two approaches to creating the graphic; creating a larger square graphic and then reduce down to the required size or work with final output size. For our simple example we will work with a 16x16 image size.

Start the GIMP
File/New
When creating your new image take note of the Fill colour as that will be your background colour. Alternatively, you could have a transparent background as we noted above. Transparency is useful if your final image doesn't use up the full 16 or 32 pixels square. Tip - if you want to work with transparency choose a coloured background and then hide the layer prior to saving to your output format.
As we have chosen the 16x16 size we will increase the scale to 400% to make viewing easier.
We now use the Text tool to add two letters to our black background. We will use the Text tool twice so we can offset the letters.
We just need to save our image which we will do in two formats. Firstly, we will save to the GIMP default format which has the .xcf extension. Should we decide to make any changes later the XCF format saves all the layers so we don't need to start from the beginning. Secondly, we will save a copy to our intended output format.
- File/Save/favicon.xcf
- File/Save a Copy.../favicon.png
Our finished favicon, ready to use, looks like this:
All that remains is to put the favicon in the images directory on the webserver. Remember, if you have several attempts at creating the favicon you will need to clear the browser cache to see the new version.

Adding transparency

We have created our favicon with the black background. However, lets assume we have now changed our mind and we want to have the non-text area transparent. Luckily, that is easy to achieve in the GIMP. This technique is not restricted for use in favicons but can be used with any type of image. However, only a few image types support transparency and of those GIF and PNG are probably the most common. ICO can also support transparancy but is less useful as a general image format.

Open our favicon.xcf image in the GIMP.
To preserve our previous work lets save this effort under a different filename; File/Save as/favicon-trans.xcf
Previously, we had created multiple layers one layer for the background and one each for the letters C and T. It is not possible to apply the transparency to multiple layers so we need to flatten the image. Select Image/Flatten Image
Add an alpha channel Layer/Transparency/Add Alpha Channel
Now we need to select the colour area to be made transparent (and this is probably easiest to do by increasing the zoom to say 400%). Choose Select/By Colour and then click on the colour (black in our case) to be made transparent. If you do this correctly you should have an image with a moving dotted line indicating the area selected.
Now we want to remove the selected area Edit/Clear
We no longer require the selection area so we clear it by choosing Select/None
As you can see above we now have an image with a transparent background and all that remains is to save it File/Save a copy/favicon.png and upload it to the webserver.

1 The name, and the original concept, came from Internet Explorer™. Bookmarks are called "Favourites" in IE where it was possible to associate an icon and thus the name favicon.

2 Internet Explorer™ is an exception to this rule. There is a non-standard feature in IE where it automatically looks for an ICO file, called "favicon.ico", in the webserver root directory and then displays that favicon for the whole website. Older versions of IE (5.5 and 6) only support this method favicon allocation.

References -
http://www.w3.org/2005/10/howto-favicon

The Firefox logo and Firefox are registered trademarks of the Mozilla Corporation.
Internet Explorer is a registered trademark or Microsoft Corporation.