¿El favicon no se actualiza? Resuelve primero el caché
Un favicon que no se actualiza casi siempre es un caché, no un bug. Confirma primero que el archivo realmente cambió, luego purga los cachés desde el archivo hacia afuera.
Comprueba el archivo antes de tocar el navegador
Los favicons se almacenan en caché de forma agresiva en todas las capas: el navegador, tu CDN y, a veces, un artefacto de build desactualizado. Antes de culpar al navegador, averigua qué capa está sirviendo la imagen antigua.
Ve directo al archivo. Abre https://tusitio.com/favicon.ico en la barra de direcciones y mira qué carga. Si es el icono antiguo, el problema no es tu navegador, el servidor o el CDN sigue entregando el archivo anterior. Si es el icono nuevo, el archivo se publicó bien y solo el caché de tu navegador va con retraso.
Trabaja desde el archivo hacia afuera
- 1
Abre la URL del icono directamente
Carga /favicon.ico y cada ruta de PNG en la barra de direcciones. Imagen antigua en la URL significa un caché de servidor, build o CDN. Imagen nueva en la URL significa que solo tu navegador está desactualizado, salta a los pasos del navegador.
- 2
Añade un parámetro de versión a la etiqueta
Una query string hace que la URL parezca nueva, así que los cachés buscan una copia fresca. Sube el número cada vez que cambie el icono. Esta es la solución de caché de navegador más fiable que existe.
- 3
Haz un hard refresh en una ventana privada
Una ventana privada o de incógnito ignora el caché de favicon normal. Combínala con un hard refresh para asegurarte de que estás probando el archivo publicado, no una copia local.
- 4
Purga el CDN y limpia un build desactualizado
Si la imagen antigua sigue en la URL, purga las rutas del icono en tu CDN o caché de borde, luego confirma que tu build realmente copió los archivos nuevos. Un artefacto de build en caché seguirá sirviendo el icono antiguo hasta que lo limpies y rehagas el build.
El parámetro de versión
<link rel="icon" href="/favicon.ico?v=2" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png?v=2">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png?v=2">Sube el ?v= cada vez que cambie el icono. Misma ruta de archivo, nueva URL, así que los cachés del navegador y del CDN lo tratan como un recurso nuevo.
Preguntas frecuentes
¿Por qué mi favicon no se actualiza después de cambiarlo?
Un caché está sirviendo el archivo antiguo. Abre /favicon.ico directamente: imagen antigua ahí apunta a un caché de CDN o de build, imagen nueva ahí apunta al caché de tu navegador. Corrige la capa que de verdad está desactualizada.
¿Cómo fuerzo al navegador a recargar el favicon?
Añade una query string de versión como /favicon.ico?v=2 a la etiqueta link y súbela en cada cambio, luego haz un hard refresh en una ventana privada. Esa es la forma más fiable de hacer que el navegador busque una copia fresca.
¿Cuánto tarda el favicon en actualizarse solo?
Depende de los tiempos de vida de tu caché. Sin un parámetro de versión puede tardar horas o más, ya que los navegadores y los CDN retienen los iconos mucho tiempo. Un parámetro de versión hace que el cambio surta efecto en la siguiente carga.
Mi favicon se actualizó en todas partes menos en la pantalla de inicio de iOS. ¿Por qué?
Los accesos directos guardados de iOS congelan el icono en el momento en que se añadieron. Elimina el acceso directo y vuelve a añadir la página para captar el nuevo apple-touch-icon.