Abres una pestaña nueva en Chrome y, en lugar de la imagen de tu sitio, ves un pequeño globo gris. Parece un marcador de posición y, de hecho, lo es. El globo que Chrome muestra por defecto como favicon es el recurso alternativo del navegador cuando no puede encontrar ni cargar un ícono válido para una página.
Este artículo te explica qué significa ese globo, por qué lo elige Chrome y cómo sustituirlo por tu propio favicon. Nos centraremos en el globo en sí, no en el diagnóstico general de la caché.
Qué es realmente el globo que Chrome muestra por defecto como favicon
Chrome no incorpora un mismo globo predefinido para todos los sitios. El globo es un marcador de posición genérico que aparece cuando no hay ningún ícono utilizable. Equivale visualmente a una ranura vacía en la barra de pestañas.
El estándar HTML define cómo declara una página su ícono: un elemento <link rel='icon'> en la cabecera del documento. Puedes consultar la especificación en WHATWG HTML: rel=icon. Cuando esa declaración falta, está rota o apunta a un archivo que Chrome no puede decodificar, el navegador recurre al globo.
Por qué aparece el globo en lugar de tu ícono
La mayoría de los casos corresponde a unas pocas categorías previsibles. Estas son las más habituales:
- No se declara ningún ícono y no existe /favicon.ico. Chrome puede solicitar
/favicon.icoen la raíz del sitio. Si falta el archivo, el globo se mantiene. - La etiqueta link apunta a un 404. Una errata en la ruta o un archivo que nunca se desplegó produce el mismo resultado.
- El formato no es compatible o está dañado. Un ICO truncado o un SVG con marcado no válido pueden fallar durante el renderizado.
- La página es un archivo local o está en un contexto restringido. Algunas páginas internas de Chrome y algunos archivos locales no tienen ícono, así que la aparición del globo es lo esperable.
Fíjate en que ninguno de estos casos exige una investigación a fondo de la caché. El globo suele indicar que el ícono no llegó a resolverse correctamente desde el principio.
Cómo elige Chrome entre tu ícono y el globo
Chrome lee los enlaces de íconos de la cabecera del documento y selecciona un candidato que puede decodificar. Si proporcionas un SVG y un PNG, el navegador utiliza el formato que mejor admite. Si todos los candidatos fallan, muestra el globo.
Una declaración mínima y fiable tiene este aspecto:
<link rel='icon' type='image/svg+xml' href='/favicon.svg'>
<link rel='icon' type='image/png' sizes='32x32' href='/favicon-32.png'>Esto ofrece a Chrome dos oportunidades de éxito. Para entender mejor cómo se estructura el elemento favicon link tag, consulta nuestra guía.
Prácticas recomendadas para evitar el globo
No necesitas una docena de archivos para eliminar el globo, pero sí al menos un icono válido y accesible. Estas son algunas reglas prácticas:
- Declara un icono explícitamente en el head en lugar de confiar en la solicitud implícita a la raíz.
- Comprueba que el archivo devuelva realmente HTTP 200 y no una redirección a una página de error HTML.
- Mantén un PNG como fallback junto con SVG para parsers más antiguos o estrictos.
- Prueba en un perfil nuevo de Chrome o en una ventana de incógnito para que un globo almacenado en caché no te confunda.
Si declaras el icono correctamente pero Chrome sigue mostrando el globo, la causa suele ser una entrada obsoleta en la caché y no que falte el archivo. Nuestro artículo sobre por qué el favicon no aparece en Chrome explica ese comportamiento concreto de la caché.
Conclusión
El globo no es un error. Es la forma que tiene Chrome de indicarte que no encontró ningún icono utilizable. Declara un enlace rel='icon' válido, comprueba que el archivo se sirve correctamente y el globo desaparecerá. Empieza con un SVG o PNG que funcione y después amplía al conjunto completo de iconos cuando lo básico esté resuelto.