Title: Give an application beautiful icons in C#

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

• 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 Medium Icons view. Notice how it displays a high-quality smooth circle for the application.

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:

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

Using the Integrated Icon Editor

Use the list of icon sizes and types on the left to pick the kind of image 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. It's bitmap-oriented and the tools don't seem to work very well in some editions.

One approach that I find useful is to create an image using some other tool such as Inkscape and then copy and paste it into the icon editor.

Using External Icon Editors

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 from this web site
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 Grids tab. Make sure Rectangular Grid is selected and click New.
4. Open the View menu, open the Zoom submenu, and pick Page.
5. 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 (the arrow), right-click the circle, and select Fill and Stroke.
   3. On the Fill and Stroke window's Fill tab, click the Linear Gradient button.
   4. Double-click the circle. A line should appear on the circle showing the direction of its linear gradient.
   5. Click and drag the circle on the right end of the gradient line and move it to the circle's lower right edge.
   6. Click and drag the box on the other end of the gradient line and move it to the circle's upper left edge.
   7. In the Fill and Stroke window, click on the gradient. Below the gradient click the Edit Gradient button, which looks like a document with a pencil on it.
   8. In the toolbar at the top, find the Stops dropdown. Select one of the stops. Then use the Fill and Stroke window to set that stop's color to light green.
   9. Select the other stop and set its color to dark green. For this example, make sure both stops have alpha component 255 so they are opaque.
   10. On the main design surface, select the object selection tool, click on the circle, and press Ctrl+D to make a duplicate.
   11. 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.
   12. Press Ctrl+A to select all objects. Then open the Object menu and select Align and Distribute. (The Align and Distribute window may start off shrunk to a thin slice on the right. If it does, click it to expand it.) On the Align and Distribute window, click the Center on Vertical Axis and Center on Horizontal Axis buttons to center the two circles. Then you can click the < icon at the top of the window to collapse it. (A > button seems like it would make more sense.)
   13. Back on the design surface, click off of the circles to deselect them. Then select the smaller circle and repeat the previous steps to give it a gradient opposite to the one used by the larger circle.
   14. Save the file as Circle.svg or whatever you want to call it.
6. Next export the file.
   1. Open the File menu and select Export PNG Image.
   2. On the window that appears in the Export Area section, click Page.
   3. Set the size to 256 x 256 pixels at 96 dpi.
   4. Enter a file name such as Circle256.png and click Export.
   5. 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.
   6. 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.
   7. Export the new image into file Circle48.png. Important Note: Be sure to check the bitmap's size in the Export PNG Image 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.
   8. Repeat these steps until you've saved the image at 256 x 256, 48 x 48, 32 x 32, and 16 x 16 sizes.
   9. 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.
   10. Note: If you want to be able to reproduce the image at all sizes, save the SVG file with a different file name each time you resize it.
7. After you have saved the image at all of the necessary sizes, close Inkscape.

I have never found Inkscape all that intuitive. Tools pop up in their own windows, in collapsible sections of the main window, in tool bars, on the top, sides, or bottom of the program. Recent changes moved things around but didn't make things easier to find. Inkscape takes some getting used to, but it does produce some excellent images.

@icon sushi

@icon sushi is really easy to use.

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 and other parts of Windows display 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.

If you make a beautiful icon that you'd like to share, email me.

Download the example to experiment with it and to see additional details.