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 con un enfoque opcional para los tamaños más pequeños, lo que mejora drásticamente la nitidez en las pestañas del navegador en comparación con un solo archivo escalado. 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 de 2 tamaños (16×16 y 32×32) 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 iconos generados son inútiles sin las etiquetas correctas de HTML y manifest que apunten los navegadores hacia ellos. El bloque HTML mínimo para una cobertura completa: `` y similares para otros tamaños, `` para las pantallas de inicio de iOS, `` para el manifest de la web app, y `
` más `` para los tiles de Windows. Esta herramienta genera todos estos en la pestaña Fragmento HTML para que puedas pegar el bloque completo directamente en el head de tu página. El propio archivo `site.webmanifest` es un documento JSON con campos para el nombre de la app, short_name (para iconos con espacio de texto limitado), arreglo de iconos (rutas + tamaños + tipos mime), theme_color (influye en el chrome de la interfaz del navegador), background_color (usado en la pantalla de bienvenida de PWA), display (`"standalone"` para una apariencia tipo PWA), y start_url. Sin este manifest, Chrome en Android no ofrecerá el aviso de instalación PWA "Agregar a pantalla de inicio" con tu icono personalizado — recurrirá al predeterminado del navegador. La pestaña Manifest de esta herramienta genera un manifest correcto automáticamente a partir de tu conjunto de iconos y tus elecciones de diseño.