15.1. How to implement a favourites icon (favicon.ico)

Would you like to use a custom icon to appear in the URL address field at the top of the IE window when people are at your site? This is a “favicon”, a favourites icon, that small icon that you see besides the URL when you visit some cool sites. This “functionality” was introduced by the Internet Explorer. When you add a site to your Favourites list, Internet Explorer (version 5 and above) asks the server if it has a file called favicon.ico. If present, this file will be used to provide an icon that is displayed next to the bookmark text. It is not visible in the old browsers, but newer ones, like Mozilla and Konqueror, will also display it.

To display a favicon, you have first to create one. The icon has to be in the ICO format which, contrary to common belief, is NOT the same as GIF, or PNG. You have to transform your GIF or PNG file to ICO format. For Windows, you can use one of the numerous icon tools (Section 14.7). For Linux, simply create a 16x16 PNG file and convert it to an icon resource with png2ico.

Upload the ICO file to, say, images/favicon.ico. Then add the following lines in the includes/my_header.php file, somewhere between the “<?php” and “?>” tags:

echo "<link rel=\"icon\" href=\"images/favicon.ico\" type=\"image/x-icon\">";
echo “<link rel=\"shortcut icon\" href=\"images/favicon.ico\" type=\"image/x-icon\">”;

NoteNote:
 

If you did the above and your browser still does not show the icon, remember that it may be using an old cache. Empty the cache and remember that even with a new cache, the browser may be using some old information, so you will have to be patient, or check it with a browser that did not visit that URL before.

For more information on how to create and use a favicon, see How To Create And Install A favicon.ico.