Trabajar con .ico en Photoshop.

Para crear un icono en Photoshop, instalamos el Plugin ICO Format, que hace que podamos leer y guardar en la extensión .ico en Photoshop.

Es muy sencillo, bajamos nuestra versión compatible de ICO Format, que es un sólo archivo que copiamos en la carpeta:
C:\Program Files\Adobe\Adobe Photoshop CS6 (64 Bit)\Required\Plug-Ins\File Formats
O la ruta equivalente de nuestra versión del programa, y con esto ya podemos leer y guardar en extensión .ico con Photoshop.


Crear .ico con varias resoluciones.

El formato .ico admite empaquetar en un sólo archivo el mismo icono en distintas resoluciones (xcode, iconset), como pueden ser: 16x16, 24x24x 48x48, 64x64, 96x96x 128x128, 512x512, etc, para que en cada caso cargue el del tamaño que necesite.

El anterior pluging de Photoshop permite leer estos archivos, y cuando abrimos un .ico con varias resoluciones, nos da a elegir cuál queremos visualizar o editar, pero recordemos que una vez modificado desde Photoshop sólo podremos guardar la versión de tamaño que estamos visualizando. No nos permite guardarlo en este modo de varias resoluciones.

Sí queremos un .ico empaquetado con diferentes tamaños, podemos crear en Photoshop la imagen en las distintas resoluciones (16x16, 32x32, etc) guardar los archivos independientes (en .ico, .png, o .gif), y luego juntarlos en un único .ico con un programa.


Editores de Iconos.

Aquí algunas aplicaciones gratuitas online:

iConvert Icons Online es una aplicación online que nos junta varios archivos en un único .ico (su versión online es gratuita, aunque dispone de una aplicación de escritorio de pago por unos 4€).

X Icon Editor es una aplicación online que te permite subir un icono de tu disco duro y te genera automáticamente hasta 4 resoluciones para tu .ico (64, 32, 24 y 16) que luego puedes exportar. O bien dibujar cada una de ellas directamente desde el navegador, con una interfaz tipo Paint.

Y aquí otras aplicaciones gratuitas de escritorio:

PixelFormer es una aplicación de escritorio algo más avanzada, con capas, para crear iconos de cualquier tamaño. Muy recomendable y completa.

Free Junior Icon Editor es una aplicación muy básica para crear iconos, para quien busca algo más sencillo, con una interfaz muy similar al Paint, para crear iconos dedesde 16 hasta 64 px de tamaño. La versión gratuita abre 2 ventanas de publicidad de iconos al abrir y cerrar el programa.


Establecer un favicon en una página web.

El favicon que se muestra en la barra de dirección, la lista de marcadores/favoritos, o en las pestañas del navegador, suele tener una imagen con tamaño estándar de 16x16 px (o un .ico de 16x16 + 32x32), y se guarda con el nombre favicon.ico en la carpeta raíz del directorio web. Este será el que los navegadores carguen por defecto en las páginas salvo que indiquemos lo contrario en el html.

Para agregar un favicon en un html concreto, introducimos dentro del <head>, uno de los siguientes códigos, según la extensión de archivo que tenga:

.ico: <link rel="shortcut icon" href="archivo.ico" />

.ico con varias resoluciones: <link rel="icon" type="image/x-icon" href="archivo.ico" />

.png, .gif, etc: <link rel="icon" type="image/png" href="imagen.png" />
(definimos extensión en type)


Pack de iconos del Capitán Icono.


Captain Icon: Free Vector icon set

El diseñador Mario del Valle, nos trae este set de iconos para descargar gratis, con más de 350 iconos vectoriales en múltiples formatos de imagen, EPS, PSD, PNG, SVG y Web Font, para utilizar en proyectos de diseño web, móvil e interfaces.

Puedes descargarlo gratis en captainicon.com