Computer icon
Encyclopedia
A computer icon is a pictogram
Pictogram
A pictograph, also called pictogram or pictogramme is an ideogram that conveys its meaning through its pictorial resemblance to a physical object. Pictographs are often used in writing and graphic systems in which the characters are to considerable extent pictorial in appearance.Pictography is a...

 displayed on a computer screen and used to navigate a computer system or mobile device. The icon
Icon
An icon is a religious work of art, most commonly a painting, from Eastern Christianity and in certain Eastern Catholic churches...

 itself is a small picture or symbol serving as a quick, intuitive representation of a software tool, function or a data file accessible on the system. It functions as an electronic hyperlink
Hyperlink
In computing, a hyperlink is a reference to data that the reader can directly follow, or that is followed automatically. A hyperlink points to a whole document or to a specific element within a document. Hypertext is text with hyperlinks...

 or file shortcut to access the program or data. Computer icons, in conjunction with computer windows
Window (computing)
In computing, a window is a visual area containing some kind of user interface. It usually has a rectangular shape that can overlap with the area of other windows...

, menus
Menu (computing)
In computing and telecommunications, a menu is a list of commands presented to an operator by a computer or communications system. A menu is used in contrast to a command-line interface, where instructions to the computer are given in the form of commands .Choices given from a menu may be selected...

 and a pointing device, form the graphical user interface
Graphical user interface
In computing, a graphical user interface is a type of user interface that allows users to interact with electronic devices with images rather than text commands. GUIs can be used in computers, hand-held devices such as MP3 players, portable media players or gaming devices, household appliances and...

 (GUI) of the computer system, and enable the user to easily and intuitively navigate the system. Computer icons belong to the much larger topic of the history of the graphical user interface
History of the graphical user interface
The graphical user interface, understood as the use of graphic icons and a pointing device to control a computer, has a four decade history of incremental refinements built on some constant core principles...

.

The icons displayed on the screen represent data files or tools accessible on the system. In activating (clicking on) an icon, the user can move directly into and out of the identified function without knowing anything further about the location or requirements of the file. On most systems, standard computer icons can be created and deleted, replicated, selected, clicked or double-clicked, and dragged to a new position on the screen to create a customized user environment.

The standard icons found on many computer systems and mobile devices have originated in disparate professional arenas. The power on/off symbol and the USB icon are examples of icons taken from the standardized electronic symbols and icons used across all electronic devices. Another group of icons was developed to represent different physical objects found in the office environment. This includes the icons for files, file folders and trashcans, etc. which were bundled into the commercially successful desktop metaphor GUI model first commercially available in the 1980s. A third type of icon used extensively in computer systems is the brand icon used to identify commercial software programs. These commercial icons serve as functional links on the system to the program or data files created by a specific software company.

The design of all computer icons is constricted by the limitations of the device display. They are limited in size, with the standard size about a thumbnail for both desktop computer systems and mobile devices. They are frequently scalable, as they are displayed in different positions in the software. The colors used, of both the image and the icon background, should stand out on different system backgrounds. The detailing of the icon image needs to be simple, remaining recognizable in varying graphical resolutions and screen sizes. Icons are by definition language independent; they do not rely on letters or words to convey their meaning. These visual parameters place rigid limits on the design of icons, frequently requiring the skills of a graphic artist in their creation.

Because of their condensed size and versatility, computer icons have become a mainstay of user interaction with electronic media. The icon transmits information and provides system functionality in an abbreviated pictorial form to the user. Icons also provide rapid entry into the system functionality. With the development of multiple forms of display screens, the user can interact with the icons using a mouse, pointer, finger, or voice command. Their placement on the screen, also in relation to other icons, may provide further information to the user about their usage. They can do each of these functions far more effectively than words on the screen.

Standardized electrical device icons

Some common computer icons are taken from the broader field of standardized icons used across a wide range of electrical equipment. Examples of these are the power symbol
Power symbol
A power symbol is a symbol indicating that a control activates or deactivates a particular device. It incorporates line and circle figures, with the arrangement informed by the function of the control...

 and the USB icon, which are found on a wide variety of electronic devices. The standardization of electronic icons is an important safety feature on all types of electronics, enabling a user to more easily navigate an unfamiliar system. As a subset of electronic devices, computer systems and mobile devices use many of the same icons; they are incorporated into the design of both the computer hardware and on the software. On the hardware, these icons identify the functionality of specific buttons and plugs. In the software, they provide a link into the customizable settings.

