Soporte SVG para Apple Touch Icon: lo que realmente funciona

Has añadido un favicon SVG impecable a tu sitio usando <link rel='icon' type='image/svg+xml'>. Se ve nítido en Chrome y escala a la perfección en modo oscuro, pero cuando un usuario de iPhone guarda tu sitio en la pantalla de inicio, obtiene una captura borrosa de la página en lugar de tu marca definida.

No estás haciendo nada mal. Los Apple Touch Icons y el SVG son cosas separadas a ojos de Apple, y la relación entre ambos desconcierta incluso a desarrolladores experimentados. Aquí tienes exactamente lo que funciona en Safari e iOS ahora mismo, y cómo desplegar una configuración que se vea definida en cualquier contexto.

La respuesta corta: Apple no admite oficialmente SVG en apple-touch-icon

La documentación de Apple para la relación de enlace apple-touch-icon nunca ha incluido SVG como formato compatible. iOS sigue esperando un bitmap PNG (o, con menos frecuencia, JPEG) para el icono de la pantalla de inicio, y elige ese archivo basándose en atributos de tamaño, no en el tipo MIME.

Lo que sí está bien admitido es el favicon SVG mediante rel='icon', que Safari lee para las pestañas del navegador y las pestañas ancladas. El estándar vivo HTML de WHATWG define la rel='icon' palabra clave como el mecanismo para declarar los iconos de página, y Safari iOS lo implementa correctamente para SVG. Pero esa es una ruta de código distinta a la de la pantalla de inicio.

Así que cuando los desarrolladores buscan compatibilidad de apple touch icon SVG, la respuesta honesta es: sirve ambos. Usa SVG para la pestaña, usa PNG para la pantalla de inicio. Apuntar apple-touch-icon a un archivo SVG hace que iOS recurra silenciosamente a una captura de la página, que es exactamente el cuadrado borroso que intentas evitar.

Requisitos

• Un archivo fuente SVG limpio (con viewBox cuadrado, como 0 0 100 100, idealmente por debajo de 5 KB)
• Una exportación PNG de 180×180 del mismo diseño, con fondo opaco
• Acceso al <head> de tu sitio y capacidad de colocar archivos en la raíz del sitio

La pila que realmente funciona (paso a paso)

Paso 1: coloca el favicon SVG en la raíz del sitio

Coloca tu archivo SVG en /icon.svg (al mismo nivel que index.html). Mantener el nombre icon.svg es deliberado: Safari comprueba esa ruta antes de escanear las etiquetas <link>, y deja tu <head> despejado.

Paso 2: Genera un apple-touch-icon PNG de 180×180

Usa Figma, Sketch o cualquier herramienta de exportación raster para producir un PNG de 180×180 a partir del mismo SVG. Guárdalo como /apple-touch-icon.png en la raíz del sitio. iOS recogerá este archivo incluso sin una etiqueta <link>, pero la etiqueta explícita es más fiable entre versiones de iOS.

Si necesitas convertir un SVG en un PNG limpio de 180×180 sin tener que recalcular las trayectorias, Mzu favicondl realiza la exportación en un solo clic.

Paso 3: Añade las etiquetas link en el orden adecuado

El orden de análisis del navegador importa. Pon primero el SVG para que los navegadores modernos lo tomen, y luego el fallback explícito en PNG. Este es el patrón:

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

Fíjate en que no hay type en el link de apple-touch-icon. Históricamente Apple lo ignora, y algunas versiones antiguas de iOS rechazan la etiqueta por completo cuando se declara un tipo MIME no compatible. El atributo sizes='180x180' es lo que indica a iOS que use exactamente este render para los iPhone de alta densidad.

Paso 4 (Opcional): Cubre iPads antiguos con un fallback de 152×152

Si tu analítica muestra usuarios de iPad en iOS 14 o anterior, añade un fallback de 152×152 antes del de 180:

<link rel='apple-touch-icon' href='/apple-touch-icon-152.png' sizes='152x152'>
<link rel='apple-touch-icon' href='/apple-touch-icon.png' sizes='180x180'>

Los navegadores e iOS eligen el asset más pequeño que aún cumple con la densidad solicitada. Para un análisis más profundo de las resoluciones heredadas de iOS, consulta nuestra guía de tamaños de Apple Touch Icon.

Errores comunes

• Apuntar el apple-touch-icon al archivo SVG. iOS recurre silenciosamente a una captura de pantalla de la página. Envía siempre un PNG real en esa URL.
• Añadir type='image/svg+xml' al enlace apple-touch-icon. Algunas versiones antiguas de iOS rechazan la etiqueta por completo. Mantén type fuera del enlace apple-touch-icon.
• Olvidar la relación de aspecto cuadrada. iOS no recorta tu icono: un PNG no cuadrado se muestra con barras laterales. Exporta siempre desde un viewBox cuadrado.
• PNG transparentes que se filtran en las pantallas de inicio. iOS aplica su propia máscara de rectángulo redondeado, pero un fondo transparente aún puede verse durante la imagen de arranque en frío. Usa un fondo opaco salvo cuando necesites transparencia de forma específica, tal como se explica en nuestra guía de fondo transparente para el apple-touch-icon.

Cómo verificarlo en un dispositivo real

Los emuladores mienten sobre el comportamiento del icono en iOS. Para confirmar que el PNG realmente se renderiza:

1. Safari en Mac → Archivo → Añadir a la pantalla de inicio (con el iPhone emparejado, o usa el dispositivo directamente).
2. En el iPhone: abre el sitio en Safari, toca Compartir → Añadir a la pantalla de inicio e inspecciona el icono antes de confirmar.
3. Vuelve a comprobarlo después de limpiar la caché de Safari; si el icono antiguo persiste, sigue la guía de caché del favicon en Safari.

Entonces, ¿merece la pena usar SVG?

Sí, para todo excepto la pantalla de inicio de iOS. SVG te ofrece pestañas nítidas en Safari, cambio automático al modo oscuro mediante media queries inline y una única fuente de verdad para tu marca. El PNG como apple-touch-icon le da a iOS lo que realmente espera. Juntos son el único stack que sobrevive en cada superficie que Apple distribuye: pestañas, pestañas fijadas, marcadores y la pantalla de inicio.

Deja de adivinar la compatibilidad de formatos. Mzu favicondl convierte tu SVG tanto en el PNG apple-touch-icon como en un ICO multirresolución en un único flujo de trabajo.