Un favicon HTML fiable depende de un pequeño conjunto de archivos accesibles y de enlaces colocados en el head. Este procedimiento cubre las pestañas modernas, los clientes antiguos y los accesos directos móviles sin multiplicar las variantes históricas.
Preparar los archivos
Parte de un símbolo cuadrado y legible a tamaños muy pequeños. Coloca favicon.ico, favicon.svg, apple-touch-icon.png, site.webmanifest y los PNG referenciados por el manifiesto en la carpeta pública servida desde la raíz del dominio.
Una ruta como /favicon.svg es absoluta respecto al dominio. Por tanto, sigue siendo correcta en /produits o /blog/article, a diferencia de favicon.svg, que puede resolverse de forma relativa a la página.
Añadir las etiquetas al head
Declara primero el SVG con rel icon y el tipo image/svg+xml, y después el ICO con rel icon y sizes any. Añade rel apple-touch-icon para iOS y rel manifest para las instalaciones de la aplicación web.
El tipo debe corresponder al archivo realmente servido. No renombres un PNG como .ico: el contenido y la cabecera deben pertenecer al formato ICO.
| Uso | Relación | Archivo |
|---|---|---|
| Navegador moderno | icon | /favicon.svg |
| Compatibilidad | icon | /favicon.ico |
| Pantalla de iOS | apple-touch-icon | /apple-touch-icon.png |
| Aplicación web | manifest | /site.webmanifest |
Desplegar sin romper las rutas
Abre directamente cada URL de archivo después del despliegue. La respuesta debe ser una imagen o un manifiesto, con un estado correcto, y no una página HTML de inicio de sesión o de error 404 devuelta con un estado engañoso.
Si el sitio se aloja en un subdirectorio, adapta las rutas o la base pública. Revisa la página final en las herramientas de desarrollo: el navegador debe solicitar las URL esperadas, sin redirigir a otro servidor.
Verificar el resultado
Recarga la página con la caché desactivada e inspecciona las etiquetas link en el DOM generado. Después prueba una pestaña, un favorito y, si es necesario, añadir el sitio a la pantalla de inicio en un dispositivo real.
El favicon de un resultado de búsqueda también sigue las reglas del motor y su propio calendario de rastreo. Que un icono sea visible en el navegador no garantiza una actualización inmediata en los resultados.
Fuentes primarias
Preguntas frecuentes
¿La etiqueta del favicon va en body?
No. Los elementos link que describen los iconos y el manifiesto pertenecen al head del documento.
¿Basta con un favicon.ico en la raíz?
Ofrece una buena alternativa, pero no describe el icono Apple Touch ni los iconos instalables del manifiesto. Declara los formatos adecuados para esos usos.
¿Por qué usar una ruta que empiece por /?
Parte de la raíz del dominio y evita que una página anidada busque el archivo en su propia carpeta.