¿Qué es ICO? Archivos de icono y favicons explicados

ICO es el formato que usa Windows para los iconos de programas y carpetas, y que usa la web para el pequeño icono del sitio que aparece en la pestaña del navegador (el favicon). Lo que lo distingue de otros formatos de imagen es que un solo archivo puede contener varios tamaños del mismo icono. En este artículo verás la estructura interna de un archivo ICO, cómo evolucionó con las versiones de Windows, la historia del favicon, qué tamaños necesitas hoy y cómo crear archivos ICO correctamente.

¿Qué es ICO?

ICO (extensión .ico) es un formato contenedor que Microsoft definió para los recursos de icono. Un archivo ICO empieza con un «directorio de iconos» que enumera como entradas independientes todas las imágenes del archivo (por ejemplo, de 16x16, 32x32 y 48x48 píxeles). Después, Windows o el navegador eligen el tamaño que mejor encaja en el lugar donde se muestra el icono.

El tipo MIME oficial registrado en IANA es image/vnd.microsoft.icon, pero el software de Microsoft y muchos servidores siguen usando image/x-icon. El formato CUR de los cursores del ratón es casi idéntico; usa un 2 en lugar de un 1 en el campo de tipo del directorio y guarda el punto de clic del cursor (hotspot).

Historia: de los iconos de Windows al favicon

• Windows 1.0: los iconos eran monocromos.
• Windows 3.0: llegó la estructura basada en un directorio con varias imágenes, tal como la conocemos hoy.
• 1995: el artículo «Icons» de John Hornick, de Microsoft, documentó en detalle la estructura ICO y aconsejó a los desarrolladores incluir al menos imágenes de 16x16 (16 colores), 32x32 (16 colores) y 48x48 (256 colores).
• Marzo de 1999: Internet Explorer 5 fue el primer navegador compatible con favicons. Un archivo favicon.ico en la raíz del sitio se mostraba en los favoritos y en la barra de direcciones.
• Windows XP: se añadió un canal alfa de 8 bits a las imágenes de 32 bits, lo que hizo posibles los bordes suaves y semitransparentes.
• Windows Vista: se añadieron las imágenes de 256x256 y la compresión PNG dentro de ICO.
• 2003: un tercero presentó a IANA el tipo MIME image/vnd.microsoft.icon.

Estructura de un archivo ICO

Directorio de iconos (ICONDIR)

El archivo empieza con una cabecera de 6 bytes: un campo reservado (0), el tipo (1 para iconos, 2 para cursores) y el número de imágenes. A continuación viene una entrada de directorio de 16 bytes por cada imagen.

Entrada de directorio (ICONDIRENTRY)

Como los campos de tamaño ocupan un solo byte, una imagen dentro de un ICO puede medir como máximo 256x256 píxeles.

Datos de imagen: BMP o PNG

En un ICO clásico, cada imagen es un BMP sin su cabecera de archivo (un DIB). Según el artículo de Hornick, contiene una imagen en color (la máscara XOR) seguida de una máscara de transparencia de 1 bit (la máscara AND); por eso la altura guardada en la cabecera es la altura combinada de ambas máscaras, el doble de la altura real. A partir de Windows XP, las imágenes de 32 bits llevan su canal alfa directamente en los datos de los píxeles.

Desde Windows Vista, una entrada también puede ser un archivo PNG completo en lugar de un BMP. Incrustar PNG, sobre todo para el tamaño de 256x256, hace el archivo mucho más pequeño. MDN señala que el PNG dentro de ICO no era compatible antes de Vista y puede dar problemas en software antiguo, pero los navegadores y las versiones de Windows actuales leen ambos tipos.

¿Qué tamaños necesitas?

Iconos de aplicaciones de Windows

Las indicaciones actuales de Microsoft sobre iconos de aplicaciones dicen que una aplicación Win32 debe incluir al menos 16x16, 24x24, 32x32, 48x48 y 256x256. Si Windows no encuentra una coincidencia exacta, reduce el siguiente tamaño mayor; si hay una imagen de 256 píxeles, el icono solo se reduce y nunca se amplía. Con una escala del 100 %, por ejemplo, la barra de título y los menús contextuales usan 16 píxeles y la barra de tareas usa 24; al 200 %, pasan a 32 y 48.

Favicons para sitios web

La web funciona de otra manera. Según el HTML Standard, si una página no tiene un enlace rel="icon", los navegadores pueden pedir /favicon.ico a la raíz del sitio. Por eso sigue siendo buena práctica tener un favicon.ico en la raíz, pero por sí solo no basta:

• La Búsqueda de Google exige un favicon cuadrado (1:1) de al menos 8x8 píxeles y recomienda uno mayor de 48x48 para que se vea bien en distintas superficies.
• Las pantallas de inicio del iPhone y el iPad usan un apple-touch-icon de 180x180.
• Android y las PWA esperan iconos de 192 y 512 píxeles en el manifiesto de la aplicación web, además de una versión «maskable» para los iconos adaptativos.
• Los navegadores actuales también admiten favicons SVG; un solo archivo vectorial sirve para todos los tamaños.

