Click to return to the Reusing Browser Technology home page    
Explorer Bar Style Guide     Browser Extensions Overvi...    
Web Workshop  |  Reusing Browser Technology

Toolbar Button Style Guide


This guide will help you design icons for toolbar buttons that you add to the Microsoft® Internet Explorer user interface.

Sizes

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 20x20 16 color
16x16 16x16 16 color

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.

Colors

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 20x20 256 color
Default 20x20 256 shade

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 20x20 16 color
256-color 20x20 256 color
16-shade 20x20 16 shade
256-shade 20x20 256 shade

Design Tips

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:

Placing Icons

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®.

Related Topics

The following are links to topics related to toolbar buttons.

Overview

Tutorial



Back to topBack to top

Did you find this topic useful? Suggestions for other topics? Write us!

© 1999 Microsoft Corporation. All rights reserved. Terms of use.