Has añadido un favicon a tu sitio, pero Firefox sigue mostrando un icono de página en blanco en la pestaña. Esta frustración es habitual y, normalmente, se debe a una de estas tres causas: una peculiaridad de la caché, una regla de análisis más estricta o un simple error en la ruta. Vamos a recuperar tu icono.
Solución rápida: fuerza a Firefox a volver a solicitar el favicon
Antes de entrar en el código, prueba la solución más rápida. Firefox cachea los favicon de forma agresiva, a veces durante días. Limpia específicamente la caché de favicon:
- Abre una pestaña nueva y ve a
about:cache. - En «Disk cache», haz clic en «List Cache Entries».
- Busca «favicon» y elimina las entradas relacionadas con tu sitio.
- Reinicia Firefox y recarga la página.
Si no funciona, omite por completo la caché añadiendo una query string a la URL del favicon en el HTML, como favicon.ico?v=2. Así, Firefox lo tratará como un recurso nuevo.
Por qué Firefox no muestra tu favicon específicamente
Firefox aplica reglas más estrictas que otros navegadores. Estos son los motivos más habituales:
- Errores de análisis de SVG: Firefox exige un XML válido. Si falta un namespace o una etiqueta no está cerrada, descartará silenciosamente el favicon SVG.
- MIME type incorrecto: Si tu servidor envía
image/x-iconpara un archivo PNG, Firefox puede rechazarlo. Asegúrate de que el atributotypecoincida con el formato real. - Problemas con rutas relativas: Una ruta como
./favicon.icopuede fallar en rutas anidadas. Usa una ruta absoluta o relativa a la raíz (/favicon.ico). - Falta el link tag: Firefox solo recurre a
/favicon.icosi no hay ningún link tag. Si tienes un link tag que apunta a un archivo inexistente, no hará fallback.
Para entender mejor el comportamiento de Firefox, consulta nuestra guía sobre favicon en Firefox.
Comprueba tu HTML y la respuesta del servidor
Empieza por verificar el link tag en el head de tu HTML. Debería tener este aspecto:
<link rel='icon' type='image/svg+xml' href='/favicon.svg'>
<link rel='icon' type='image/png' href='/favicon-32x32.png'>Según la especificación HTML, el atributo rel='icon' es la forma estándar de definir un favicon. Firefox lo respeta, pero también comprueba la integridad del archivo.
Abre las Developer Tools de Firefox (F12), ve a la pestaña Network y recarga la página. Busca la solicitud del favicon. Si devuelve un 404, la ruta es incorrecta. Si devuelve un 200, pero el icono sigue sin aparecer, puede que el archivo esté dañado o use un formato no compatible.
Consejos de prevención
Para evitar problemas en el futuro, sirve un archivo ICO con varios tamaños como fallback e incluye siempre un SVG con los encabezados XML correctos. Usa rutas absolutas y considera añadir una query string de versión cuando actualices el icono. Para consultar una lista de comprobación completa, consulta nuestra guía sobre favicons que no aparecen.
Si necesitas generar rápidamente un conjunto correcto de favicons, Mzu favicondl puede crear archivos ICO, PNG y SVG con las dimensiones y los formatos adecuados.
Conclusión
Los problemas con los favicons en Firefox suelen deberse a la caché o a un análisis estricto. Limpia la caché, valida el SVG y comprueba de nuevo las rutas. Con estos pasos, el icono debería aparecer enseguida.