Acabas de desplegar un favicon nuevo, limpiaste la caché de Safari en tu Mac y, por fin, el icono actualizado aparece en la pestaña. Entonces abres el mismo sitio en tu iPhone... y ahí sigue el viejo placeholder gris. Para arreglarlo, tienes que limpiar la caché de favicon en Safari del iPhone y del Mac por separado, porque ambos dispositivos almacenan sus propias bases de datos de iconos y nunca se sincronizan a través de iCloud.
Por qué Safari almacena en caché los favicons de forma distinta en iPhone y Mac
Safari guarda los datos de los favicons en dos capas: una caché transitoria del navegador y una base de datos persistente llamada WebpageIcons, que alimenta las pestañas, los marcadores y el flujo de Añadir a pantalla de inicio. En macOS, esta base de datos se encuentra en ~/Library/Safari/WebpageIcons.db. En iOS, vive dentro del sandbox de la app Safari, donde no puedes navegar directamente.
Las dos cachés no se comunican entre sí. Actualizar tu favicon en el Mac no afecta al iPhone, y viceversa. Por eso el mismo sitio puede mostrar dos iconos distintos al mismo tiempo en tus dispositivos.
Requisitos previos
- Un archivo de favicon desplegado y accesible en la raíz de tu sitio o mediante una etiqueta HTML
<link rel='icon'> - Safari 14 o posterior en macOS y iOS 14 o posterior en iPhone
- Aproximadamente 2 minutos por dispositivo
Cómo limpiar la caché de favicon en Mac
Paso 1: comprueba que tu favicon nuevo está realmente activo
Abre Safari, carga tu sitio y revisa el código fuente (Cmd + Option + U). Confirma que la etiqueta <link rel='icon'> apunta al archivo nuevo. Si la ruta antigua sigue hardcodeada, no hay limpieza de caché que valga; consulta nuestra guía de favicon en HTML para ver las etiquetas correctas.
Paso 2: vacía la caché temporal de Safari
Ve a Safari → Ajustes → Avanzado y activa Mostrar menú Desarrollo en la barra de menús. Después haz clic en Desarrollo → Vaciar cachés. Esto borra la caché transitoria que Safari usa para renderizar pestañas, pero no toca la base de datos WebpageIcons.
Paso 3: elimina la base de datos WebpageIcons directamente
Cierra Safari por completo (Cmd + Q). Abre Terminal y ejecuta:
rm -f ~/Library/Safari/WebpageIcons.db
rm -f ~/Library/Safari/WebpageIcons.db-shm
rm -f ~/Library/Safari/WebpageIcons.db-walEstos archivos almacenan cada favicon que Safari ha mostrado en todas las pestañas y marcadores. Al eliminarlos, Safari reconstruye la base de datos de iconos desde cero en el siguiente inicio.
Paso 4: reinicia Safari y recarga
Vuelve a abrir Safari y carga tu sitio. El favicon nuevo debería aparecer en la pestaña y en la barra de marcadores en cuestión de segundos. Si no aparece, tu HTML sigue apuntando a la ruta antigua.
Cómo limpiar la caché de favicon en iPhone
El proceso en iOS es diferente. No puedes acceder al sistema de archivos de Safari directamente, así que el método se basa en forzar a Safari a actualizarse borrando los datos del sitio desde Ajustes.
Paso 1: borra los datos de sitios web de Safari
Abre la app Ajustes, desplázate hasta Safari y toca Avanzado → Datos de sitios web. Toca Eliminar todos los datos de sitios web. Esto borra cookies, caché y el touch icon store de Safari para todos los sitios.
Atención: esto cierra la sesión en todos los sitios en los que hayas iniciado sesión. Usa una sesión de navegación privada si solo quieres probar cambios de favicon sin perder tus sesiones.
Paso 2: fuerza el cierre de Safari
Desliza hacia arriba desde la parte inferior (o doble clic en el botón de inicio en iPhones más antiguos) para abrir el conmutador de apps. Desliza Safari hacia arriba para forzar su cierre y, después, vuelve a abrirlo y carga tu sitio.
Paso 3: esquiva la caché con una recarga completa
Mantén pulsado el botón de actualizar en la barra de direcciones de Safari y, a continuación, toca Solicitar sitio de escritorio. Actívalo y desactívalo. Esto fuerza una nueva descarga que incluye el archivo de favicon. Como alternativa, añade una cadena de consulta para romper la caché:
https://yoursite.com/?v=2Paso 4: actualiza la caché del icono de la pantalla de inicio
Si añadiste tu sitio a la pantalla de inicio del iPhone, ese icono viene del archivo apple-touch-icon, no del favicon estándar. Para actualizarlo, elimina el acceso directo de la pantalla de inicio y, después, vuelve a añadirlo. Safari volverá a leer la etiqueta <link rel='apple-touch-icon'> de tu HTML y descargará una copia nueva.
Problemas habituales
- iCloud no sincroniza cachés: limpiar en el Mac no afecta a las cachés de tu iPhone o iPad.
- Service workers: si tu sitio usa un service worker, puede servir un favicon antiguo desde la Cache API. Sube la versión de tu service worker para forzar una actualización.
- Caché de borde del CDN: tu archivo de favicon puede estar cacheado en el edge de tu CDN. Añade una cadena de versión como
?v=2a la ruta del icono en la etiqueta HTML. - Navegación privada: el modo privado de Safari no conserva la caché de favicons en absoluto; probar en modo privado no reflejará el mismo comportamiento que el modo normal.
Evita futuros problemas con la caché de favicons
Cuando tu icono nuevo se muestre correctamente en ambos dispositivos, evita que vuelva a ocurrir usando nombres de archivo con hash de contenido:
<link rel='icon' href='/favicon.a1b2c3d4.svg' type='image/svg+xml'>Cada despliegue recibe una URL única, por lo que los navegadores nunca podrán servir una copia cacheada obsoleta. Para profundizar en patrones de cache busting, consulta nuestra guía de cache busting para favicons.
Para una referencia completa sobre el atributo rel='icon' y los tipos MIME que aceptan los navegadores, revisa el WHATWG HTML Living Standard.