System warning icons also belong to the broader area of ISO standard warning signs. These warning icons, first designed to regulate automobile traffic in the early 1900’s, have become standardized and widely understood by users without necessity of further verbal explanations. In designing software operating systems, different companies have incorporated and defined these standard symbols as part of their graphical user interface. For example, the Microsoft MSDN defines the standard icon use of error, warning, information and question mark icons as part of their software development guidelines.

Different organizations are actively involved in standardizing these icons, as well as providing guidelines for their creation and use. The International Electrotechnical Commission (IEC) has defined “Graphical symbols for use on equipment”, published as IEC 417, a document which displays IEC standardized icons. Another organization invested in the promotion of effective icon usage is the ICT (information and communications technologies), which has published guidelines for the creation and use of icons. Many of these icons are available on the internet, either to purchase or as freeware to incorporate into new software.

Desktop metaphor icons

A second type of hyperlink icon represents objects common in a physical office space and desktop environment. It includes the basic icons used for a file, file folder, trashcan, inbox, together with the spatial real estate of the screen, i.e. the electronic desktop. This model originally enabled users, familiar with common office practices and functions, to intuitively navigate the computer desktop and system. (Desktop Metaphor, pg 2). The icons stand for objects or functions accessible on the system, and enable the user to do tasks common to an office space. These desktop computer icons developed over several decades; data files in the 1950s, the hierarchical storage system (i.e. the file folder and filing cabinet) in the 1960s, and finally the desktop metaphor
Desktop metaphor
The desktop metaphor is an interface metaphor which is a set of unifying concepts used by graphical user interfaces to help users more easily interact with the computer. The desktop metaphor treats the monitor of a computer as if it is the user's desktop, upon which objects such as documents and...

 itself (including the trashcan) in the 1970s.

The first commercially available personal computing system based on the desktop metaphor, the Xerox STAR was released in 1981. "The icons on [the desktop] are visible concrete embodiments of the corresponding physical objects." The desktop and icons displayed in this first desktop model are easily recognizable by users several decades later, and display the main components of the desktop metaphor GUI.

This model of the desktop metaphor has been adopted by most personal computing systems in the last decades of the 20th century; it remains popular as a "simple intuitive navigation by single user on single system." It is only at the beginning of the 21st century that personal computing is evolving a new metaphor based on internet connectivity and teams of users, Cloud Computing
Cloud computing
Cloud computing is the delivery of computing as a service rather than a product, whereby shared resources, software, and information are provided to computers and other devices as a utility over a network ....

. In this new model, data and tools are no longer stored on the single system, instead they are stored someplace else, “in the cloud”. The cloud metaphor is replacing the desktop model; it remains to be seen how many of the common desktop icons (file, file folder, trashcan, inbox, filing cabinet) find a place in this new metaphor.

Brand icons for commercial software

A further type of computer icon is the brand
Brand
The American Marketing Association defines a brand as a "Name, term, design, symbol, or any other feature that identifies one seller's good or service as distinct from those of other sellers."...

 icon of commercial third-party software programs available on the computer system. These brand icons are bundled with their product and installed on a system with the software. They function in the same way as the hyperlink icons described above, representing functionality accessible on the system and providing links to either a software program or data file. Over and beyond this, they act as a company identifier and advertiser for the software or company.

Because these company and program logo
Logo
A logo is a graphic mark or emblem commonly used by commercial enterprises, organizations and even individuals to aid and promote instant public recognition...

s represent the company and product itself, much attention is given to their design, done frequently by commercial artists. To regulate the use of these brand icons, they are trademark
Trademark
A trademark, trade mark, or trade-mark is a distinctive sign or indicator used by an individual, business organization, or other legal entity to identify that the products or services to consumers with which the trademark appears originate from a unique source, and to distinguish its products or...

 registered and are considered part of the company intellectual property.

Placement and spacing

In order to display the number of icons representing the growing complexity offered on a device, different systems have come up with different solutions for screen space management. The computer monitor continues to display primary icons on the main page or desktop, allowing easy and quick access to the most commonly used functions for a user. This screen space also invites almost immediate user customization, as the user adds favorite icons to the screen and groups related icons together on the screen. Secondary icons of system programs are also displayed on the task bar or the system dock
Dock (computing)
The Dock is a prominent feature of the graphical user interface of the Mac OS X operating system. It is used to launch applications and switch between running applications...

. These secondary icons do not provide a link like the primary icons, instead they are used to show availability of a tool or file on the system.Pamela Ravasio and Vincent Tscherter (2007). "User’ Theories of the Desktop Metaphor, or Why we should seek Metaphor-Free Interfaces", pg 270 ff

