While surfing the Internet you may have noticed a small graphic or icon lurking next to the URL¹ 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 favourites 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 locate 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 often still fail to provide the favicon.ico³. The default substitute graphic is therefore the norm, and when a favicon.ico 'randomly' appears, it's surprising. An example of the favicon.ico can be seen on h2g2, where the distinctive site logo appears in the address bar.

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

Well, yes and no. If you don't have one, nothing will appear any different to site-visitors 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 bit more professional and it will mark you out as a web designer who cares about details. 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 each time the request is made and the icon cannot be found. 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. However, all current browser versions including Internet Explorer, Netscape, Mozilla and Opera now attempt to load the file into the address bar whenever someone visits your site, 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. However, it is a far more satisfying solution 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's 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 minuscule. 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 in 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 rarely worth the extra effort of producing the bigger size. By limiting yourself to 16 colours you will also ensure compatibility across all 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 becoming increasingly common. Only a few browsers currently support this format, but it is likely to become more widespread in the foreseeable future, though some users find the animation distracting and annoying.

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 you are not permitted access to the server root, you will have to include the file in each directory folder or provide a link to the file in the page HTML⁶. You can achieve this by using the following code between the <head> and </head> tags; remember 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, you may have to clear your browser cache⁷ 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 put the final professional touch on your website.

---

¹ Uniform Resource Locater; The address of a resource or page on the web, usually beginning http://
² The graphic usually emulates the browser's corporate theme.
³ If you have had a website professionally designed and your logo doesn't appear as the favicon.ico, it's time to ask the designer some questions.
⁴ Typically less than 1Kb.
⁵ File Transfer Protocol - an industry standard method of transferring files from client to host - ie, from your computer to the web server.
⁶ Hyper Text Mark-up Language; The language (or code) making up web pages and interpreted by browsers to display the page as designers intended.
⁷ Clearing the cache will also delete any favicon.icos associated with other bookmarked websites.