Home > Tutorials > What is an Icon?

What is an Icon?

 

This article provides information on the following topics:

What are the differences between an image and an icon?

What is the structure of an icon?

Which image formats should I include in my icons?

How to create an icon?

Can we save an icon to a file?

What about the RGB icon format with Alpha Channel?

What's New with Windows Vista™ Icons?

Can we store several icons into one file?

An icon is a graphic image, a small picture or object that represents a file, program, web page, or command. Icons help you execute commands, open programs or documents quickly. To execute a command by using an icon, click or double-click on the icon. It is also useful to recognize quickly an object in a browser list. For example, all documents using the same extension have the same icon.

That's almost all you need to know if you only use icons. But to create icons, which is the purpose of Axialis IconWorkshop™, you need to more about them. What's the difference between a standard image and an icon image? What's the structure of an icon? How to create an icon which will display correctly on all screen configurations (size, colors...)? Can we save an icon to a file? Can we assemble several icons into one file? What about the new Windows® XP icon format?

What are the differences between an image and an icon?

A computer image is a bitmap (composed of pixels) or vector (composed of drawing paths) picture, which can be saved using various formats (BMP, PSD, GIF, JPEG, WMF...). All these formats have several different properties (bitmaps, vectors, compressed, layered, animated...) and can be used to store pictures at any sizes and resolution.

Icons are different from standard images. They are have standard sizes (usually small): 16x16, 32x32, 48x48... One icon is composed of several images. Each of them with a different size and number of colors (mono, 16 colors, 256 colors, 16.8M...). And the most important property of an icon is the ability to include transparent areas. This allows seeing the screen background behind the icon within its square image (see illustration below).

Top of Page

What is the structure of an icon?

An icon is a group of images of various formats (size and colors). Furthermore, each image can include transparent area. That's why you'll find a transparent color in the drawing palette for 16 or 256 color images and a variable opacity parameter using an alpha channel for the new Windows® XP image format (opacity = 0 means transparent).

You need to include several images in an icon to permit Windows® or Macintosh® OS to choose the appropriate format when displaying it on screen. It may change based on screen number of colors and display location. For example, in the Windows® task bar icons are displayed using 16x16 image format and on the desktop, they are displayed at size 48x48. The Mac OSX especially use the large 128x128 format. This format includes an alpha channel to create smooth transparency and permits nice resize effects (used in the Dock bar).

This is very important to create several image formats in an icon (especially if you whish to redistribute it) in order to be compatible with all screen configurations. Also, in Windows® XP for example 3 image size are needed for each icon: 48x48 to be displayed in explorer lists, 32x32 to be displayed on the background desktop and 16x16 for Windows® and task bar.

IconWorkshop™ includes a powerful feature to create new formats based on existing images in a few clicks.

Format 128x128 is actually used on Macintosh® OSX only. Windows® XP does not display 128x128 icon formats in normal mode. By default, display is limited to 48x48 icons. However, this format can be implemented to deal with Desktop enhancement applications like ObjectDock. The best method to create hi-res icons for Windows® is to implement 256x256 image formats.

Microsoft Windows Vista™ supports icon formats up to 256x256 with compression. Axialis IconWorkshop™ fully supports creation and edition of Windows Vista™ Icons?. To read more visit this page: What's new in Windows Vista™ Icons?.

Top of Page

Which image formats should I include in my icons?

To be compatible with all display cases and screen configurations, you must consider creating icons containing various image formats. See various formats available below. The most important sizes are 128x128, 48x48, 32x32 and 16x16. The most important color formats are RGB/XP Alpha and 256 colors.

Windows® Icon Image Sizes

  • 16x16: Used in task bar, windows upper-left corner, detailed lists...

  • 24x24: Windows® 2000, Windows® XP - menus (optional)

  • 32x32: Desktop, lists...

  • 48x48: Windows® XP or more only - Desktop, Explorer and System lists...

  • 128x128: Optional - Used by some desktop enhancers

  • 256x256: Windows Vista™ only - compressed format

Macintosh® Icon Image Sizes

  • 16x12: Menus on OS 8 and 9 - rarely used.

  • 16x16: Menu, lists

  • 32x32: OSX 8/9 Desktop, Toolbars...

  • 48x48: Desktop, windows. Computed from 128x128 is not present

  • 128x128: Used on OSX Desktop and Dock bar

Image Colors (Windows® & Macintosh®)

  • Monochrome: Displayed on mono screens (rare except on old Macintosh® systems - 32x32 is recommended for Mac)

  • 16 colors: Displayed if the screen is 16 colors (less used but recommended in 16x16 and 32x32)

  • 256 colors: Displayed by the screen is 16 bits or True Colors (recommended)

  • RGB/XP Alpha: Displayed if screen is True Color (recommended). Works only with XP, Windows Vista™ and Macinstosh® OSX

If an image format is missing, Windows® displays the nearest existing image. It works but the result is generally distorted.