Spatial management techniques play a bigger role in mobile devices with their much smaller screen real estate. In response, mobile devices have introduced, among other visual devices, scrolling screen displays and selectable tabs displaying groups of related icons. Even with these evolving display systems, the icons themselves remain relatively constant in both appearance and function.

Above all, the icon itself must remain clearly identifiable on the display screen regardless of its position and size. Programs might display their icon not only as a desktop hyperlink, but also in the program title bar, on the Start menu, in the Microsoft tray or the Apple dock. In each of these locations, the primary purpose is to identify and advertise the program and functionality available. This need for recognition in turn sets specific design restrictions on effective computer icons.

Design

In order to maintain consistency in the look of a device, OS manufacturers offer detailed guidelines for the development and use of icons on their systems. This is true for both standard system icons and third party application icons to be included in the system. The system icons currently in use have typically gone through widespread international acceptance and understandability testing. Icon design factors have also been the topic for extensive usability studies. The design itself involves a high level of skill in combining an attractive graphic design with the required usability features.

Shape

The icon needs to be clear and easily recognizable, able to display on monitors of widely varying size and resolutions. Its shape should be simple with clean lines, without too much detailing in the design. Together with the other design details, the shape also needs to make it unique on the display and clearly distinguishable from other icons.

Color

The icon needs to be colorful enough to easily pick out on the display screen, and contrast well with any background. With the increasing ability to customize the desktop, it is important for the icon itself to display in a standard color which cannot be modified, retaining its characteristic appearance for immediate recognition by the user. Through color it should also provide some visual indicator as to the icon state; activated, available or currently not accessible (greyed out).

Size and scalability

The standard icon is generally the size of an adult thumb, enabling both easy visual recognition and use in a touchscreen
Touchscreen
A touchscreen is an electronic visual display that can detect the presence and location of a touch within the display area. The term generally refers to touching the display of the device with a finger or hand. Touchscreens can also sense other passive objects, such as a stylus...

 device. For individual devices the display size correlates directly to the size of the screen real estate and the resolution of the display. Because they are used in multiple locations on the screen, the design must remain recognizable at the smallest size, for use in a directory tree or title bar, while retaining an attractive shape in the larger sizes. Larger icons serve also as part of the accessibility features for the visually impaired on many computer systems.

Localization

In its primary function as a symbolic image, the icon design should ideally be divorced from any single language. For products which are targeting the international marketplace, the primary design consideration is that the icon is non-verbal; localizing text in icons is costly and time consuming.

Cultural context

Beyond text, there are other design elements which can be dependent upon the cultural context for interpretation. These include color, numbers, symbols, body parts and hand gestures. Each of these elements needs to be evaluated for their meaning and relevance across all markets targeted by the product.

Related visual tools

Other graphical devices used in the computer user interface fulfill GUI functions on the system similar to the computer icons described above. However each of these related graphical devices differs in one way or another from the standard computer icon.

Windows

The graphical window
Window (computing)
In computing, a window is a visual area containing some kind of user interface. It usually has a rectangular shape that can overlap with the area of other windows...

 on the computer screen share some of the visual and functional characteristics of the computer icon. Windows can be minimized to an icon format to serve as a hyperlink to the window itself. Multiple windows can be open and even overlapping on the screen. However where the icon provides a single button to initiate some function, the principal function of the window is a workspace, which can be minimized to an icon hyperlink when not in use.

Control widgets

Over time, standardized GUI widgets have been introduced to the computer desktop interface, graphical controls which are used across computer systems, and can be intuitively manipulated by the user. Examples of these control widgets are scroll bars, sliders, listboxes and buttons used in many programs. Using these widgets, a user is able to define and manipulate the data and the display for the software program they are working with. The first set of computer widgets was originally developed for the Xerox Alto. Now they are commonly bundled in widget toolkits and distributed as part of a development package. These control widgets are standardized pictograms used in the graphical interface, they offer an expanded set of user functionalities beyond the hyperlink function of computer icons.

Emoticons

Another GUI icon is exemplified by the smiley
Smiley
A smiley, smiley face, or happy face, is a stylized representation of a smiling human face, commonly occurring in popular culture. It is commonly represented as a yellow circle with two black dots representing eyes and a black arc representing the mouth...

 face, a pictogram embedded in a text message. The smiley, and by extension other emoticon
Emoticon
An emoticon is a facial expression pictorially represented by punctuation and letters, usually to express a writer’s mood. Emoticons are often used to alert a responder to the tenor or temper of a statement, and can change and improve interpretation of plain text. The word is a portmanteau word...

