Si acabas de subir un favicon nuevo en Webflow y el navegador sigue mostrando el cuadrado antiguo, no eres el único. El síntoma es un ícono obsoleto en la barra de pestañas, incluso después de publicar.
Solución rápida (haz esto primero)
Aplica el siguiente método de tres pasos y luego actualiza la página.
- Abre la página en Chrome (o en el navegador que prefieras).
- Añade una cadena de consulta a la URL del favicon, por ejemplo
/favicon.ico?v=2. Puedes hacerlo editando la etiqueta link en la sección Custom Code de tu proyecto Webflow. - Publica el sitio de nuevo. La nueva URL obliga al navegador a saltarse la copia en caché.
Una vez finalizada la publicación, pulsa Ctrl+F5 (recarga dura). El ícono actualizado debería aparecer al instante.
Causas raíz explicadas
Entender por qué el ícono quedó obsoleto te ayuda a evitar el mismo problema más adelante.
Browser cache
Los favicons se cachean agresivamente porque son diminutos y se solicitan en cada navegación. La mayoría de los navegadores guardan el archivo durante días, ignorando una etiqueta link nueva a menos que la URL cambie.
Webflow’s publish pipeline
Al pulsar Publish, Webflow envía los archivos a su CDN. El CDN puede seguir sirviendo la versión anterior hasta que expire. Añadir una cadena de consulta de versión indica al CDN que el recurso es nuevo.
Incorrect rel attribute
La UI de Webflow inserta <link rel='shortcut icon' href='...'/> por defecto. Los navegadores modernos prefieren rel='icon' según lo definido en la especificación HTML HTML spec. Usar el valor heredado puede hacer que algunos navegadores ignoren el archivo nuevo.
Missing or mismatched file type
Si el archivo subido es un SVG pero se omite el atributo type, los navegadores más antiguos pueden recurrir a un archivo .ico en caché. Declarar explícitamente type='image/svg+xml' elimina la ambigüedad.
CDN edge caching
Incluso tras una recarga dura, un nodo edge del CDN podría seguir manteniendo el archivo antiguo. Vaciar la caché del edge desde el panel de Webflow (Site Settings → Hosting → Clear cache) soluciona esto, pero el truco de la cadena de consulta es más rápido para la mayoría de los desarrolladores.
Consejos de prevención
- Siempre usa
rel='icon'e incluyetypepara archivos SVG o PNG. - Versiona tus URLs de favicon (p. ej.,
/favicon.svg?v=202308) cada vez que reemplaces el recurso. - Después de publicar, limpia la caché CDN de Webflow vía la página de Site Settings.
- Prueba el cambio en una ventana de incógnito para verificar que ninguna caché local interfiera.
- Considera añadir un archivo de respaldo
.icoen el directorio raíz para navegadores heredados.
Estos pasos mantienen la canalización del ícono limpia y hacen que futuras actualizaciones sean indoloras.
Ejemplo de implementación
A continuación tienes un fragmento mínimo y conforme a estándares que puedes pegar en el área Custom Code → Head de Webflow. Sigue la especificación HTML e incluye una cadena de consulta de versión.
<link rel='icon' type='image/svg+xml' href='https://example.com/favicon.svg?v=202308'>
<link rel='icon' type='image/png' href='https://example.com/favicon-32.png?v=202308' sizes='32x32'>Reemplaza https://example.com/ con tu propio dominio. El token de versión puede ser cualquier cadena que cambie cuando el archivo se modifique.
Lecturas adicionales
Para una guía completa de cómo subir un favicon en Webflow, consulta el artículo oficial Add a favicon or webclip. Si te encuentras con problemas persistentes de CDN después de un despliegue, el artículo Favicon Not Updating After Deployment? The 2‑Minute Fix cubre en profundidad la purga de caché en los edges.
Aplicando primero la solución rápida y luego abordando las causas subyacentes, mantendrás el ícono de la pestaña de tu sitio Webflow actualizado y coherente en todos los navegadores.