While surfing the internet you may have noticed a small graphic, or icon, lurking in your browser address bar or hiding among your bookmarked favourites. Occasionally it differs from the standard graphic generated by your browser and appears to relate to websites you have visited. It's the 'favicon.ico' and it seems to serve little purpose other than leaving users bemused and wondering 'How did that get there?'

How Did It Get There?

The favicon.ico was first seen following the release of Internet Explorer 5.0 and it was intended to be displayed whenever a user decided to bookmark a website or add it to their 'favourites' list. The browser would attempt to look for a file called favicon.ico and associate it with the website URL¹ information that was to be stored in the favourite's folder. In order to find it, the browser would first look in the directory of the webpage the user was attempting to bookmark and if it couldn't be located it would then look in the root directory of the web server. If it still couldn't be found, the browser would simply substitute a default graphic² to be used instead.

Despite subsequent releases of Internet Explorer and the introduction of alternative browser versions, many website owners and designers³ still omit to provide the favicon.ico. The default graphic becomes the norm and often leads to an element of surprise when a favicon.ico 'randomly' appears. An example of the favicon.ico can be seen here at h2g2 where the BBC graphic is shown.

I Have My Own Website. Do I need a Favicon.ico?

Well, yes and no. To visitors of your site, nothing will appear any different to their normal browsing operation if they attempt to bookmark your page. They will not receive any error messages, browser hangs or other nasty results, but there are a number of reasons why you should consider adding the tiny file. Firstly, your site will appear just that little more professional and will mark you as a web-designer that cares about detail. Secondly, your server error logs will not be filled with messages stating that the file does not exist each time the browser requests it. More importantly, if you have created any custom error pages, your server will be pumping them out at a rapid rate of knots each time the request is made. Making sure that this little fellow is sitting on your server can save you some precious bandwidth.

Historically, it was possible to identify the number of users that had bookmarked your site by simply looking at the server logs and counting the number of requests for the file. All current browser versions including Internet Explorer, Netscape, Mozilla and Opera now attempt to load the file whenever a visit to your site is made, so the log count is no longer accurate. It's a shame, but that's progress.

So How Do I Get One?

There are various websites, both commercial and independent, dedicated to the favicon.ico. A simple search will yield results and present you with icons to use, often for free. A far more satisfying solution is to create your own. Not only will you feel proud of your achievement, but you can create a design that matches your website and continues the website theme.

One thing to remember is that the file is tiny⁴; that's a good thing as far as server space goes, but the displayed result is also miniscule. Be under no illusions, you will not be creating a work of art. Four formats are generally permissible, but the smallest and simplest is your best bet.

• 16X16 Pixels 16 Colour
• 16X16 Pixels 256 Colour
• 32X32 Pixels 16 Colour
• 32X32 Pixels 256 Colour

The 32X32 formats will be scaled by the browser and displayed as 16X16 for the address bar and favourites menu. They will only be displayed full size if a user opens a folder set to handle large icons so it's often not worth the extra effort of producing the bigger size. By limiting yourself to 16 colours you will also ensure compatibility across browsers and operating systems. Most graphics packages should be more than capable of producing the required format - it is even possible with Microsoft Paint.

Some website designers have begun experimenting with animated icons and they are now becoming increasingly common. Only a few browsers currently support this format but it is likely that other browsers will provide this new feature in the foreseeable future although some users report annoyance at the distraction caused by the animation.

Once you have produced the file, save it as 'favicon' with an extension of 'ico' and upload it to your server. If your host does not permit ico files to be uploaded there is a possible workaround. Try uploading the file with a gif or jpg extension and then using your FTP⁵ client to rename the file once it is sitting on the server. If access to the server root directory is prohibited it will be necessary to include the file in each directory folder or provide a link to the file in the page HTML⁶. This can be achieved by using the following code between the <head> and </head> tags, remembering to replace the website name and path with details relevant to your website.

When done, view your site and bookmark the page, checking that the icon appears in your favourites list and in the address bar when recalled. If you make later changes to the ico file, clearing your browser cache⁷ may be necessary in order to view the updated icon.

You can now sit back, pour yourself a drink and watch your visitors come flooding in, safe in the knowledge that you've done a really professional job with your website.