Guía Completa de Favicons y Web App Manifest para PWA
El icono de una página web ha evolucionado desde el antiguo favicon de 16×16 píxeles hasta un ecosistema de resoluciones adaptadas a navegadores de escritorio, pantallas Retina, marcadores de iOS, pantallas de inicio de Android y los resultados de búsqueda de Google.
1. Formatos y Resoluciones Estándar
- favicon.ico (Multirresolución): Contenedor binario que agrupa capas de 16×16, 32×32 y 48×48 píxeles. Garantiza compatibilidad con navegadores antiguos y accesos directos de escritorio.
- favicon-16x16.png y favicon-32x32.png: Formatos PNG estándar recomendados para navegadores modernos en pantallas estándar y de alta densidad (Retina).
- apple-touch-icon.png (180×180): Utilizado por iOS y iPadOS cuando un usuario guarda la web en la pantalla de inicio de su iPhone o iPad.
- icon-192x192.png y icon-512x512.png: Iconos de alta definición para aplicaciones web progresivas (PWA) y dispositivos Android, declarados en el archivo
manifest.json.
2. Requisitos del Favicon en Google Search
Para que Google muestre el favicon de tu sitio web junto a los resultados de búsqueda en móviles y escritorio, deben cumplirse las siguientes directrices:
- Proporción cuadrada: La imagen debe tener relación de aspecto 1:1.
- Dimensiones mínimas: Al menos 8×8 píxeles. Actualmente Google recomienda usar un favicon mayor de 48×48 píxeles para una mayor calidad visual. El pack incluye favicon de 48×48px que cumple los requisitos oficiales.
- Rastreabilidad: La URL del favicon debe declararse en la página de inicio y permitir el rastreo de Googlebot-Image sin bloqueos en robots.txt.
- Un único favicon por host: Google asigna un favicon por hostname o subdominio.
- Aviso: Google no garantiza la aparición del favicon en todas las consultas, ya que su visualización depende de algoritmos automáticos de calidad.