Add a Custom Icon to the user's Favorites

Favicon are a feature that you can use to display your logo or some other small graphic on the Favorites menu and Address bar. They have no special Web server requirements and are a great way to add brand recognition. The following graphic displays a shortcut icon for MSN.COM on the Internet Explorer 5 Favorites menu and Address bar.

This article explains how to use shortcut icons in the following three required steps:

Create the correct size icon.
Associate the icon with your Web page.
Add the Web page to the user's Favorites menu.

Create the Correct Size Icon

The required size of a shortcut icon is 16x16 pixels. To create the icon, use an icon editor, such as the one included in Microsoft� Visual Studio� or one of the many other icon editors available. Regardless of the program you use, make sure you set the editor to create an icon that is 16x16 pixels. Otherwise, the icon will be ignored.

Associate the Icon with Your Web Page

After creating the icon, you must associate it with your Web page. One way is to save the icon with the default file name of favicon.ico in the root directory of your domain name for example, www.example.com/favicon.ico. Each time your Web page is added to a user's favorites, Internet Explorer automatically searches for this file and places the icon next to all the favorites and quick links originating from your site.

You can also associate the icon with your 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.example.com/myicon.ico">
<title>My Title</title>
</head>

Add the Web Page to the User's Favorites Menu

<script type="text/javascript">
    $(function() {
        $("#bookmarkme").click(function() {
            // Mozilla Firefox Bookmark
            if ('sidebar' in window && 'addPanel' in window.sidebar) { 
                window.sidebar.addPanel(location.href,document.title,"");
            } else if( /*@cc_on!@*/false) { // IE Favorite
                window.external.AddFavorite(location.href,document.title); 
            } else { // webkit - safari/chrome
                alert('Press ' + (navigator.userAgent.toLowerCase().indexOf('mac') != - 1 ? 'Command/Cmd' : 'CTRL') + ' + D to bookmark this page.');
            }
        });
    });
</script>

HTML

<a id="bookmarkme" href="#" rel="sidebar" title="bookmark this page">Bookmark This Page</a>

favorites favicon Favorite Icon