Has hecho el deploy de tu web, abres una pestaña nueva en el navegador y, en vez de ver el logo de tu marca, te aparece el típico icono de globo terráqueo. Revisas la consola y ahí está: el warning de favicon syntax error. En el 90% de los casos, el problema viene de un tag <link> mal formado en tu HTML.
La solución más rápida para este error de sintaxis es revisar los atributos de tu HTML. Los navegadores son bastante estrictos con cómo declaras los iconos. Si te dejas una comilla sin cerrar o el tag no está bien cerrado, el parser simplemente se carga el elemento sin decir nada. Aquí tienes el patrón infalible que deberías copiar:
<link rel='icon' href='/favicon.svg' type='image/svg+xml' />
<link rel='apple-touch-icon' href='/apple-touch-icon.png' />Fíjate en el slash de auto-cierre y en el atributo type que va explícito. Declarar el type le dice al navegador exactamente qué formato de archivo va a cargar, evitando que el parser se haga un lío. (Si necesitas el desglose completo del tag, échale un ojo a nuestro Favicon HTML Code Cheat Sheet.)
Por qué el navegador lanza un Syntax Error
Los parsers de HTML son bastante permisivos, pero tienen un límite. Cuando se encuentran con sintaxis rota, intentan recuperarse como pueden. A veces adivinan mal y se saltan tu icono por completo.
Comillas que faltan o que no cuadran
Si has copiado el código de algún foro o de Stack Overflow, puede que tengas comillas tipográficas en vez de comillas rectas. O simplemente te has dejado la comilla de cierre:
<!-- BROKEN: missing closing quote on href -->
<link rel='icon' href='/favicon.ico />El parser lee esto y asume que el resto de tu documento forma parte de la URL del href. Tu icono desaparece, y lo peor es que puedes verte arrastrando errores de layout en cascada porque el navegador se está tragando los tags siguientes.
La trampa del shortcut icon en el rel
Los tutoriales antiguos te dicen que uses rel='shortcut icon'. Esto ya es historia. Los navegadores modernos solo necesitan rel='icon'. La palabra 'shortcut' era un capricho de Internet Explorer que obligaba a los desarrolladores a escribir rel='shortcut icon' con un espacio. Los espacios en los atributos rel crean múltiples valores de token, y algunos validadores de HTML5 estrictos te marcan eso como un syntax error. Quédate con rel='icon' y a otra cosa.
Ejemplo real: cómo lo hace GitHub
Echa un vistazo al código fuente de GitHub. Sirven un único favicon en SVG con una media query integrada para el dark mode. Su HTML está limpio como una patena:
<link rel='icon' class='js-site-favicon' type='image/svg+xml' href='https://github.githubassets.com/favicons/favicon.svg' />Ni rastro de errores de sintaxis. Ni la palabra legacy shortcut. Declaran el MIME type exacto para que el navegador no tenga que adivinar nada. (Te explicamos la estrategia de tamaños detrás de este enfoque en nuestra Favicon Best Size 2026 guide.)
Cómo prevenir estos errores de sintaxis en el futuro
Los errores de sintaxis pasan porque escribimos los links a mano. Aquí tienes cómo cortarlos de raíz:
- Pasa un linter: Herramientas como HTMLHint pescan tags sin cerrar y comillas desparejadas antes de que lleguen a producción.
- Deja de codear a mano: Usa un generador para crear tus tags. Mzu favicondl te escupe HTML link tags limpios y validados cada vez, sin dolores de cabeza.
- Valida tu manifest: Si usas un
site.webmanifest, una simple coma de más en el JSON te rompe todos los iconos. Pásalo por un validador de JSON antes de subir nada.
Arregla tus tags, hazle una pasada rápida con un validador y tus pestañas se verán nítidas en cualquier navegador. Se acabó el ver globos terráqueos genéricos.