If you add 24x24 image formats in your icon, it won't be compatible with Windows® 98 and Windows® 2000. If you are using these versions, the icon will display correctly in IconWorkshop™ but will be considered as invalid by Windows®.

Top of Page

How to create an icon ?

Graphics are among the primary ways of advertising the sale of goods or services. This is true for computing when designing software or website interfaces. But most of us are not graphic designers and we have a problem when it comes to create attractive icons or web graphics.

The question is: How to create interesting custom icons without drawing skills? Image Objects are the answer.

The solution is to use a set of image objects already done by a skilled computer graphic artist, and assembling them together to create a final artwork that will match your needs. Using a set of existing image objects the possibilities are almost infinite. You can create many different icons or graphics simply by adjusting various parameters of each object like Hue (tint), Saturation, Brightness, Contrast, Size, Opacity and more:

This association can be easily done with Axialis IconWorkshop™ using a few mouse clicks and drag-and-drops. Creating different versions of an icon is very easy with an object pack. See below some examples of the help icon made in a few minutes simply using the mouse and without drawing one pixel (non-exhaustive list of course!):

Top of Page

Can we save an icon to a file?

Yes, the extension for a Windows® icon file is "ICO". The extensions for Macintosh® icons are "ICNS", "RSC", "RSRC" and "BIN". Only one icon can be saved in an icon file. If you want to group several icons in a file you must create a library (see below).

Axialis IconWorkshop™ fully support Windows® and Macintosh® icon files. You can create, read and save icons using those file formats. The MacBinary format "BIN" is used to transfer icons between Windows® and Macintosh® preserving Mac resource forks (see "Macintosh® vs Windows® icons" topic to read more).

Top of Page

What about the RGB icon format with Alpha Channel?

This image format contains 16.8M colors coded in RGB plus an additional opacity channel. This channel is called the "Alpha Channel". Each channel is coded using 8 bits per pixel. As a result each pixel is coded in 32 bits (32 BPP - Bits Per Pixel). See the illustration below to understand how channels are organized in an RGB/A image.

This is a new image format that you can find in new generation of icons. This image format is called XP RGB/A by IconWorkshop™.

The main advantage of this image format is that it permits to display a smooth transparency in icons. The resulting image is displayed with smooth contours on all backgrounds. It permits also to create dropped shadows behind icons. This interesting effect is used in Windows® XP, Windows Vista™ and Macintosh® OSX icons.

The following illustration shows the difference between a standard image format transparency (in 256 color formats for example) and the new Windows® XP smooth transparency:

 

Windows® and Macintosh® icons support RGB/A images. These icons can be displayed in Windows® XP or more and in Macintosh® OS 10 or more. Older systems does not support RGB/A icons. That's the reason why you need to include other standard formats in your icons.

Top of Page

What's New with Windows Vista™ Icons?

Windows Vista™ comes with a new format of icons supporting PNG compression and sizes up to 256x256. The standard Windows Vista™ Icons now includes 12 formats as follows:

  256x256 - RGB/A 48x48 - RGB/A 32x32 - RGB/A 16x16 - RGB/A
  256x256 - 256 colors 48x48 - 256 colors 32x32 - 256 colors 16x16 - 256 colors
  256x256 - 16 colors 48x48 - 16 colors 32x32 - 16 colors 16x16 - 16 colors

The problem is that if you simply make the icon and save it in standard Windows® XP ICO format, the resulting file will be 400Kb on disk. The solution is to compress the images. Only the 256x256 images are compressed. The compression scheme used is PNG (Portable Network Graphic) because it has a good lossless ratio and supports alpha channel. Based on our preliminary tests, the compressed icon sizes are 100Kb to 150Kb.

Axialis IconWorkshop™ permits to create Windows Vista™ icons. To read more about Windows Vista™ Icons and how to create them using IconWorkshop™, read this article: "What's new with Windows Vista™ Icons?".

Top of Page

Can we store several icons into one file?

Yes, you can assemble several icons in one file called an Icon Library. The extension for a standard Icon Library is ICL.

Axialis IconWorkshop™ fully supports ICL files. It can create, read and save ICL library files. Furthermore, ICL is fully supported by all versions of Windows®. For example, you can customize a Windows shortcut by selecting a new icon in an ICL file. If you manage a large number of icons, we recommend you to store them in ICL files. ICL file size is limited to 64MB.

Creation of Macintosh® icon libraries is not yet supported by IconWorkshop™. However you can read RSRC files with several icons embedded as well as Icontainer libraries. Additionally you can save Macintosh® icons in ICL files. A small overlay image permits to distinguish them in IconWorkshop™. However you won't be able to open those ICL files under Macintosh® OS. Future versions of IconWorkshop™ will support Macintosh® icon library creation.

Top of Page

 

Back To Tutorials Home

Article written by Axialis Software Team on Friday, October 07, 2005.

Copyright ©2005 Axialis Software - All Rights Reserved - Terms of Use.