Tek Eye Logo

Tek Eye

How to Make an Icon for Windows

Need to create a Windows icon? With a good image and the proper software tools a professional Windows icon is easily made. The tools used in this article are the Greenfish Icon Editor Pro (also available from PortableApps), free images from https://openclipart.org, and the Inkscape graphics editor.

Example Icon

Create a Windows Icon

To create a windows icon you need the right tools and the right image.

A Brief Look at Icon Evolution

The few who are old enough to remember a Personal Computer (PC) from the early 1980's may recall an early Graphical User Interface (GUI). The early GUIs were simple black and white interfaces with simple icons, like this early Apple Lisa display.

Early Apple GUI

Source https://en.wikipedia.org/w/index.php?curid=25697215 (fair use)

As computers became more powerful with color screens and high resolution displays, then icons were designed in 3D or isometric projection using color. This Windows 7 taskbar shows color icons in use.

Windows 7 Taskbar

Source https://en.wikipedia.org/wiki/File:Windows_7_Taskbar.png (Microsoft copyrighted content used with permission.)

However, flat simple icons have made a comeback with the latest operating systems and smartphones, as this image of Android icons shows.

Icons on Android

Source https://en.wikipedia.org/w/index.php?curid=54984328 (fair use)

What Makes a Good Windows Icon

The best icons are:

  • Simple images
  • Use few details and colors
  • Represent the meaning of the task they open, start or select.
  • Scale to different screen sizes
  • Pleasing to view

Do not use lots of detail and or harsh vivid colors. To see some good icons look at these sources:

A Tutorial on Making a Windows Icon

For this short tutorial on creating a Windows icon a Save icon file is going to be made.

First Find a Suitable Image

SVG files are a good format when manipulating images as they can be scaled without loss of detail. There are millions of SVG files at https://openclipart.org, the great thing about the openclipart files is that they are totally free to use as all the images are in the public domain. Wikimedia Commons has lots of SVG icon categories to browse. For this article the Tango Document Save is used from openclipart.

Tango Document Save

Optionally Tweak the Image in a Graphics Editor

A good icon needs to fill a square or circular space and sit centrally in that space. If the selected image does not do that then use a graphics program to fix it. For example an SVG image can be manipulated in Inkscape. (If new to Inkscape see the Inkscape Tutorials). As a guide add a square or circle to the image to help with positioning (and clear the style and fill of the added square or circle before exporting the final bitmap). Then select the image and export it to the size of the biggest icon required. In Windows that is a 256x256 bitmap, here saved as a Portable Network Graphics (PNG) file.

Edit Icon in Inkscape

Use Greenfish Icon Editor to Create the Correct Icon Sizes

Open the bitmap for the icon in the Greenfish Icon Editor Pro. Here all the popular icon sizes are going to be used to generate a save.ico file. The opened bitmap creates the first 256x256 icon. Then use the New Page option to create a 64x64 large icon (see the picture at the top of the article). It copies the image from the bigger icon and scales it to the correct 64x64 size. Then do the same with the 48x48 medium icon, 32x32 small icon, 24x24 toolbar icon and the 16x16 smallest icon.

Save the New Icon Ready to be Used

Once the different icon sizes have been created the save.ico file can be generated. Use the save option and choose the Icon files (.ico) format.

Save New Icon

The icon is now ready to use. To download the save icon generated in this tutorial use this save.ico link.

Save Icon

See Also

  • For a full list of all the articles in Tek Eye see the full site Index.

Author:  Published:  

ShareSubmit to TwitterSubmit to FacebookSubmit to Google+Submit to LinkedInSubmit to redditPrint Page

markdown CMS Small Logo Icon ↓markdown↓ CMS is fast and simple. Build websites quickly and publish easily. For beginner to expert.



Articles on:

Android, HTML, VPS, Computing, IT, Computer History, ↓markdown↓ CMS



Free Android Projects and Samples:

Android Examples, Android List Examples, Android UI Examples