Icons Made Simple

Author: Joshua "Flobi" Hatfield
Updated: 2009-03-16 05:46:28PM EDT

I. Contents

1. Contents
2. What's an Icon?
1. What's an Icon File?
2. Common Uses for Different Icon Image Sizes
3. How do I Make an Icon?
4. How do I "Assemble" an Icon?

II. What's an Icon?

An Icon is a simple image used to represent to some idea, object or action. Though this definition is my own, I believe it sums up most of the definitions you can find in any dictionary.

In Windows and other graphical user interfaces (GUIs), icons are images on the screen that can be used to represent computer components, files and directories, programs, and other aspects of the GUI. In systems with a Mouse, you normally can click (or double-click) on these to access the related item...but perhaps, I'm getting a little too basic.

II.a. What's an Icon File?

These images are stored in icon files. You can tell an icon file because it will have a file extension of .ICO. Each "icon" may have multiple "images." Each of these images are designed to represent the same idea for different circumstances and they are all stored in the same icon file.

Take for example, this icon file, "bcp.ico", which has images representing the past developer forum, Broadie Car Park.

This looks fine when the icon is on the desktop, but if the icon is in a list, that image is just too big. Even if the image is scaled down to fit, it may be too detailed to be useful at a smaller size.

But the icon format allows us the ability to specify a more appropriate image for the smaller needs.

You can see in this display how that icon file has multiple images that are used for different purposes.

II.b. Common Uses for Different Icon Image Sizes

This article is being written mainly for Windows XP, so the common uses I will cover are specific to Windows XP, however, I will add a little information for Windows Vista at the end of this section.

In Windows XP, 2 different image sizes are commonly used: 16x16 and 32x32. Those dimensions are in pixels. One pixel is a single dot on you screen, so a 16x16 image is 16 pixels (or dots) tall and 16 pixels wide.

• 16x16 - These very small images are primarily used in lists. If you are viewing a folder and have Windows set to show you the folder content as "Details" or "List" you will be shown these small images from the icon file. Another example of these being used in lists can be seen in the menu system of your browser.
• 16x16 - The smallest image is also used as program icons. Look in the upper left hand corner of your browser window and you should see and icon representing the browser, whether it be Firefox, Internet Explorer or another. The same image should be shown in your task bar at the bottom (if you haven't moved it) of your screen.
• 16x16 - This is the most commonly used icon image size. A "favicon" can be installed on a website including this smallest of icon images sizes and depending on the browser, may be shown when bookmarking or adding the site to your favorites. Some browsers will automatically download the "favicon" when you visit and show it in your history or other places.
• 32x32 - Windows XP, as well as the most other versions of Windows uses 32x32 icon images for normal icon views like your desktop or when viewing the contents of a folder or your control panel in the default settings.
• 48x48 - The largest icon image size that Windows XP natively is used when you have told your system to display "large" icons. This size will be used most places that the 32x32 is used under this setting. How to tell Windows XP to use large icons.

How do I Make an Icon?

Icons can be constructed in specialized imaging programs designed to make icon files. These programs are designed to support the multiple image capabilities that icons have and few other image formats support. These programs generally support icon-specific features like pixel inversion.

However, because these programs focus specifically on the icon file capabilities, few of these programs have good graphic editing ability like standard imaging software, and using them to make any images that are visually appealing can be difficult.

Most people who make icons simply create the image in their graphics program of choice and copy/paste them into their icon creation program, bypassing the majority of tools in that program for the assembling aspects only icon creation programs offer.

How do I "Assemble" an Icon?

Assembling an icon is the process of taking the individual images...

THIS DOCUMENT IS STILL UNDER CONSTRUCTION...

I've got other pressing matters that I cannot finish this at the moment, but I promise, there'll be good stuff here.