Icons and logos

Icons: how many of them do we see each day, working with the computer, browsing webpages, indicating the functions of the electronic equipment, guiding us in a public space...? These small images are very useful to lead us in all these situations. They direct our view to the key points.

Icons are, therefore, images with a special function of (discreet) visual attraction. Attraction without distracting, and barely increasing the size of documents, since usually they are small images, they are a visual accent which guide us.

Where do we use icons?

The icons are used for two main assignments:

In the interface of programs, they identify the folders, applications, archives or tools. They are the habitual icons of the desktop or the programs in Windows or Mac.
Like graphical elements in documents and the web pages. The icons serve here to identify sections, to separate paragraphs, like graphical accent or small illustration.

How to create icons

Puesto que como iconos hablamos de cosas muy diferentes en el caso de los iconos del propio sistema y en el caso de los Elements gráficos, debemos separar ambos casos. Since icons are two very different things in the case of system icons and the case of graphical elements, we must separate both cases.

Icons for programs.

An icon of the system does not have anything special; it is habitually an image in bitmap, although it is saved in a special format. Some applications use symbol fonts (dingbats) to generate their own icons of variable size. In Windows, the individual icons usually are files with an extension ico, but dll or exe may contain icons, sometimes a huge number of them. For example, when we want to change the icon that represents a document or programs, and see there are several icons to choose, it is a file of this type which contains them in form of library of icons (to change the icon of a program or a document, you have to click on its icon with the right button, to choose Properties, and in the dialog box that appears, choose Shortcut|Change icon...)

The easiest way to create an icon is to create the image in a painting program, such as Paint, and later to trim a square of 16x16 pixels (for small icons) or of 32x32 (greater icons.) If we save the file with the extension already ICO we will have an icon.

Anyway, special applications for the creation of icons for the system exist; let us see some of these.

MicroAngelo and Icon Collector are well-known shareware editors.

Icon Snatcher is an interesting program —freeware— which is able to extract icons of collections with the extension icl, in addition to the habitual icon libraries (the exe or dll files.) It can save the icons as BMP, ICO, or as GIF, which makes it very useful for the creation of icons for the Web pages. It can even automatically generate a HTML page with the selected icons. Very recommended.

Mac systems often use fancier icons; and in addition a bigger variety of icons available exist, more sites in the Web where you can download collections, etc. Nevertheless, its format is different from the one of the icons for PC. The solution is an application called MacIco, which will let you convert Mac icons to its PC counterpart. You can get it from http://www.xemico.com/software.html.

Favourite -bookmark icons

The new versions of Internet Explorer (5 or later) and Mozilla / Firefox have introduced a new application for the icons. The favorites or bookmarks can be identified with an icon that we can choose freely. But this isn’t all. If we upload an icon to the web server (name-icon.ico) it will appear in the browser of all the visitors in the address bar and the list of bookmarks, and in all the pages which include within the labels of <head> the following snippet: <link rel="shortcut icon" href="http://www.mypagename.com/name-of-icon.ico">

The icon can be created with any application, andthere are even services online to create them, like in http://www.favicon.com/applet.html; it is better to create it small, in 16 colors, 16x16 pixels and to leave to the navigator or the system to create other sizes if necessary.

Another variant of the use of the icons is the creation of animated icons for the system: mouse pointers, clocks...

Icons as small illustrations.

One second meaning of the term icon is in the small images that go together with documents and web pages. Normally its function is to signalize, although also they can work like simple illustrations. We can use monochrome images or we may decide to use icons in full colour, based on the necessities of the work.

These icons are normal images. For example, for a page Web, typically, one icon will be a PNG, JPEG or a GIF file. Given the small dimensions of the icons, even a photographic treatment will not even suppose an excessive size.

To create these images, vectorial drawing programs are perfect: we can work on the scale we wish, or change the size of the images without quality loss, and manipulate the forms freely. When everything is ready one, we export the image in the format that we need.

The more versatile source of images for icons —and for so many other graphic design needs— is your Dingbats collection (pictorial typefaces.) Available in any program, they are a varied and plentiful source of images to create the icons. The perfect combination: a vectorial illustration program and dingbats. Our contribution: the series of Deskspace, Fazzes and Antypepatics, available for free in our pages of Typephases Design.

En las barras de navegación de las páginas web, los pequeños iconos encuentran una application muy importante. Pequeños gráficos, de 20 a 30 píxels de lado o incluso menos, pueden cumplir perfectamente esta misión. Por lo que respecta a iconos para cabeceras de páginas, pueden añadirse efectos de "rollover" y también utilizar diferentes colores para dar información adicional de dónde se encuentra el visitante. Por ejemplo, es frecuente que se utilice la convención de que la sección actual está resaltada de alguna manera, mientras que las secciones relacionadas aparecen en color más pálido, más oscuro o desenfocadas, tal como vemos, por ejemplo, en la parte superior de esta misma página. In the navigation bars of the webpages, the small icons are very important. Small graphics, 20 or 30 pixel wide or even less, can do perfectly. Icons can be also used for page headings, rollover effects, lists, and also to use different colors to give additional information to the visitor. For example, they are frequently used with the convention of having the current section highlighted, whereas the related, inactive sections appear in paler color, darker or dimmed.

Finally, icons do not need to be static. A simple animation can be an ideal solution to indicate something in a screen. There are few secrets to create animations. We can generate them like a GIF, or we can also use Flash (as we discuss in the section of graphics for the Web.) For animated icons it is preferable to choose an animated GIF. Its size will be small and surely that it will show up in the navigator no matter if the flash plugin is installed or not.