Jan
14
2009
How to Add a Favorite Icon to Your Web Site
ico.jpgHariesDesign.com - 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 Mozilla Firefox, 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.

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 - 16 colors
  • 16x16 - 256 colors
  • 16x16 - RGBA/XP (optional)
 
  1. When you've finished creating your icon, choose File/Save or Ctrl+S...
  2. The standard Windows® 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 it 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

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.yourdomain.com/iconname.ico">

<TITLE>Page Title</TITLE>

</HEAD>