s, are used in computer text to convey information in a non-verbal binary shorthand, frequently involving the emotional context of the message. These icons were first developed for computers in the 1980’s as a response to the limited storage and transmission bandwidth used in electronic messaging. Since then they have become both abundant and more sophisticated in their keyboard representations of varying emotions. They have developed from keyboard character combinations into real icons. They are widely used in all forms of electronic communications, always with the goal of adding context to the verbal content of the message. In adding an emotional overlay to the text, they have also enabled electronic messages to substitute for and frequently supplant voice-to-voice messaging.

These emoticons are very different than the icon hyperlinks described above. They do not serve as links, are not part of any system function or computer software. Instead they are part of the communication language of users across systems. For these computer icons, customization and modifications are not only possible but in fact expected of the user.

Hyperlinks

A text hyperlink
Hyperlink
In computing, a hyperlink is a reference to data that the reader can directly follow, or that is followed automatically. A hyperlink points to a whole document or to a specific element within a document. Hypertext is text with hyperlinks...

 performs much the same function as the functional computer icon, it provides a direct link to some function or data available on the system. Although they can be customized, these text hyperlinks generally share a standardized recognizable format, blue text with underlining. Hyperlinks differ from the functional computer icons in that they are normally embedded in text, whereas icons are displayed as stand-alone on the screen real estate. They are also displayed in text, either as the link itself or a friendly name, whereas icons are defined as being primarily non-textual.

Icon creation

Because of the design requirements, icon creation can be a time-consuming and costly process. There are a plethora of icon creation tools to be found on the internet, ranging from professional level tools through utilities bundled with software development programs to stand-alone freeware. Given this wide availabity of icon tools and icon sets, a problem can arise with custom icons which are mismatched in style to the other icons included on the system.

Tools

Icons underwent a change in appearance from the early 8-bit pixel art
Pixel art
Pixel art is a form of digital art, created through the use of raster graphics software, where images are edited on the pixel level. Graphics in most old computer and video games, graphing calculator games, and many mobile phone games are mostly pixel art.- History :The term pixel art was first...

 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.

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
ICO (icon image file format)
The ICO file format is an image file format for computer icons in Microsoft Windows. ICO files contain one or more small images at multiple sizes and color depths, such that they may be scaled appropriately...

 for Windows and web pages or .ICNS
Apple Icon Image
The Apple Icon Image format is the icon format used in Apple Inc.'s Mac OS X. It supports icons of 16×16, 32×32, 48×48, 128×128, 256×256 and 512×512 pixels, with both 1- and 8-bit alpha channels and multiple image states...

 for the Macintosh. If the editor can also make a cursor, the image can be saved with a file extension of .CUR
ICO (icon image file format)
The ICO file format is an image file format for computer icons in Microsoft Windows. ICO files contain one or more small images at multiple sizes and color depths, such that they may be scaled appropriately...

 or .ANI
ANI (file format)
The ANI file format is a graphics file format used for animated mouse cursors on the Microsoft Windows operating system.The format is based on the Microsoft RIFF file format, which is used as a container for storing the individual frames of the animation.- File structure :Animated cursors contain...

 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
Integrated development environment
An integrated development environment is a software application that provides comprehensive facilities to computer programmers for software development...

 used to develop that program. However, if one is creating an application in the Windows API
Windows API
The Windows API, informally WinAPI, is Microsoft's core set of application programming interfaces available in the Microsoft Windows operating systems. It was formerly called the Win32 API; however, the name "Windows API" more accurately reflects its roots in 16-bit Windows and its support on...

 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 application
Web application
A web application is an application that is accessed over a network such as the Internet or an intranet. The term may also mean a computer software application that is coded in a browser-supported language and reliant on a common web browser to render the application executable.Web applications are...

s.

Commercial icons

In addition to these tools, ready-made icon sets are readily available to be purchased or downloaded for free. They can frequently found in theme-related internet sites and forums. The problem with incorporating ready-made icons in a software package is that it can lead to an unpolished look in the software and on the system which displays stylistically mismatched icons from a variety of sources.

List

