Many modern websites come with their own favicon, a tiny graphic that sits beside the address on most browsers and helps identify the site quickly in a list of bookmarks. Given the right tools and know-how, any site can have a favicon with a minimal amount of fuss.
What is a Favicon?
The term 'favicon' is a portmanteau of 'favourite' and 'icon'. It comes from the idea of the 'favourites' folder in Internet Explorer, where the icons were originally intended to be displayed. In their earliest form, a favicon was simply an icon, saved under the filename 'favicon.ico', that Internet Explorer looked for in the root directory of any site it visited.
If such a file was found, Internet Explorer displayed it instead of the default 'e' icon. The ability to display favicons has since become a staple feature of the majority of modern browsers.
How to Create a Suitable Image
Although browsers such as Firefox and Opera can display a variety of different file formats as a favicon, Internet Explorer remains unable to display anything but an .ico file; resulting in icons remaining the default format for a favicon. Because the majority of graphics programs do not support the icon file format, creating an icon is a two-stage process.
Firstly, a suitable graphic must be created. Most icons come in two sizes: 16x16 and 32x32 and although it is not necessary to create all three sizes, it is a simple process to do so. Begin by opening a paint programme such as Photoshop or The Gimp (a free Photoshop alternative) and creating a new blank canvas with 32x32 pixel dimensions.
Once this is done, either draw a new icon or cut-and-paste the desired image into the new document and size it to suit. Save the document in .png format. It is important to use one of these formats as the second stage will require a certain type of file for the conversion to Icon format.
Resize the file to 16x16 pixels and save the file again, using a different filename so as not to overwrite the original. This will create the two icon size images that will become part of the single favicon.ico file.
Converting to Icon Format
For the second stage of the process, a conversion tool such as png2ico is required. Download png2ico (it is free software) and place its .exe file in the same directory as the .png files created in step one.
Open the Command Line in Windows (or use sofware such as DosBox on the Mac) and, if necessary, use the 'cd' command to change to the directory where the .png images are stored, then enter the following command:
png2ico favicon.ico image1.png image2.png
The software will then create an icon file containing both images.
Adding the Favicon to a Website
Now that the favicon has been created, it must be uploaded to the root directory of the website. Once this is done, Internet Explorer and most browsers will usually be able to detect the icon once the site has been reloaded. However, to ensure that the icon is always displayed it is important to add two lines of code to the <head> section of the site's index.html file:
<link rel="icon" type="image/vnd.microsoft.icon" href="http://website.address/favicon.ico">
<link rel="SHORTCUT ICON" href="http://website.address/favicon.ico"/>
The first line of code tells non-Microsoft browsers where the find the favicon, while the second line does the same for Internet Explorer.
Enter the address of the favicon as the 'href' and upload the new file. The site will now display the new favicon.
Favicons are an excellent way of quickly and cheaply branding a website with a custom icon. They are easy to create, easy to alter as needed and have become a quick and popular addition to modern web browsing. By following these simple steps, personalised website icons can be added to most websites quickly and easily.
 |
