How to Add a Shortcut Icon to a Web Page
You can use shortcut icons to display your logo or some other small graphic on the Windows Internet Explorer Favorites menu, address bar, and—starting with Internet Explorer 7—page tabs. They have no special Web server requirements and are a great way to add brand recognition to your Web site. The following screen shot shows a shortcut icon for MSN.com on the Favorites menu, the address bar, and a page tab.
Until Internet Explorer 7, shortcut icons would appear only when users added a page to their Favorites. Starting with Internet Explorer 7, shortcut icons will always appear when one is available in a supported format.
This article describes how Internet Explorer handles shortcut icons, explains how to add shortcut icons to your Web page, and provides troubleshooting steps. This article contains the following sections:
- About Shortcut Icons
- Creating Icons in the Correct Size and Format
- Associating the Shortcut Icon with Your Web Page
- Associating Multiple Shortcut Icons with Different Web Pages
- Changing Your Page's Shortcut Icon
- Adding the Web Page to the User's Favorites Menu
- Troubleshooting Shortcut Icons
About Shortcut Icons
Shortcut icons are supported in Microsoft Internet Explorer 5 and later. Internet Explorer downloads a shortcut icon when a user first visits a Web page that has a valid icon. (For more information on what constitutes a valid shortcut icon, see Creating Icons in the Correct Size and Format.) If more than one Web page shares the same shortcut icon (for example, a Web site that uses the same shortcut icon site-wide), the shortcut icon is downloaded only once.
In Internet Explorer 7, when a user adds a site to the Favorites menu, the site's shortcut icon is saved to the Microsoft Windows NT File System (NTFS) alternate data stream of the shortcut (.url) file that is created. (On hard disks formatted with the file allocation table (FAT) file system, the icon is saved to the Temporary Internet Files folder.)
In Internet Explorer 6, the icon is stored in the Temporary Internet Files folder on the user's computer, and additional metadata about the icon is stored in the user's history information.
Creating Icons in the Correct Size and Format
A shortcut icon for Internet Explorer must be square in size, and at least 16 x 16 pixels. Consider creating both a 16 x 16-pixel icon as well as a 32 x 32-pixel icon (and larger, bandwidth permitting), since on high-DPI displays, Internet Explorer may stretch the icon to fit the available space.
To create the icon, use an icon editor, such as Microsoft Paint or the one included in Microsoft Visual Studio, and save the icon in the .ico file format (or save as a bitmap, and then rename the file with a ".ico" extension). Internet Explorer will ignore icons that are not in .ico format, and will instead display the default Internet Explorer shortcut icon.
Associating the Shortcut Icon with Your Web Page
After creating the icon, you must associate it with your Web page. There are two methods for doing this.
The first method is to save the icon with the default file name of favicon.ico to the root directory of your domain—for example, www.microsoft.com/favicon.ico. The first time a user visits your Web page, Internet Explorer automatically searches for this file and places the icon in the address bar, next to all favorites linking to your site, and on page tabs. In Internet Explorer 5 and Internet Explorer 6, the icon will appears only after a user adds the site to the Favorites menu.
The second method for associating a shortcut icon with your Web page is to add a line of HTML code to the page's head element. The line of code includes a link tag that specifies the location and name of the icon file. You can include this link tag on a per-page basis. First, save the icon with a file name other than favicon.ico, and then add the following code to the head element of your page.
<head> <link rel="SHORTCUT ICON" href="http://www.mydomain.com/myicon.ico"/> <title>My Title</title> </head>
You can use either method, or both. However, if you use the second method, whichever icon you point to in the link tag on each page will be displayed instead of the default favicon.ico file at the root of your domain.
Associating Multiple Shortcut Icons with Different Web Pages
If you want different pages on your Web site to have different shortcut icons, you must use a link tag as described in Associating the Shortcut Icon with Your Web Page. Within the link tag, point to whichever shortcut icon you want to display for that page.
Changing Your Page's Shortcut Icon
If you have used only the default favicon.ico file at the root of your domain as your shortcut icon, and you change the icon, your users may not see the updated icon until they have cleared their history and cache as described in Troubleshooting Shortcut Icons. Internet Explorer cannot detect whether favicon.ico has changed, so it will load a new copy only if it does not have one already.
To prevent this, use a link tag as described in Associating the Shortcut Icon with Your Web Page and use a different file name for the new shortcut icon. Internet Explorer compares the file name in the link tag to the known file name stored in the history information. If the file name has changed, Internet Explorer downloads the new icon.
Adding the Web Page to the User's Favorites Menu
In Internet Explorer 5 and Internet Explorer 6, a shortcut icon does not appear on the address bar unless the user chooses to add the page as a favorite. You can add a button or link to your page that prompts the user to add your page as a favorite. The following code is an example of one way to do this.
<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>
Troubleshooting Shortcut Icons
If you are seeing the incorrect or default shortcut icon for your Web page, try the following:
- Verify that the shortcut icon is the correct size and format. For more information, see Creating Icons in the Correct Size and Format. Note that shortcut icons in image formats other than .ico—for instance, .bmp, .gif, or .png—cannot be displayed in Internet Explorer.
- Clear the Internet Explorer cache and history information. If either has become corrupted, incorrect shortcut icons may appear.
- To clear the cache and history information in Internet Explorer 7, on the Tools menu, click Delete Browsing History. Click Delete files to clear the cache, and click Delete history to clear the history information. Also, since shortcut icons for favorites are stored in the shortcut (.url) file in Internet Explorer 7, try removing the favorite and adding it again.
- To clear the cache and history information in Internet Explorer 6, on the Tools menu, click Internet Options. Under Temporary Internet files, click Delete files, and under History, click Clear history.
- Verify that Internet Explorer can store the shortcut icon in the Temporary Internet Files folder. If you have set Internet Explorer to not keep a cache, then it will not be able to store the icon and will display the default Internet Explorer shortcut icon instead.
i'm having problem with new ie9 when i go to other web page icon is missing like hotmail, bing, yahoo,, etc.
<script>
<!--
if ((navigator.appVersion.indexOf("MSIE") > 0)
&& (parseInt(navigator.appVersion) >= 4)) {
var sText = "<span style='color:blue; cursor:hand;' "
sText += "onclick='window.external.AddFavorite(location.href, "
sText += "document.title);'><u>Add this page to your favorites.</u></span>";
document.write(sText);
}
//-->
</script>
As for problems with the icon, check your publish settings. Are you using relative to document or site root for your navigation. Be sure your site is set up correctly to use this icon code or change the code to match your site configuration.
I just love it when you have to debug Microsofts own code.
- 10/3/2011
- Richard hrf
- 9/7/2011
- coldpen
I am also facing similar issue as like Cathy, above.
I am using IE6 and am not able to see the Favicon image. Can any one help in this regard?
However, I am using a .ico picture image, and this is being displayed absolutely fine in FF2.0.5 but not in IE6.
Thanks
Srivatsa//
Hello there,
if you got problems with Favicon.ico, i recommend that you read over the instructions given above
very carefully, if you still have problems then i suggest you contact me by email: tjlovestyle@gmail.com
i will be kind to send you an example script. Don't worry it's free.
- 2/2/2009
- SrivatsaBargava
- 9/7/2011
- coldpen
By Carlos Andrade (Realtor Guru for Oeiras Real Estate in Lisbon, Portugal)
- 8/6/2011
- Eng Carlos Pires de Andrade
- 9/6/2011
- camuzoto
For those interested in doing this in code.. (Put this in OnPreRender page method)
// link for shortcut icon
HtmlLink hlinkIcon = new HtmlLink();
hlinkIcon.Attributes.Add("href", this.ResolveUrl("~/images/icons/YourIcon.ico"));
hlinkIcon.Attributes.Add("rel", "SHORTCUT ICON");
hlinkIcon.Attributes.Add("ID", @"LinkIcon1");
this.Header.Controls.Add(hlinkIcon);
One thing I did was change the hardcoded link in article to root-relative link shown above. (it works fine in dev environemtn to go out to your production site on the web, but its more portable between applications this way.)
I did notice in a couple of comments regarding using relative addressing of the form ../../Your page.css - sometimes its easy to get off by a level. Re-examine the level from the page containing the link to the resource
- 8/3/2011
- DBC_Austin
- 9/6/2011
- camuzoto
- 5/11/2011
- JGotts
Please could someone manipulate this script so that the text changes color on mouseover.
Thank you
- 4/25/2011
- String-String
== jsudds(MSFT) ==
A single icon file can contain multiple renderings of the same icon. The recommended sizes for pinned site icons are 16x16, 32x32, and 48x48; however, the optimal sizes are 16x16, 24x24, 32x32, and 64x64. Check out http://www.xiconeditor.com/ for an easy way to convert any graphic to an icon file.
<link rel="shortcut icon" href="icon.ico" type="image/x-icon" />
- 12/28/2010
- JOSE CARLOS ESTRADA
- 10/3/2010
- dongato
- I have a webpage which is accessed over https but when i try to access favicon using https protocol it doesnt show up.While using http it comes up properly
- My https certificate is not signed certificate.The IE version I am using is IE-8.0.7100.however in other IE-8 versions I am not facing any problem in getting the favicon.
Can anybody suggest how to access favicon over https?Any help in this regard is highly appreciated
- 9/15/2010
- GhoshSoumik
Struggled to get an ICO file implemented, but this article addressed all the issues.
implemented at www.walltowallflooringltd.co.uk
- 3/31/2010
- DaveLloyd180
See the topic titled "How to: Edit Resources" http://msdn2.microsoft.com/en-us/library/14yss09y(VS.80).aspx
It might be worth mentioning that *.ico format is not a *.bmp, *.jpg, *.gif etc with the extension changed to *.ico - it is an actual format. Just because you can save a favicon.bmp file in Paint then change the extension to *.ico - it will work in Firefox but not in IE - you need to save to a *.ico format - to do this I downloaded an addon for Adobe Photoshop (I am using CS3) - Since XP Home Paint version won't save to an *.ico file even though it is implied that you can in the content of this tutorial - I got the plugin for Adobe Photoshop from http://www.telegraphics.com.au/sw there are versions for Mac and Windows and I tried a 32 * 32 file and couldn't get it working but it may have been more my patience waiting for it to update - I changed to 16 * 16 and it works
- 3/25/2010
- BilllyAsh
See the topic titled "How to: Edit Resources" http://msdn2.microsoft.com/en-us/library/14yss09y(VS.80).aspx
It might be worth mentioning that *.ico format is not a *.bmp, *.jpg, *.gif etc with the extension changed to *.ico - it is an actual format. Just because you can save a favicon.bmp file in Paint then change the extension to *.ico - it will work in Firefox but not in IE - you need to save to a *.ico format - to do this I downloaded an addon for Adobe Photoshop (I am using CS3) - Since XP Home Paint version won't save to an *.ico file even though it is implied that you can in the content of this tutorial - I got the plugin for Adobe Photoshop from http://www.telegraphics.com.au/sw there are versions for Mac and Windows and tried a 32 * 32 file and couldn't get it working but it may have been more my patience waiting for it to update - I changed to 16 * 16 and it works
- 10/24/2007
- Dwellingbrook
- 3/25/2010
- BilllyAsh
In our web site, we have both Http and Https web pages.
I have bookmarked both the Http and Https web pages on the IE 6 browser.
Post restarting the browser, when i open the http web page through bookmarks, i get to see the favicon. But, when i open the Https web page i do not get to see the favicon.
Any idea why? Or is this an limitation on IE 6 browser.
Any help would be appreciated.
Thanks,
Madhu K
- 9/11/2009
- Madhu K
Hi all,
I just came across this article about 10 minutes ago and it is only the third article I have read on this subject so far. I have just recently decided to add icons to my own sites. I am in no way professing to be an expert on this subject, so please don't Flame me if I am way off base here.
Just as an observance, I noticed the two that were experiencing problems with their icons in IE had modified the filename ("abcfavicon.ico" as an example). From what I have read so far, Internet Explorer is searching for the filename "favicon.ico" and not "abcfavicon.ico" in your webserver's root directory. In all the years of troubleshooting my own html errors, I have learned that every little detail has to be explicit. Using the letter "O" for example instead of the number "0" can lead to an extremely long day of proofreading. Have you guys that are having trouble with this tried renaming your icon's filename to just "favicon.ico"?
I had XP7IE and used all the tags for favicon and nothing displayed but were fine in Fire Fox
I Up dated to XPIE8 and her are the tags I'm using
It seams like these tags above this sentence is what worked but It only shows up on the index page even though I have put this code in a few other pages and nothing.
so I get just my main page of XPIE8 to work not my whole website like Fire Fox Hope you can help me
Thanks
Michele
- 3/2/2009
- Michele325
I would like my htm page to display a favicon. My code is:
<head>
<title>W E L C O M E</title>
<link rel="shortcut icon" href="../../Platform/Images/essfavicon.ico" type="image/x-icon" />
My favicon will not display. I am using IE 7. Yes I have verified that my relative path is correct, that the ico is in the proper format, and have cleared my cache and history. I have tried the troubleshooting steps described in this article, but
I can only get the image to consistently display if I use an absolute path (which will not be possible in my scenario).
Are there any other troubleshooting suggestions?
Thanks
I was going to add, and will still do so even though in logging in here I was told this is not the place for bug reports or discussion, but I have not yet found a discussion on this, that I am glad that you have asked, for I have tried to do this many times since I first noticed others doing it. I have not yet succeeded, but having come across this note today, I was intrigued. If the icon is also stored in the shortcut, then why does the shortcut itself not display the icon? So I had a look, and discovered that the icone was not in the shortcut, and when I tried to add it to the short cut from the Temporary Internet Files folder I was told that the file did not exist. This was rather intriguing also, as the file did exist, indeed the file open dialogue which is invoked by the change icon button happily displayed the icon in its contents. So what is going on here then?
Secondly, I tried adding the icon to the short cut from an different location. That was successful, but still it would not display in the IE6 address bar.
So again, what is going on? It must be something pretty obvious as the instructions are very clear, and other people have managed to make it work using exactly the code that is suggested above.
Baffled
Stuart
- 9/25/2008
- CathySoroka
- 9/28/2008
- StuartMuk