Un icono es una imagen pequeña con reglas propias: cada sistema operativo quiere el suyo en un formato distinto, y las webs piden un favicon que se vea bien a 16 píxeles. Entre ICO (Windows), ICNS (macOS) y PNG hay confusión, y las herramientas de conversión no siempre cuentan qué hacen exactamente. Esta guía explica qué son ICO e ICNS, qué genera cada herramienta de Morphdrop (lo comprobamos mirando cómo construye los archivos y probando con un ICO de varios tamaños) y cómo preparar tu imagen para que el icono salga bien.
Qué son ICO e ICNS
- ICO es el formato de iconos de Windows. Un solo archivo puede contener varios tamaños de la misma imagen (16, 32, 48, 256 píxeles…), para que el sistema elija el adecuado según el lugar donde lo muestre. Los favicons de las webs también se han guardado tradicionalmente como
favicon.ico. - ICNS es el equivalente de macOS. Igual que el ICO, es un contenedor que puede guardar varias resoluciones.
- PNG es una imagen normal con transparencia, y hoy casi todos los navegadores aceptan un PNG como favicon.
Qué hace cada herramienta
De PNG a ICO
PNG a ICO genera un ICO que contiene una sola imagen de 256 × 256 píxeles. Es el tamaño más grande que admite el formato y se ve bien en Windows moderno, pero no incluye versiones de 16, 32 o 48 píxeles. Eso es importante para un favicon: si un programa o una página necesita un icono pequeño, tendrá que reducir el de 256, y el resultado puede no verse tan nítido como uno dibujado a mano para esa resolución.
De PNG a ICNS
PNG a ICNS genera un ICNS con una sola imagen de 512 × 512 píxeles. Sirve como icono de aplicación para macOS en los usos básicos, pero no incluye la colección completa de tamaños que genera una herramienta específica de Apple.
De ICO a PNG y de ICNS a PNG
ICO a PNG y ICNS a PNG sacan una sola imagen del archivo. En un ICO es la que decodifica tu navegador: en nuestra prueba, con un ICO de cuatro tamaños (16, 32, 48 y 256 píxeles), salió un PNG de 256 × 256. En un ICNS se elige la mayor de las imágenes en formato PNG que contenga; los ICNS antiguos, con iconos en otros formatos internos, pueden no leerse.
Un detalle que estropea muchos iconos: la imagen se estira
Tanto PNG a ICO como PNG a ICNS ajustan la imagen a un cuadrado (256 × 256 y 512 × 512 respectivamente) sin conservar la proporción. Si partes de una imagen rectangular, por ejemplo un logotipo apaisado de 400 × 200, se verá deformada. La solución es preparar antes una imagen cuadrada (con márgenes transparentes si hace falta) y usar esa.
Cómo preparar un buen icono
- Empieza desde una imagen cuadrada grande. 512 × 512 es un buen punto de partida; un icono parte de un diseño que se pueda reducir sin perder legibilidad.
- Usa PNG con fondo transparente si quieres que el icono no tenga un recuadro de color alrededor.
- Simplifica el diseño. Un icono se ve a 16 o 32 píxeles: los detalles finos y los textos largos desaparecen. Un símbolo sencillo, con pocos colores y contraste, aguanta mejor el tamaño pequeño.
- Prueba el tamaño real. Antes de usarlo, míralo reducido a 32 y a 16 píxeles.
¿Qué necesita mi web?
Los navegadores actuales aceptan un favicon en PNG (por ejemplo, una imagen de 192 o 512 píxeles) enlazado en la página. El favicon.ico clásico sigue siendo útil porque algunos programas y servicios lo piden por defecto en la raíz del sitio. Con la herramienta de Morphdrop obtendrás un ICO válido de 256 píxeles; si necesitas un ICO multitamaño para máxima nitidez en cada resolución, hace falta un editor de iconos específico.
Para convertir otros formatos de imagen
Si tu logotipo está en otro formato, conviértelo primero a PNG: JPG a PNG, SVG a PNG (los vectores se exportan con 1024 píxeles de lado largo como mínimo, perfecto para partir de él) o WebP a PNG. Y si quieres entender las diferencias entre formatos de imagen, lee la guía PNG, JPG o WebP.