Export (0) Print
Expand All

Designing Toolbar Icons for Internet Explorer

To create a toolbar icon, you will need to provide each image in two sizes for two toolbar states (grayscale for the default state and color for the active state, when the user's mouse is pointing to it), and in two color depths.

To create your images

  1. After drawing your images in a graphics program, place the 16-color and 256-color images in separate files.

  2. Index each file to the appropriate palette, either the Windows 16-color palette or the Windows half-tone palette. Reserve a specific color to denote transparency.

  3. Save each file as a .bmp.

The following is a summary of the required images:

Icon State

Size, in pixels

Color Depth/Palette

Border

Appearance

Example

Active

20-by-20 pixels

256-color Windows half-tone palette

Icon-style border: color on the top and left edges, and black on the bottom and right edges

  • Color image

  • More shading and visual depth than 16-color image

  • A light source from the upper left and shading where appropriate

 

Active state: 256-color, 20-by-20 pixels

Active

20-by-20 pixels

16-color Windows palette

Black, except when a border interferes with the readability of the icon

  • Color image

  • Little shading; flat appearance

 

Active state: 16-color, 20-by-20 pixels

Active

16-by-16 pixels

16-color Windows palette

Black, except when a border interferes with the readability of the icon

  • Color image

  • Little shading; flat appearance

 

Active state: 16-color, 16-by-16 pixels

 

20-by-20 pixels

256-color Windows half-tone palette

Icon-style border: grey tones on the top and left edges, and black on the bottom and right edges

  • Grayscale image

  • More shading and visual depth than 16-color image

  • A light source from the upper left and shading where appropriate

 

Default state: 256-color, 20-by-20 pixels

 

20-by-20 pixels

16-color Windows palette

Black, except when a border interferes with the readability of the icon

  • Grayscale image

  • Little shading; flat appearance

 

Default state: 16-color, 20-by-20 pixels

 

16-by-16 pixels

16-color Windows palette

Black, except when a border interferes with the readability of the icon

  • Grayscale image

  • Little shading; flat appearance

 

Default state: 16-color, 16-by-16 pixels

Make sure the visual transitions between your default and active images are smooth. An easy way to test this is to create separate layers for the default and active images in a photo imaging program so that you can view the images on top of each other.

To change the bitmap images into icons

You will need to create two .ico files for each icon:

  • The first .ico file contains the active images (color) in both sizes and color depths.

  • The second .ico file contains the default images (grayscale) in both sizes and color depths.

It is recommended that you use a graphics program to draw your icons and a development environment, such as Microsoft Visual C++ Development Studio, to create the .ico files.

Example

The two icon files for the Home icon contain the following images:

Active State

Default State

 

Icon for active state

 

Icon for default state

To create your icon files in Visual C++

  1. Open each .bmp file.

  2. On the File menu, click New, and then click Icon. By default, the icon window that opens displays a standard 32-by-32 pixel device image.

  3. In the Icon window, click New Device Image. Click Custom, and then create these image devices:

    • One 22-by-20 pixel 16-color image

    • One 22-by-20 pixel 256-color image

    • One 18-by-16 pixel 16-color image

    Note Note

    • The device images are two pixels wider than the images. Center your images in the device image area.

  4. Delete the default 32-by-32 pixel device image.

  5. Copy and paste the color images from your .bmp files into the appropriate device image size and color depth.

  6. To make the background transparent, select the transparent color in the color palette and fill the background of each image where you want transparency.

  7. Save the file as an .ico file.

To create your default (grayscale) .ico file, follow the same steps.

Was this page helpful?
(1500 characters remaining)
Thank you for your feedback
Show:
© 2014 Microsoft