Iconos de app vs favicons: ICO vs PNG y lo que espera cada plataforma

Los iconos están en todas partes en el software moderno, desde la pequeña imagen en una pestaña del navegador hasta el cuadrado grande en la pantalla de inicio de un teléfono. A pesar de parecer similares en la superficie, estos iconos sirven para diferentes propósitos, siguen diferentes reglas de formato y se muestran en contextos muy diferentes. Mezclarlos o usar el formato incorrecto lleva a pestañas borrosas, iconos de marcador faltantes o rechazos en la tienda de aplicaciones.

Las dos categorías más comunes son favicons e iconos de app. Un favicon (abreviatura de "favorite icon") es la pequeña imagen que aparece en las pestañas del navegador, listas de marcadores e historial del navegador. Un icono de app es la imagen que representa una aplicación nativa en un sistema operativo de escritorio o móvil. Ambos comienzan como archivos de imagen, pero difieren en requisitos de formato, expectativas de tamaño y cómo la plataforma los descubre y usa.

Este artículo explica qué es cada tipo de icono, cuándo deberías usar el formato ICO versus PNG, y qué esperan realmente las principales plataformas. Ya sea que estés construyendo un sitio web, empaquetando una aplicación de escritorio o publicando una app móvil, sabrás exactamente qué formato y tamaños proporcionar.

¿Qué es un favicon?

Un favicon es el icono que un navegador web muestra junto a tu sitio web. Lo ves en la pestaña del navegador junto al título de la página, en tu lista de marcadores, en el historial del navegador y en algunos casos en la barra de direcciones o resultados de búsqueda. El término viene de la implementación original de Internet Explorer, que buscaba un archivo llamado favicon.ico en el directorio raíz de cada sitio web.

Históricamente, los favicons tenían que estar en el formato ICO. Internet Explorer lo requería, y no había alternativa. La capacidad del formato ICO de incrustar múltiples tamaños en un solo archivo lo hacía una opción práctica: un archivo podía servir la imagen de 16x16 para la pestaña y la imagen de 32x32 para la barra de marcadores. Los navegadores modernos (Chrome, Firefox, Safari, Edge) ahora también aceptan favicons PNG especificados vía una etiqueta <link> en el HTML de la página, pero aún recurren a /favicon.ico si no hay una etiqueta link explícita presente.

Para máxima compatibilidad entre todos los navegadores, incluyendo versiones antiguas y rastreadores, proporcionar un archivo favicon.ico en la raíz de tu sitio web sigue siendo el enfoque más seguro. Este archivo ICO debería contener al menos los tamaños 16x16 y 32x32. Muchos desarrolladores también incluyen 48x48 para pestañas de navegador de alta resolución. Puedes complementar esto con etiquetas link PNG para plataformas que las prefieran, pero el archivo ICO actúa como tu red de seguridad.

¿Qué es un icono de app?

Un icono de app representa una aplicación nativa dentro de la interfaz de un sistema operativo. En Windows, aparece en el escritorio, en la barra de tareas, en el menú Inicio y en el conmutador ALT+TAB. En macOS, aparece en el Dock, Launchpad y Finder. En iOS y Android, ocupa un lugar en la pantalla de inicio y en el cajón de aplicaciones. Cada plataforma tiene sus propios requisitos de formato y especificaciones de tamaño.

Windows usa el formato ICO para iconos de aplicaciones. Un ejecutable de Windows (.exe) incrusta un recurso ICO que el sistema operativo lee y muestra. Este ICO debería contener capas a 16, 32, 48, 64, 128 y 256 píxeles para cubrir cada contexto de visualización y nivel de escalado DPI. Los accesos directos (archivos .lnk) también pueden referenciar archivos ICO externos.

macOS usa el formato ICNS, que es el contenedor de iconos multiresolución propietario de Apple. Los archivos ICNS pueden contener tamaños hasta 1024x1024 píxeles. Las imágenes de origen son típicamente PNGs que se compilan en el paquete ICNS durante el proceso de compilación.

iOS requiere imágenes PNG a tamaños específicos (60x60 a 2x y 3x, más variaciones para iPad, Spotlight y Configuración). Apple no usa ICO o ICNS para iconos de apps de iOS. Las imágenes se incluyen en el catálogo de activos del paquete de la app como PNGs simples.

Android también usa PNG, típicamente proporcionado como capas de iconos adaptativos (primer plano y fondo) a múltiples densidades (mdpi hasta xxxhdpi). El icono de Play Store es un PNG de 512x512.

Apps web (PWA) usan iconos PNG referenciados en un archivo manifest.json. Los tamaños comunes son 192x192 y 512x512. Estos iconos aparecen en la pantalla de inicio cuando un usuario instala la PWA.

Consejos prácticos y errores comunes

Hacer bien los iconos en todas las plataformas requiere atención a algunos detalles que son fáciles de pasar por alto. Aquí están los errores que los desarrolladores cometen más a menudo, junto con soluciones directas.

Depender de un solo PNG para todo: Un solo PNG de 512x512 funcionará para algunos contextos pero fallará para otros. Los navegadores que buscan /favicon.ico no lo encontrarán. Los ejecutables de Windows no pueden incrustar un PNG como recurso de icono. Siempre genera un archivo ICO dedicado para casos de uso de favicon y Windows, incluso si PNG es tu formato de origen principal.

Usar solo un tamaño en el archivo ICO: Un archivo ICO de solo 32x32 se ve bien en una pestaña del navegador pero se convierte en una mancha borrosa en la vista de iconos grandes del Explorador de Windows. Siempre incluye múltiples tamaños. El conjunto completo (16 a 256) asegura que cada contexto de visualización tenga una capa perfecta a nivel de píxel de la cual dibujar.

Olvidar pantallas de alta resolución y Retina: Las pantallas modernas empaquetan de dos a tres veces los píxeles de las pantallas estándar. Un favicon de 16x16 que se ve bien en un monitor de 1080p aparece diminuto y suave en una pantalla Retina. Incluye una capa de 32x32 (que los navegadores usan con escalado 2x para la ranura de pestaña de 16px) y una capa de 48x48 para escalado 3x o pestañas de alta resolución.

No probar en todas las plataformas: Un icono que se ve perfecto en tu máquina de desarrollo puede verse completamente diferente en otro SO o navegador. Prueba tu favicon en al menos Chrome, Firefox, Safari y Edge. Si estás construyendo una app de escritorio, prueba el ICO en Windows a 100%, 150% y 200% de escalado DPI. Unos pocos minutos de pruebas ahorran horas de quejas de usuarios.

Para una mirada más profunda al formato ICO y su estructura, o para ayuda creando favicons específicamente, consulta nuestra guía de creación de favicon.