This is a pretty long tutorial on how to build and use icons in an application.

Contents

• Icon Sizes
• Creating an Icon File
  • Using the Integrated Icon Editor
  • Using External Icon Editors
    • Inkscape
    • @icon sushi
• Using an Icon File
• Clearing the Windows Explorer Icon Cache

Icon Sizes

When you make an application, its icons appear in at least 10 ways:

• In the form's title bar
• In the Windows Alt-Tab task switcher
• In the Windows Taskbar
• In Windows Explorer in these views:
  • Extra Large Icons
  • Large Icons
  • Medium Icons
  • Small Icons
  • List
  • Details
  • Tile

The picture shown above is displaying this example's executable in the Large Icons view. Notice how it displays a high-quality smooth circle for the application.

The picture on the right shows the icon in the Alt-Tab task switcher. The icon is smaller but it's still nice and smooth. Also note that both icons have transparent backgrounds.

The icons in the various displays have different sizes. If the application's icon file doesn't provide a required size, then Windows scales it to make the size it needs. That can result in aliasing effects that make the icon look ugly. That brings me to the most important single fact for producing attractive icons:

For best results, the icon file must at least include images at the sizes 16 x 16, 32 x 32, 48 x 48, and 256 x 256 pixels.

There are two things you need to do to make a program display nice icons. First, you need to create the icon file (containing images at all of the necessary sizes). Second you need to assign the file to the program.

Creating an Icon File

There are many ways to make an icon file. One obvious option is to use the icon editor integrated with Visual Studio. Unfortunately this editor isn't included with all version of Visual Studio so if you have the Express Edition, it may not be there. You can also use third party icon editing tools. Both of these approaches are described below.

Using the Integrated Icon Editor

To use the integrated editor, open the Project menu, select Add New Item, select Icon File, give it a good name, and click Add. Then use the editor shown on the right to create the icons. Use the color palette on the left to select foreground and background colors. Use the tools in the toolbar to draw shapes.

Use the list of icon sizes and types between the color palette and the drawing area to pick the kind of icon to edit. To delete a size, right-click on it and select Delete Image Type. To add a new icon type, right-click in this area and select New Image Type.

Unfortunately the integrated icon editor isn't very sophisticated and it can be hard to produce a really good result. One approach that I find useful is to create an image using some other tool such as Paint and then copy and paste it into the icon editor.

Using External Icon Editors

Instead of using the integrated icon editor, you can use an external tool. There are lots of icons editors out there. I'm going to mention only one approach. That doesn't mean it's necessarily better than the others, but it is free and you can use it to produce a good result. I;ll walk you through creating the icon shown at the beginning of this article.

The tools I used to create this example's icon file are Inkscape and @icon sushi. Inkscape is a drawing tool and @icon sushi is an icon converter that can turn images into icon files.

To create the icon, follow these steps:

Inkscape

1. Download and install Inkscape
2. Start the program. Initially it will create a fairly large document. Open the File menu, select Document Properties, and set the document's size to 256 x 256 pixels.
3. To make working with the document easier, turn on the design grid. In the Document Properties window, click the Grid tab. Make sure Rectangular Grid is selected and click New.
4. Now draw the icon. For this example:
   1. Select the circle tool and draw a big circle. If you hold down the Ctrl key while drawing, Inkscape will keep it round.
   2. Select the object selection tool, right-click the circle, and select Fill and Stroke.
   3. On the Fill and Stroke window's Fill tab, click the Linear Gradient button. Then click the Edit button.
   4. Select the gradient's first stop from the dropdown and set its color to a dark green.
   5. Select the gradient's second stop from the dropdown and set its color to a light green. Be sure to set its Alpha component to 255 or else the color will be transparent.
   6. Close the gradient editor.
   7. Back on the main design surface, select the Create and Edit Gradients tool, which looks like a line segment connecting two little boxes. Click and drag the boxes so the circle is dark in the upper left and light in the lower right.
   8. On the main design surface, select the object selection tool, click on the circle, and press Ctrl-D to make a duplicate.
   9. Click and drag one of the duplicate's corners to make it smaller. If you hold down the Ctrl key, Inkscape will keep it round.
   10. Press Ctrl-A to select all objects. Then open the Object menu and select Align and Distribute. On the window that appears, click the Center on Vertical Axis and Center on Horizontal Axis buttons to center the two circles.
   11. Back on the design surface, click off of the circles to deselect them. Then select the smaller circle and use the Create and Edit Gradients tool to reverse the direction of its gradient so it is light in the upper left and dark in the lower right.
   12. Save the file as Circle.svg or whatever you want to call it.
5. Next export the file.
   1. Open the File menu and select Export Bitmap.
   2. On the window that appears, set the size to 256 x 256 pixels.
   3. Enter a file name such as Circle256.png and click Export.
   4. To resize the image for the next file, open the File menu, select Document Properties, go to the Page tab, and set the page size to 48 x 48 pixels.
   5. On design surface, click Ctrl-A to select both circles. Press Ctrl-G to group them. Then use the grab handles to resize the circles so they fit on the new document size.
   6. Export the new image into file Circle48.png. Important Note: Be sure to check the bitmap's size in the Export Bitmap window. It tends to reset the size to what it thinks best and that may not be 48 x 48. If the file is saved at the wrong size by even 1 pixel, the results will be bad.
   7. Repeat these steps until you've saved the image at 256 x 256, 48 x 48, 32 x 32, and 16 x 16 sizes.
   8. Note: At the smaller sizes, the icon isn't big enough for users to really see the color gradient so the two circles lose their contrast and seem to blur together. You can try to adjust the gradients to make them more obvious or you can just give up on the gradients and make the two circles different solid colors. For example, you might make the bottom (outer) circle dark green and the upper (inner) circle light green.
   9. Note: If you want to be able to reproduce the image at all sizes, save the file each time you resize it with a different file name.
6. After you have saved the image at all of the necessary sizes, close Inkscape.

@icon sushi

1. Start @icon sushi.
2. Open the File menu and select Open. Select all of your files and click Open.
3. Press Ctrl-A to select all of the files.
4. Press Ctrl-M to save the files as a multiple file icon file. Enter the file name and click Save.
5. That's all there is to it. Close @icon sushi.

Using an Icon File

A C# application displays icons in two ways. First, Windows Explorer displays the application's icon. Second, each form has its own icon that it displays in its title bar, in the Taskbar, and in the Alt-Tab task switcher.

To set the application's icon, open the Project menu and select Properties. On the Application tab, click the ellipsis to the right of the Icon dropdown, select the icon file, and click Open.

To set a form's icon, open the form in the form designer and click on the form. In the Properties window, select the Icon property and click the ellipsis to the right. Select the icon file and click Open.

Clearing the Windows Explorer Icon Cache

One hurdle to testing and tweaking icons is the fact that Windows Explorer caches icons to save time. That means if you give an application an icon and then look at the application in Windows Explorer, the icon is cached. If you later change the icon, Windows Explorer won't see the new icon because it is still using the one it has cached.

To clear the cache, close all instances of Windows Explorer. Now change the system's icon size and then change it back. How you do this will depend on the version of Windows that you have. Search the Internet for instructions for your particular version of Windows.

In Windows Vista, right-click the desktop and select Personalize. Click Window Color and Appearance, and then click the Advanced button. Select the Icon item and change the size. Close the dialog and click Apply on the previous dialog. Then go back and reset the size to the original value.

If this doesn't work or you can't figure out how to resize the icons on your system, try rebooting.

---

If you make a beautiful icon that you'd like to share, let me know or post a comment including a link to it.