- Resetting the Gnome panels to default in Ubuntu 9.10
- Fixing the Speakerphone on the 2.07.401.1 HTC Touch Pro 2 ROM
- Using the Windows driver for the RTL8187SE on Ubuntu 9.10
- Scanlines in Inkscape
- Installing fonts on Ubuntu 9.10
- Enabling surround sound on Ubuntu 9.10
View More
Creating a favicon from a PNG image using icotools on Linux
A favourites icon, or favicon, is a small icon which is associated with a particular website. Most modern browsers will display this icon in the title bar and address bar, the bookmarks menu, on tabs and in other suitable locations.
Favicons were first used in Microsoft Internet Explorer 5, which only supported the Microsoft Icon File format. Other browsers have since added support for different formats, but to ensure maximum compatibility you should still use the Microsoft Icon File format. This guide explains how to create a suitable icon file from a PNG image.
Converting the PNG to the Microsoft Icon File format
Start by installing "icotools" with your favourite package manager. This will install several tools for working with Microsoft icons and cursors. The tool we will be using is called "icotool".
Next create the PNG version of the icon. It should be 16x16 pixels and be as clear and simple as possible. You can also create 32x32 and 64x64 pixel versions to be stored in the same icon file, although this will increase the final file size.
Open a terminal and navigate to the directory your PNG files are stored in. You can then use the following command syntax to create an icon. The "-c" tells icotool to create the icon and the "-o" specifies the output file.
icotool -c -o favicon.ico mylogo16.png
If you created several differently sized versions then you can use the following syntax:
icotool -c -o favicon.ico mylogo16.png mylogo32.png mylogo64.png
Attaching the icon to your site
The actual implementation for favourites icons varies between browsers. In some situations the browser will automatically check for the file in the root directory of the site, but in other cases you may need to tell it where to look. The following approach should ensure that your icon works correctly in most of them.
Start by uploading the icon the root level of your website. It must be called "favicon.ico".
Next, add the following tag to your websites <head> section. This version should validate as XHTML 1.0.
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
The icon should know display in compatible browsers.