Favicons y el manifiesto de aplicación web: los archivos que hay que incluir y cómo declararlos

Qué es

El estándar HTML establece que, en ausencia de un link con la palabra clave icon, un agente de usuario puede solicitar /favicon.ico relativo a la URL del documento y usarlo como icono. Por eso una solicitud a esa ruta aparece en todo registro de acceso, y por eso el archivo debe existir incluso cuando hay iconos declarados. Los iconos declarados son <link rel="icon" href="..." sizes="..." type="...">; cuando se declaran varios, el estándar indica que el agente de usuario debe seleccionar el más apropiado según los atributos type, media y sizes, y que entre los igualmente apropiados gana el declarado en último lugar. Los contextos instalados y anclados leen el manifiesto de aplicación web, cuyo arreglo icons enumera objetos con src, sizes (48x48 96x96) y purpose. MDN documenta los propósitos: any (predeterminado), maskable (diseñado con máscaras de icono y una zona segura para que la plataforma pueda recortar los bordes) y monochrome (el canal alfa usado como máscara sobre un relleno sólido). Para los resultados de búsqueda, la documentación de Google indica que admite un favicon por sitio, donde un sitio es un nombre de host, que el icono debe ser cuadrado y de al menos 8x8px, con un tamaño superior a 48x48px recomendado, que la URL del favicon debe ser estable, y que tanto el archivo del icono como la página de inicio deben ser rastreables.

Por qué importa

Los iconos son pequeños pero aparecen en todas partes: pestañas, marcadores, pantallas de inicio, resultados de búsqueda, selectores de tareas. Los usuarios notan uno ausente o incorrecto, y corregirlo una vez no cuesta nada, mientras que una declaración rota puede persistir durante años porque nada falla.

Cómo aplicarlo

• Incluir /favicon.ico (un ICO multitamaño), un icono SVG declarado con rel="icon" type="image/svg+xml", un PNG para navegadores sin soporte de iconos SVG, y un PNG apple-touch-icon en el tamaño que especifica la documentación de Apple.
• Añadir un manifiesto con al menos dos tamaños de PNG (un icono de lanzador y uno grande para pantallas de presentación) en los tamaños que documentan las plataformas de destino; proporcionar un icono maskable independiente con el diseño dentro de la zona segura en lugar de reutilizar el icono any.
• Servir el manifiesto con el tipo de medio correcto y declararlo con <link rel="manifest"> en todas las páginas, no solo en la de inicio.
• Mantener estables las URL de los iconos; cuando cambie el diseño, conservar la ruta y dejar que las cachés caduquen, o cambiar la ruta en todas partes a la vez.
• Comprobarlo con el panel de aplicación del navegador y solicitando cada URL declarada con curl.

Trampas

Declarar iconos que devuelven 404 o una redirección a HTML. Usar un icono maskable cuyo logotipo toca los bordes, que las plataformas recortan. Bloquear /favicon.ico o el manifiesto en robots.txt.