Customizing the Site Icon
A site icon (also called shortcut icon, or favicon) is a small image that is associated with a particular website or webpage. This task explains the best icon formats to use with Windows Internet Explorer 9 and describes how to implement a site icon on your website.
Note For more info on site icons and notifications see High Quality Visuals for Pinned Sites in Windows 8, and Badge Notifications, directly on your Windows 8 Pinned Site.
- Site Icons in Internet Explorer 9
- Creating and Installing a Site Icon
- Next Steps
- Related topics
Site Icons in Internet Explorer 9
A site icon typically appears in the browser's address bar and on the History and Favorites list. Site icons replace the standard Windows Internet Explorer shortcut icon for Internet shortcuts. In Internet Explorer 9, the site icon is also used as the primary way to identify and differentiate a site on the Windows 7 taskbar and on the New Tab page.
A single .ICO file can contain multiple images of different resolutions. In earlier versions of Internet Explorer, the recommended size of a site icon was 16x16 or 32x32 pixels. However, due to the increased resolution of display devices and larger icons on the desktop, a site icon can appear up to 64x64 pixels or more.
Internet Explorer 9 uses site icons in the following places:
- Address bar (16x16)
- New Tab page (32x32)
- Taskbar button (32x32)
- Pinned site browser UI (24x24)
As you create your Pinned site, you might need additional icons to use in the following ways:
- Jump List tasks (16x16)
- Thumbnail Toolbar buttons (16x16)
- Overlay icons (16x16)
To achieve the best experience in Internet Explorer 9, your icons should support the following image sizes:
| Recommended | 16x16, 32x32, 48x48 |
| Optimal | 16x16, 24x24, 32x32, 64x64 |
Creating and Installing a Site Icon
The easiest way to create a site icon is by using X-Icon Editor. X-Icon Editor is a free application (based on HTML5 Canvas) that allows you to create high resolution icons directly from within the browser. X-Icon Editor creates high-resolution icons in sizes that are suitable for Pinned sites, as well as the address bar and New Tab page in Internet Explorer 9.
.gif)
After you have created your icon, download it from X-Icon Editor and save it locally. To use the site icon in your website, add a link element to the head section of your webpage, like in the following example:
<link rel="shortcut icon" href="/favicon.ico" />
The site icon file can be located anywhere in the site directory tree.
Because site icons are used both by Internet Explorer and Windows, only the .ICO file format is supported. If you change your site icon during development, you might need to clear the browser cache or rename the file to cause Internet Explorer to refresh its copy of the site icon.
Next Steps
At this point, you have create a static Jump List and high-resolution site icon. In the Detecting a Pinned Site task, you'll learn how to determine whether your site can be pinned.
The site icon can also be used in the body of your page to prompt users to pin your site. The drag-to-pin image acts just like the site icon in the address bar or tab. For more information, see Dragging an Image to Pin the Site.
Related topics
Tasks
Declaring Pinned Site Metadata
Dragging an Image to Pin the Site
Working with Custom Icon Overlays
Conceptual
Badge Notifications, directly on your Windows 8 Pinned Site
Fresh Tweets 2.0 - demo for Windows 8
High Quality Visuals for Pinned Sites in Windows 8
How to Create a Basic Pinned Site
Windows User Experience Interaction Guidelines: Icons
Tools