Partager via

Toolbar Button Style Guide

  • Article

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

  • Sizes
  • Colors
  • Design Tips
  • Placing Icons
  • Related Topics
    • Overview
    • Tutorial

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.

><table class="clsStd"> <tr> <th>Dimensions (in pixels)</th> <th>Example icon</th> </tr> <tr> <td>20x20</td> <td> <img alt="20x20 16 color" src="/workshop/graphics/color20x20x16.gif"/> </td> </tr> <tr> <td>16x16</td> <td> <img alt="16x16 16 color" src="/workshop/graphics/color16x16.gif"/> </td> </tr> </table><![CDATA[]]&gt;

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.

><table class="clsStd"> <tr> <th>State</th> <th>Example icon</th> </tr> <tr> <td>Active</td> <td> <img alt="20x20 256 color" src="/workshop/graphics/color20x20x256.gif"/> </td> </tr> <tr> <td>Default</td> <td> <img alt="20x20 256 shade" src="/workshop/graphics/gray20x20x256.gif"/> </td> </tr> </table><![CDATA[]]&gt;

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 Windows; halftone palette, while the 16-color/shade icons should use the Windows 16 palette. The following table shows the different color depths used.

><table class="clsStd"> <tr> <th>Depth</th> <th>Example icon</th> </tr> <tr> <td>16-color</td> <td> <img alt="20x20 16 color" src="/workshop/graphics/color20x20x16.gif"/> </td> </tr> <tr> <td>256-color</td> <td> <img alt="20x20 256 color" src="/workshop/graphics/color20x20x256.gif"/> </td> </tr> <tr> <td>16-shade</td> <td> <img alt="20x20 16 shade" src="/workshop/graphics/gray20x20x16.gif"/> </td> </tr> <tr> <td>256-shade</td> <td> <img alt="20x20 256 shade" src="/workshop/graphics/gray20x20x256.gif"/> </td> </tr> </table><![CDATA[]]&gt;

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:

  • Use the same hues and saturation of colors as in the default toolbar icons to keep a consistent and integrated appearance.
  • Make sure the visual transition between your default and active images is smooth.

For 16-color/shade icons, you will want to:

  • Use the Windows 16-color palette.
  • Add a black border around the icon, except when it affects the readability of the image (like with arrows or "X" icons).
  • Keep a fairly flat appearance (little or no dimensioning or shading).

For 256-color/shade icons, you will want to:

  • Use the Windows halftone palette.
  • Use icon-style borders with gray or color as top and left borders and black as the bottom and right borders.
  • Make them more dimensional, using a light source from the upper-left corner and shading where appropriate.

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:

  • 16x16 16-color icon (Required)
  • 20x20 16-color icon (Optional)
  • 20x20 256-color icon (Required)

The second .ico file should contain three grayscale icons. The grayscale icons needed are:

  • 16x16 16-shade (Required)
  • 20x20 16-shade (Optional)
  • 20x20 256-shade (Required)

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