Un favicon ya no es una sola imagen — es un conjunto de al menos seis a diez recursos de distintos tamaños más un contenedor ICO, un manifest web y varias líneas de HTML. Hacerlos bien todos es esencial para que un sitio se vea pulido en las pestañas del navegador, los dispositivos Apple, las pantallas de inicio de Android, los tiles del menú de inicio de Windows y las pantallas de lanzamiento de PWA. Las secciones siguientes cubren por qué los favicons modernos necesitan múltiples tamaños, las diferencias entre los formatos de icono PNG, ICO y SVG, y las piezas específicas de HTML y manifest que hacen que todo funcione correctamente en conjunto entre plataformas.
Por Qué los Favicons Modernos Necesitan Múltiples Tamaños
Los días del favicon de un solo archivo terminaron alrededor de 2010, cuando iOS y Android comenzaron a promover los sitios web como ciudadanos de primera clase en la pantalla de inicio. Hoy, diferentes plataformas solicitan distintos tamaños para distintos contextos, y servir el tamaño incorrecto produce resultados visiblemente pobres — duplicación de píxeles borrosa en pantallas retina, arte recortado en pantallas de inicio de iOS, o iconos completamente ausentes en los tiles del menú de inicio de Windows. El conjunto mínimo de cobertura para un sitio moderno: 16×16 para las pestañas del navegador (el caso de uso original del favicon), 32×32 para los marcadores y pestañas retina del navegador, 48×48 para los accesos directos del escritorio de Windows, 180×180 para las pantallas de inicio de iOS (Apple Touch Icon, recortado a un cuadrado redondeado automáticamente), 192×192 para las pantallas de inicio de Android (sin recortar, usa fondos transparentes o sólidos a propósito), y 512×512 para las pantallas de bienvenida de PWA en el primer lanzamiento. Cada tamaño es un archivo PNG independiente en lugar de una sola imagen escalada — a 16×16 el remuestreo predeterminado del navegador produce iconos suaves y emborronados que no se leen con claridad. Esta herramienta genera cada tamaño como un PNG independiente; como la API Canvas remuestrea automáticamente cada destino, el arte de origen sencillo y de alto contraste ayuda especialmente en los tamaños más pequeños. El costo es de unas pocas docenas de kilobytes de recursos adicionales, lo cual es insignificante frente a la mejora en el pulido visual.
PNG vs ICO vs SVG: Cuándo Usar Cuál
Tres formatos de favicon coexisten en los navegadores modernos, y cada uno tiene casos de uso específicos que importan para una implementación completa. PNG es la opción moderna por defecto: admite transparencia, se renderiza universalmente, y los navegadores pueden elegir entre múltiples etiquetas `` de distintos tamaños. Usa PNG para cada icono por tamaño en tu HTML. ICO es un formato heredado que agrupa múltiples tamaños en un único archivo contenedor, y sigue siendo importante por una razón específica: los navegadores solicitan automáticamente `/favicon.ico` en la raíz del sitio sin importar si incluyes una etiqueta `` en tu HTML. Coloca un ICO con imágenes de 16×16, 32×32 y 48×48 en la raíz de tu sitio como respaldo definitivo, para que incluso las páginas que no incluyan enlaces de favicon obtengan un icono adecuado. Los favicons SVG son una adición más reciente (Chrome los admitió en 2021) que teóricamente resuelve el escalado multitamaño al proporcionar gráficos vectoriales — pero el soporte de SVG en los navegadores sigue siendo inconsistente para el renderizado de iconos, y Safari de iOS en particular aún no los admite. Usa SVG como una mejora opcional mediante una etiqueta de enlace `type="image/svg+xml"`, pero siempre incluye PNG y un ICO como el conjunto canónico. Mejor práctica: usa PNG para tu conjunto principal de favicons, incluye un favicon.ico en la raíz para compatibilidad heredada y respaldo sin marcado, y opcionalmente agrega SVG como mejora progresiva para los navegadores que lo admiten.
Las Piezas de HTML y Manifest Que Lo Unen Todo
Los íconos generados son inútiles sin el HTML correcto y las etiquetas de manifiesto que dirigen a los navegadores hacia ellos. El bloque HTML mínimo para una cobertura completa: `` y similares para otros tamaños, `` para pantallas de inicio de iOS, `` para el manifiesto de la aplicación web y `
` más `` para mosaicos de Windows. Esta herramienta genera todos estos en la pestaña Fragmento HTML para que pueda pegar el bloque completo directamente en el encabezado de su página. El archivo `site.webmanifest` en sí es un documento JSON con campos para el nombre de la aplicación, nombre_corto (para íconos con espacio de texto limitado), matriz de íconos (rutas + tamaños + tipos mime), color_tema (influye en Chrome en la interfaz de usuario del navegador), color_fondo (usado en la pantalla de inicio de PWA), visualización (`"standalone"` para apariencia similar a PWA) y url_inicio. Sin este manifiesto, Chrome en Android no ofrecerá el mensaje de instalación de PWA "Agregar a la pantalla de inicio" con su ícono personalizado; volverá al navegador predeterminado. La pestaña Manifiesto de esta herramienta genera automáticamente un manifiesto correcto a partir de su conjunto de iconos y opciones de diseño.