Home > Tutorials > Add a Favorite Icon to Your Web Site (FAVICON.ICO)

Add a Favorite Icon to Your Web Site


This article provides information on the following topics:

Create the Correct Icon Formats

Save Your Icon To your Local Hard Disk

Associate the Icon with a Web Page

My Icon is ignored, Why?


Axialis IconWorkshop™ 5.0 or later
Tryout or Corporate/Personal Edition

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 - 16 colors

16x16 - 256 colors

16x16 - RGBA/XP (optional)

Make sure to create an icon that is 16x16 pixels. If you create a larger version (32x32 or 48x48), the icon will be ignored by Internet Explorer.

Top of Page

Save Your Icon To your Local Hard Disk

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 .

Top of Page

Associate 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:


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

<TITLE>Page Title</TITLE>


Top of Page

My Icon is ignored, Why?

First, check that it meets the IE 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:



 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>";





Top of Page


Back To Tutorials Home

Article written by Axialis Software Team on September 10, 2007.

Copyright ©2007 Axialis Software - All Rights Reserved - Terms of Use.

site map | terms of use | privacy | user licenses | company | contact us | free icons | make icons | make screensavers | make cursors

Copyright ©2011 Axialis Software. All rights reserved.
Send us feedback about the site.

Microsoft, Windows, Windows XP, Windows Vista are registered trademarks of Microsoft Corporation
Adobe, Flash, Photoshop, Illustrator are registered trademarks of Adobe System Incorporated
Apple, AppStore, Ipod, iPhone, iPad are registered trademarks of Apple Inc