.png)
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
-
After drawing your images in a graphics program, place the 16-color and 256-color images in separate files.
-
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.
-
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 |
|
|
|
Active |
20-by-20 pixels |
16-color Windows palette |
Black, except when a border interferes with the readability of the icon |
|
|
|
Active |
16-by-16 pixels |
16-color Windows palette |
Black, except when a border interferes with the readability of the icon |
|
|
|
|
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 |
|
|
|
|
20-by-20 pixels |
16-color Windows palette |
Black, except when a border interferes with the readability of the icon |
|
|
|
|
16-by-16 pixels |
16-color Windows palette |
Black, except when a border interferes with the readability of the icon |
|
|
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 |
|---|---|
|
|
|
To create your icon files in Visual C++
-
Open each .bmp file.
-
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.
-
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 -
The device images are two pixels wider than the images. Center your images in the device image area.
-
-
Delete the default 32-by-32 pixel device image.
-
Copy and paste the color images from your .bmp files into the appropriate device image size and color depth.
-
To make the background transparent, select the transparent color in the color palette and fill the background of each image where you want transparency.
-
Save the file as an .ico file.
To create your default (grayscale) .ico file, follow the same steps.
