This guide will help you design icons for toolbar buttons that you add to the Microsoft® Internet Explorer user interface.
The Internet Explorer toolbar requires two sizes for all toolbar icons: 20x20 pixel and 16x16 pixel. The following table shows the difference between the two icons.
Dimensions (in pixels) | Example icon |
---|---|
20x20 | |
16x16 |
The 20x20 pixel icon is used with the default Internet Explorer toolbar. The 16x16 pixel icon is used when Internet Explorer is in full-screen mode.
Internet Explorer uses two states for all toolbar buttons: the active state and the default state.
When the user's mouse is over a toolbar button, it is in the active state. At other times, the toolbar button is in the default state.
In the active state, Internet Explorer uses the appropriate color icon for the toolbar button. In the default state, Internet Explorer uses the appropriate grayscale icon. The following table shows the types of icons used for the different states.
State | Example icon |
---|---|
Active | |
Default |
In addition to the color differences, Internet Explorer uses two color depths: 256-color/shade icons and 16-color/shade icons. The 256-color/shade icons should be designed using the Microsoft® Windows® halftone palette, while the 16-color/shade icons should use the Windows 16 palette. The following table shows the different color depths used.
Depth | Example icon |
---|---|
16-color | |
256-color | |
16-shade | |
256-shade |
There are several things to keep in mind when designing toolbar buttons that are going to be integrated with the Internet Explorer user interface. In general, you will want to:
For 16-color/shade icons, you will want to:
For 256-color/shade icons, you will want to:
Toolbar icons need to be placed in two .ico files. The first .ico file should contain three color icons for your button. They are:
The second .ico file should contain three grayscale icons. The grayscale icons needed are:
Currently, the 20x20 16-color/shade icons are not being used, so including them in the .ico files is optional. The 16x16 16-color/shade icons are used in full-screen mode, while the 20x20 256-color/shade icons are used in normal mode.
You can use a drawing or paint program to create the appropriate images for each of the icons. To create the .ico files, you can use a tool like Microsoft® Visual Studio®.
The following are links to topics related to toolbar buttons.
Overview
Tutorial