This is a list of notable computer icon software.
  • @icon sushi
    @icon sushi
    @icon sushi is a conversion and creation computer icon freeware software tool for Microsoft Windows with support for Windows Vista. It has the ability to import icons from ICO, BMP, PNG, PSD, EXE, DLL and ICL formats and can export as ICO, BMP, PNG and ICL...

     – Computer icon conversion and creation. (Freeware, Windows)
  • Axialis IconWorkshop
    Axialis IconWorkshop
    Axialis IconWorkshop is an icon editor developed by Axialis Software. IconWorkshop can create icons for Windows , Macintosh and UNIX-like systems . IconWorkshop includes a library of objects that can be put together to create many different styles of icons...

     - Supports both Windows and Mac icons. (Commercial, Windows)
  • IcoFX
    IcoFX
    IcoFX is an icon creation software for Microsoft Windows. Previously a freeware, it allows editing multiple formats of icons with support for transparency. Icons can also be converted from one format to another, for instance from a Macintosh icon to a Windows icon. It's also possible to import any...

     - Icon editor supporting Windows Vista and Macintosh icons with PNG compression (Commercial, Windows)
  • IconBuilder
    IconBuilder
    IconBuilder is a popular plugin for Adobe Photoshop, Adobe Photoshop Elements and Macromedia Fireworks for the editing and creation of computer icons created and used by The Iconfactory. It supports all icon sizes for both Mac OS X and Microsoft Windows...

     - Plug-in for Photoshop; focused on Mac. (Commercial, Windows/Mac)
  • Microangelo Toolset
    Microangelo Toolset
    Microangelo Toolset is a collection of software utilities for editing Microsoft Windows computer icons and cursors....

     - a set of tools (Studio, Explorer, Librarian, Animator, On Display) for editing Windows icons and cursors. (Commercial, Windows)


The following is a list of raster graphic applications capable of creating and editing icons:
  • GIMP
    GIMP
    GIMP is a free software raster graphics editor. It is primarily employed as an image retouching and editing tool and is freely available in versions tailored for most popular operating systems including Microsoft Windows, Apple Mac OS X, and Linux.In addition to detailed image retouching and...

     – Supports reading and writing Windows ICO files.
  • ImageMagick
    ImageMagick
    ImageMagick is an open source software suite for displaying, converting, and editing raster image files. It can read and write over 100 image file formats. ImageMagick is licensed under the Apache 2.0 license.- Features and capabilities:...

  • IrfanView
    IrfanView
    IrfanView is a freeware/shareware image viewer for Microsoft Windows that can view, edit, and convert image files and play video/audio files. It is noted for its small size, speed, ease of use, and ability to handle a wide variety of graphic file formats, and has some image creation and painting...

     – Support converting graphic file formats into Windows ICO files.

See also

  • Distinguishable interfaces
    Distinguishable interfaces
    Distinguishable interfaces use computer graphic principles to automaticallygenerate easily distinguishable appearance for computer data.Although the desktop metaphor revolutionized user interfaces, there is evidence...

  • Earcon
    Earcon
    An earcon is a brief, distinctive sound used to represent a specific event or convey other information. Earcons are a common feature of computer operating systems and applications, ranging from beeping when an error occurs to the customizable sound schemes of Windows 7 that indicate startup,...

  • Elements of graphical user interfaces
    Elements of graphical user interfaces
    Graphical user interfaces, also known as GUIs, offer a consistent visual language to represent information stored in computers. This makes it easier for people with little computer skills to work with and use computer software....

  • Favicon
    Favicon
    A favicon , also known as a shortcut icon, Web site icon, URL icon, or bookmark icon, is a file containing one small icons, most commonly 16×16 pixels, associated with a particular Web site or Web page...

  • Icon design
    Icon design
    Icon design is the process of designing a graphic symbol that represents some real, fantasy or abstract motive, entity or action. In the context of software applications, an icon often represents a program, a function, data or a collection of data on a computer system.Icon designs can be simple,...

  • Inflatable icons
    Inflatable Icons
    ‎Inflatable Icons refers to a technique that turns 2D icons into 3D models. There are many applications for this technique such as rapid prototyping, simulations and presentations, where non-professional computer users could benefit from the ability to create simple 3D models...

  • Pictogram
    Pictogram
    A pictograph, also called pictogram or pictogramme is an ideogram that conveys its meaning through its pictorial resemblance to a physical object. Pictographs are often used in writing and graphic systems in which the characters are to considerable extent pictorial in appearance.Pictography is a...

  • Resource (Windows)
    Resource (Windows)
    In Microsoft Windows, resources are read-only data embedded in EXE, DLL, CPL or MUI files.The Windows API provides for easy access to all applications' resources.-Types:...

  • WIMP (computing)
    WIMP (computing)
    In human–computer interaction, WIMP stands for "windows, icons, menus and pointers", denoting a style of interaction using these elements. It was coined by Merzouga Wilberts in 1980...


External links

The source of this article is wikipedia, the free encyclopedia.  The text of this article is licensed under the GFDL.
 
x
OK