How to Generating Icons from Images in C#

Article Purpose

This article illustrates the process of generating icon files (*.ico) from user specified input images. The accompanying Sample Source Code implements a Windows Forms application, allowing for easily testing the icon generation process.

Sample source code

This article is accompanied by a sample source code Visual Studio project which is available for download hereDOWNLOAD

Using the sample Application

The Sample Application can be used to test/implement the concepts described in this article.
The user interface enables the user to browse and select an Image file from the file system, which loads as a scaled preview. In addition, the user can select an icon size from a list of standard icon dimensions: 16×1624×2432×3248×4864×6496×96 and 128×128pixels. When a user clicks on the “Save Icon” button the sample application generates an icon in memory based on the specified size converting and scaling the provided input image. If an icon was successfully generated, the in-memory representation will be saved to the file system, based on the filename and file path specified by the user.

The image below is screenshot of the Image to Icon Generator application in action:

Image To Icon Generator

The source image features Bellis perennis also known as the common European Daisy (see Wikipedia). The image file is licensed under the Creative Commons Attribution-Share Alike 2.5 Generic license. The original image can be downloaded from Wikipedia.

The resulting icon file generated by the sample application:

imagetoicon_thumb

Scaling and Aspect Ratio

Icons conform to a set of standard dimensions, all of which equate to a squareimage due to the width and height values being equal. A potential issue exists in that the specified source image might not have exact square dimensions. In other words, the width and height values of specified source images might differ. The solution lies in creating a square image based on the specified source image. Consider the concept of a square canvas onto which is drawn the source image whilst maintaining its aspect ratio, implementing center alignment from the horizontal and vertical aspect. Listed below is the implementation of an extension method defined as CopyToSquareCanvas, targeting the Bitmap class.

[crayon-/]

The size of the resulting Bitmap image is determined by the source image’s longest side, either width or height. To ensure middle alignment both vertically and horizontally the source image is drawn at an offset, determined by the additional buffer area added by the canvas.

Generating the Icon

Once we have created an image conforming to exact square dimensions the next step would be to scale said image to the desired icon size. A convenient method of quickly scaling source images to icon dimensions comes in the form of creating thumbnails.

The sample source code defines the enumeration IconSizeDimensions, which serves to provide a developer friendly reference coupled with actual dimension values by means of specifying explicit enumeration values. Consider the following code snippet:

[crayon-/]

The crux of this article and sample source code can considered to be the definition of the CreateIcon extension method, which targets the Bitmap class. The definition is as follows:

[crayon-/]

As discussed the first step is to ensure that the source image conforms to square dimensions, implemented here by invoking the CopyToSquareCanvasextension method. Next the source code implements image scaling by creating a thumbnail image of which the size is based on the specifiedIconSizeDimensions enum value. The Bitmap.GetHicon method returns a handle to an Icon in the form of an IntPtr, which serves as a parameter to theIcon.FromHandle static method, which returns an instance of the Icon class.

The Implementation

When the user clicks the “Save” button the Sample Application will present the user with a file save dialog. After the user specifies a file name and file path the Sample Application creates a Bitmap reference of the source image by casting the picturebox’s Image property to type Bitmap.

[crayon-/]

When the CreateIcon extension method is invoked, the Icon dimensions selected through the user interface will be passed as a parameter. The last step performed involves persisting the in-memory Icon data to the file system.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Free Designsave Spinner 100% Unique & Readable!Free Spinner