¿Favicon no aparece en Safari? Solución rápida

Abres tu sitio en Safari, miras la pestaña y ves un globo genérico o un cuadrado en blanco en lugar de tu logo. Si te suena familiar, el problema es que el favicon no aparece en Safari, un inconveniente habitual con algunas causas probables. La buena noticia es que la mayoría de las soluciones tardan menos de un minuto.

Solución rápida: fuerza a Safari a volver a solicitar el icono

Safari cachea los favicon de forma agresiva. Antes de cambiar el código, prueba estos pasos en orden:

1. Vacía la caché de favicon de Safari vaciando la caché (Safari > Settings > Privacy > Manage Website Data y después elimina tu sitio). En iOS, ve a Settings > Safari > Clear History and Website Data.
2. Haz una recarga forzada de la página con Cmd+Option+R (Mac) o cierra la pestaña y vuelve a abrirla.
3. Comprueba directamente la URL del favicon en una pestaña nueva; por ejemplo, https://yoursite.com/favicon.ico. Si devuelve un error 404, la ruta del archivo es incorrecta.

Si el icono sigue sin aparecer, revisa las causas principales que se explican a continuación.

Causas principales de que el favicon no aparezca en Safari

1. Etiqueta <link> ausente o incorrecta

Safari sigue la especificación HTML para los enlaces de iconos, pero es más estricto que algunos navegadores. Asegúrate de que la etiqueta <link rel='icon'> esté en el <head> y apunte a un archivo existente. La especificación de WHATWG define rel='icon' como la forma estándar de asociar un icono a una página.

<link rel='icon' type='image/png' href='/favicon-32x32.png' sizes='32x32'>
<link rel='icon' type='image/svg+xml' href='/favicon.svg'>
<link rel='apple-touch-icon' href='/apple-touch-icon.png'>

Nota: Safari en macOS también puede solicitar /favicon.ico desde la raíz aunque especifiques un PNG. Mantén un favicon.ico válido en el directorio raíz como alternativa.

2. Formato no compatible o archivo corrupto

Safari admite ICO, PNG y SVG (desde Safari 12). Sin embargo, el SVG debe ser XML bien formado: una sola etiqueta sin cerrar hará que Safari lo ignore. Si utilizas un SVG, valídalo con un analizador XML. Para una compatibilidad más amplia, usa PNG o ICO.

3. Caché en el servidor o en el nivel del CDN

Si acabas de actualizar el favicon, es posible que Safari esté sirviendo una copia obsoleta desde su caché o tu CDN. Añade una query string de versión a la URL (por ejemplo, favicon.png?v=2) para invalidar la caché. Para profundizar, consulta nuestra guía sobre cómo vaciar la caché del favicon en Safari.

4. Falta el icono en la pantalla de inicio de iOS

En iPhone y iPad, el icono de la pantalla de inicio procede de apple-touch-icon, no del favicon habitual. Si falta, iOS muestra una captura de pantalla o un cuadrado gris. Asegúrate de vincular un PNG de 180×180 con rel='apple-touch-icon'.

Consejos de prevención

• Incluye siempre un favicon.ico en tu directorio raíz.
• Usa rutas absolutas para los iconos y evitar problemas de enrutamiento.
• Prueba en Safari después de vaciar la caché; no des por hecho que se actualizará automáticamente.
• Para una configuración completa, sigue nuestra guía del favicon en iOS Safari.

La mayoría de los problemas con el favicon en Safari se deben a la caché, una ruta incorrecta o un archivo no válido. Prueba primero la solución rápida y después verifica el HTML y los formatos de los archivos. Con una configuración correcta, tu icono aparecerá de forma fiable en las pestañas, los marcadores y los favoritos.