How to Add a Favorite Icon to my Web Site

If you own a website, it's interesting to associate an icon to it. This is what is called a "shortcut icon". In fact, this icon will be displayed on the visitor's computer if he chooses to bookmark your site. It will be displayed in the Favorites menu as well as in the Address bar (see below) if the user comes back to your site.

Shortcut icons work with Microsoft® Internet Explorer® v5.0 or later. They have no special Web server requirements and are a great way to add brand recognition without requiring the user to download a custom version of Internet Explorer®.

Create the Correct Icon Formats

First you must create your icon. You can either start from scratch or create an icon from an existing image (your company's logo for example).

We recommend you to include these image formats in order to be compatible with all visitor configurations: 16x16 256 colors, 16x16 16 colors. You can optionally add 16x16 Windows® XP.

Make sure to create an icon that is at least 16x16 pixels. Otherwise, the icon will be ignored by Internet Explorer.

Saving Your Icon To your Local Hard Disk

1. When you've finished creating your icon, choose File/Save or Ctrl+S...

2. The save dialog box opens, select a specific location, then specify favicon.ico as your icon filename. This is important to name it "favicon.ico". If you use a different filename, it will not be considered as a Shortcut Icon.Uploading it to your Web Site

3. Launch your FTP client (or any program) you use to upload/update your files to your web site. Connect to your website.

4. When you're connected, upload your file to the root folder of your HTML pages (where is located your home page html file). You must keep the "favicon.ico" filename unchanged during the upload.

Associating the Icon with a Web Page

You can also associate the icon with a Web page by saving the icon with a file name other than favicon.ico and adding a line of HTML code in the head section of your Web document. The line of code includes a link tag that specifies the location and name of the file. You can include this link tag on a per-page basis.

<HEAD>
<LINK REL="SHORTCUT ICON" HREF="http://www.domain.com/iconname.ico">
<TITLE>Page Title</TITLE>
</HEAD>
 

My Icon is ignored, Why?

First, check that it meets the Internet Explorer® requirements (see above). If this is the case, keep in mind that the only way a shortcut icon appears on a user's Favorites menu and Address bar is if the user chooses to add your page as a favorite. You can add a button or link on your page that prompts the user to add your page. Use the following code to test with this feature:

<SCRIPT>
<!--
if ((navigator.appVersion.indexOf("MSIE") > 0)
&& (parseInt(navigator.appVersion) >= 4)) {
   var sText = "<U><SPAN STYLE='color:blue;cursor:hand;'";
   sText += "onclick='window.external.AddFavorite(location.href,";
   sText += "document.title);'>Add this page to your favorites</SPAN></U>";
   document.write(sText);
}
//-->
</SCRIPT>