En la práctica, incluir 16, 32 y 48 píxeles en favicon.ico cubre los navegadores de escritorio y los sistemas antiguos, mientras que los tamaños mayores se ofrecen como archivos PNG independientes.

Compatibilidad en sistemas, navegadores y programas

Windows lee y escribe ICO de forma nativa; el Explorador, los accesos directos y el escritorio funcionan con él. Según MDN, Chrome, Edge, Firefox, Opera y Safari muestran archivos ICO. macOS usa su propio formato ICNS para los iconos de aplicaciones, pero Vista Previa abre ICO. Editores como GIMP abren un ICO como archivo con capas, una por tamaño. MDN desaconseja ICO para el contenido web en general y señala que los favicons se han desplazado hacia PNG con un elemento <link>.

Puntos fuertes y débiles

Problemas habituales y cómo resolverlos

¿No basta con cambiar la extensión de un PNG a .ico?

Algunos navegadores lo toleran, pero no es un ICO de verdad: no tiene directorio de iconos y Windows no lo aceptará como icono. Lo correcto es convertir la imagen en un ICO real. Nuestras herramientas de PNG a ICO y de JPG a ICO siempre escriben cuadrados de 16, 32 y 48 píxeles y añaden 64, 128 y 256 cuando tu imagen es lo bastante grande. Cada tamaño se incrusta como PNG, así que se conserva la transparencia.

El favicon se ve borroso o ilegible

Las líneas finas y el texto pequeño desaparecen en 16 píxeles. Usa un símbolo simple, grueso y de alto contraste; si hace falta, toma solo la parte del símbolo de tu logotipo. Una imagen de origen cuadrada de al menos 256x256 píxeles, idealmente de 512x512, da el mejor resultado.

Una imagen no cuadrada se ve aplastada o estirada

Los iconos son cuadrados. Nuestras herramientas nunca estiran la imagen: la centran en un cuadrado manteniendo sus proporciones y dejan los bordes transparentes. Para un cuadrado perfecto, corta antes una sección cuadrada con recortar imagen.

El nuevo favicon no aparece

Los navegadores guardan los favicons en caché durante mucho tiempo. Cambiar el nombre del archivo o añadir un parámetro de versión (/favicon.ico?v=2), y comprobar que el servidor devuelve el tipo MIME correcto, suele solucionarlo. El icono de los resultados de la Búsqueda de Google solo se actualiza cuando se vuelve a rastrear el sitio.

Windows sigue mostrando el icono antiguo

Windows guarda los iconos en una caché aparte. Volver a compilar la aplicación y recrear el acceso directo, o cerrar sesión y volver a entrar, suele bastar.

Consejos de conversión

• Un ICO no basta para un sitio web: el generador de favicon produce de una vez favicon.ico (16, 32 y 48 píxeles), favicon-48x48.png, apple-touch-icon.png (180 píxeles), icon-192.png, icon-512.png, un icon-512-maskable.png adaptable y site.webmanifest, además de icon.svg cuando el origen es un SVG. También te da el fragmento de código para pegar en el <head> de tu página.
• El icono de Apple necesita un fondo opaco: iOS muestra en negro las zonas transparentes y redondea las esquinas por su cuenta, así que el generador de favicon rellena el apple-touch-icon con el color de fondo que elijas.
• Si tu logotipo es un SVG: genera un PNG grande con SVG a PNG y conviértelo a ICO, o pasa el SVG directamente al generador de favicon.

Nuestras herramientas de ICO y favicon funcionan en tu navegador; tu imagen no se sube y nunca sale de tu dispositivo.

Preguntas frecuentes

¿Cuál es el tamaño máximo de una imagen ICO?

Los campos de ancho y alto de una entrada de directorio ocupan un byte cada uno, y 0 significa 256. Así que una imagen dentro de un ICO mide como máximo 256x256 píxeles.

¿Uso ICO o PNG para mi favicon?

Usa los dos. Un favicon.ico en la raíz con 16, 32 y 48 píxeles atiende a los navegadores antiguos y a las solicitudes automáticas; declara iconos PNG (y, si quieres, SVG) con etiquetas <link> para los navegadores actuales y los dispositivos móviles.

¿ICO admite transparencia?

Sí. Los ICO antiguos usan una máscara de 1 bit, las imágenes de 32 bits tienen canal alfa completo desde Windows XP y el PNG incrustado admite transparencia desde Vista.

¿Cómo convierto un archivo ICO a PNG?

Añade tu ICO al conversor de imágenes y elige PNG como destino. Si el archivo contiene varios tamaños, se usa el más grande.

¿Se usan archivos ICO en el Mac?

macOS usa el formato ICNS para los iconos de aplicaciones. Para los sitios web, favicon.ico y los iconos PNG funcionan en los navegadores de todos los sistemas operativos.

Fuentes

• Microsoft Learn (archivo): Icons, John Hornick, 1995
• Microsoft Learn: Construct your Windows app's icon
• WHATWG HTML Standard: tipo de enlace «icon»
• Google Search Central: definir un favicon para que aparezca en los resultados de búsqueda
• MDN: guía de tipos y formatos de archivo de imagen
• Wikipedia: ICO (file format)
• Wikipedia: Favicon