Computer icon

This article may be in need of reorganization to comply with Wikipedia's layout guidelines. Please help by editing the article to make improvements to the overall structure. (August 2007)

This article needs additional citations for verification. Please help improve this article by adding reliable references. Unsourced material may be challenged and removed. (June 2009)

An icon is a small pictogram used in graphical user interfaces to supplement the presentation of textual information to the user. Modern computers can handle bitmapped graphics with ease, so icons are widely used to assist users.

Icons were first developed as a tool for making computer interfaces easier for novices to grasp in the 1970s, at the Xerox Palo Alto Research Center facility. Icon-driven interfaces were later popularized by the Apple Macintosh, the Amiga and the Microsoft Windows operating environments.

A computer icon usually ranges from 16 by 16 pixels up to 128 by 128 pixels. Some operating systems feature icons up to 512 by 512 pixels. Icon size can be related to the size of the graphical output device or to the amount of information that must be displayed. Vision-impaired users (due to such conditions as poor lighting, tired eyes, medical impairments, bright backgrounds, or color blindness) may need the ability to use larger icons.

Contents 1 Role in user interaction 2 Function or program icons 3 Icon software 4 See also 5 External links

Role in user interaction

Icons may represent a file, folder, application or device on a computer operating system. In modern usage today, the icon can represent anything that the users want it to: any macro command or process, mood-signaling, or any other indicator. User friendliness also demands error-free operation, where the icons are distinct from each other, self-explanatory, and easily visible under all possible user setups.

Icons may also be found on the desktop, toolbars and in the menus of computer application software such as Microsoft Office Word. Icons are made more user-friendly by being very distinct from every other icon. Each icon set may also have unifying features that show that similar icons are related to each other. Icons show this by:

1. Contrasting Sizes
2. Composition (large or small area, top/bottom, left/right, centered/perimeter)
3. Pattern-contrast (Horizontal-striped, vertical-striped, slanted-stripes, circles, oblongs, ...)
4. Light-on-dark, or dark-on-light
5. Frames/Shadows
6. Color contrasts
7. Fine-detail (with thin lined drawings)
8. Animation

Virtually every major modern computer operating system has the ability to use an icon-based graphical user interface (GUI) to display information to end users; this is evident in the usage of the term "icon" in the WIMP computing paradigm (for Windows, Icons, Menu, Pointers).

Function or program icons

Most computer functions in a GUI are represented by a function icon. Placing the cursor on the icon, and clicking (or double-clicking) a mouse, trackball or other button starts the function or program.

The icon must be original, distinctive and tiny. It must be useful on a wide variety of monitors set at different resolutions. This work is further complicated by the need to create several sets of function icons for several types of views in several types of operating systems, for any given program. For instance, the GUI guidelines in one operating system might specify the need to create sets of 16, 32, and 48 pixel icons for any program while the GUI guidelines in another system might specify sets of 16, 24, 48 and 96 pixel icons.

Wikimedia Commons has media related to: Icons

Icon software

This section needs additional citations for verification. Please help improve this article by adding reliable references. Unsourced material may be challenged and removed. (July 2009)

Icon software (such as an icon editor) is software for creating and editing computer icons.

Icons underwent a change in appearance from the early 8-bit pixel art used pre-2000 to a more photorealistic appearance featuring effects such as softening, sharpening, edge enhancement, a glossy or glass-like appearance, or drop shadows which are rendered with an alpha channel.

Icon editors used on these early platforms usually contain a rudimentary raster image editor capable of modifying images of an icon pixel by pixel, by using simple drawing tools, or by applying simple image filters. Professional icon designers seldom modify icons inside an icon editor and use a more advanced drawing or 3D modeling application instead.

Icon software is generally only used on Microsoft Windows and Apple Macintosh operating systems. Unix-like operating systems generally use standard image formats such as PNG, SVG, and XPM for icons, which are created and edited with standard image editor programs like GIMP or Inkscape.

The main function performed by an icon editor is generation of icons from images. An icon editor resamples a source image to the resolution and color depth required for an icon. Other functions performed by icon editors are icon extraction from executable files (exe, dll), creation of icon libraries, or saving individual images of an icon.

All icon editors can make icons for system files (folders, text files, etc.), and for web pages. These have a file extension of .ICO for Windows and web pages or .ICNS for the Macintosh. If the editor can also make a cursor, the image can be saved with a file extension of .CUR or .ANI for both Windows and the Macintosh. Using a new icon is simply a matter of moving the image into the correct file folder and using the system tools to select the icon. (In Windows you could go to My Computer, open Tools on the explorer window, choose Folder Options, then File Types, select a file type, click on Advanced and select an icon to be associated with that file type.)

Developers also use icon editors to make icons for specific program files. Assignment of an icon to a newly created program is usually done within the Integrated Development Environment used to develop that program. However, if one is creating an application in the Windows API he or she can simply add a line to the program's resource script before compilation. Many icon editors can copy a unique icon from a program file for editing. Only a few can assign an icon to a program file, a much more difficult task.

Simple icon editors and image to icon converters are also available online as web applications.

Most computer users have thousands of files and it is not practical to manually make icons for all of them. The alternative of using the default program icon is also not ideal, since all files of the same type look the same. To address this problem a number of recent systems have attempted to automatically generate Distinguishable identifiers such as icons.

See also

• Elements of graphical user interfaces
• Icon design
• Inflatable icons
• Distinguishable interfaces
• List of icon software
• Pictogram
• Resource (Windows)
• WIMP (computing)
• Favicon

External links

• Icons at the Open Directory Project
• GNOME Human Interface Guidelines 2.0
• Guidebooks Components - timeline of icons of various graphical user interfaces
• Microsoft's Let's Make a Theme: Customize windows XP - article containing Microsoft's definition of 'icon'.
• Microsoft Developer Network Creating Windows XP Icons
• Microsoft Developer Network Creating Windows Vista Icons
• Apple Developer Connection Introduction to Apple Human Interface Guidelines - contains guidelines for creating Mac OS X icons
• KDE's Icon Style Guide

v · d · eGUI widgets Command input Button · Context menu · Menu · Pie menu Data input-output Checkbox · Combo box · Drop-down list · Grid view · List box · Radio button · Scrollbar · Slider · Spinner · Text box Informational Balloon help · Heads-up display · Icon · Infobar · Label · Loading screen · Progress bar · Splash screen · Status bar · Throbber · Toast · Tooltip Containers Accordion · Disclosure widget · Frame/Fieldset · Menu bar · Panel · Ribbon · Tab · Toolbar · Window Navigational Address bar · Breadcrumb · Hyperlink · Tree view Special windows About box · Alert dialog box · Dialog box · File dialog · Inspector window · Modal window · Palette window Related concepts Layout manager · Look and feel · Mouseover · Widget toolkit · WIMP