Crear iconos para Windows y Mac

Yo prácticamente sólo necesito crear iconos para las web, pero también voy a exponer la manera de crear iconos de archivo, tanto para Windows como para Mac, con herramientas gratuítas.

Iconos de archivos en Windows

Windows XP utiliza el sistema .ico para sus iconos. Los .ico son como una imagen que alberga varias imágenes con distinta resolución o número de colores.

Las resoluciones que usa Windows son 16×16, 32×32 y 48×48. Cada una de ellas podría estar en 16 o 256 colores. Por lo tanto en primer lugar necesitaremos crear 6 imágenes de esas características (16×16 a 16 colores, 16×16 a 32 colores, etc.), preferiblemente en PNG, ya que soporta transparencias.

Yo uso un comando de consola llamado png2ico que transforma PNGs a un fichero .ico.

Basta copiarlo a un directorio con los PNGs que hemos creado y desde la consola de comandos ejecutar algo así:

png2ico icon.ico --colors 256 icon_16_256.png icon_32_256.png icon_48_256.png --colors 16 icon_16_16.png icon_32_16.png icon_48_16.png

Si queremos que ese icono aparezca como icono del archivo deberemos utilizar un resource editor para abrirlo y cambiárselo. Existen varias alternativas gratuitas como XN Resource Editor o ResourceHacker.

Si estamos gravando un CD y queremos que aparezca con ese icono (y de paso que se atoejecute) necesitamos grabar al CD un autorun.inf con las siguientes líneas:

[autorun]
open=run.exe
icon=icon.ico

Iconos de archivos en Mac OS X Tiger

Mac OS X Tiger soporta PNGs directamente y una resolución de iconos de 128×128. Para personalizar el icono de cualquier archivo primero se copia la imagen y luego en el Get Info del archivo se hace click en el icono de la parte superior izquierda y se pega. Hay que copiar directamente el source de la imagen (con abrirla en el Preview y copiar basta), o también se puede copiar el icono desde el Get Info de otro archivo.

Si queremos crear iconos .ico para Windows podemos usar el icoMaker. Muy sencillo: ejecutamos, File>New document y arrastramos a las casillas correspondientes los formatos de imagen que necesitemos (si el icono es para el navegador basta con 16×16 a 16 colores).

Si queremos transformar un icono de Mac a uno de Windows podemos usar el icon2ico. Hay que arrastrar el archivo que tiene el icono al icon2ico.app, y automáticamente crea un .ico en la carpeta original con todas las resoluciones y colores.

Iconos de navegador o favicon.ico

Hoy en día todos los navegadores soportan éstos iconos, que aparecen alado de la dirección, o en la pestaña, o en los bookmarks.

Para éste icono basta con que sea un .ico de 16×16 y 16 colores.

Luego basta con subir el favicon.ico y añadir lo siguiente al header del HTML:

<link rel="icon" href="/favicon.ico" type="image/x-icon" />

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />

Update: Basta con poner el fichero favicon.ico en el directorio raíz, y los navegadores ya lo encuentran solitos.

Compatibilidad

No he encontrado software (almenos gratuito) en OS X para cambiar el icono a un archivo de Windows, así como no he encontrado software en Windows para cambiar el icono de un archivo OS X. De todas formas si se desarrolla para ambos sistemas, deberemos tenerlos para testear, por lo que no supone problema.

Windows Vista va a añadir otra imagen de 256×256. Esperemos que los programas utilizados se actualicen para soportar los nuevos .ico.