Subes un PNG perfecto con fondo transparente para tu Apple Touch Icon. En el escritorio se ve nítido. En tu iPhone, Safari muestra un cuadrado blanco alrededor de tu logo. Parece una pegatina sobre un papel blanco.
Yo también he pasado por eso. Es frustrante porque hiciste todo bien — o eso creías. La solución es más simple de lo que esperas, y no requiere rediseñar tu icono.
Solución Rápida: Añade la Etiqueta HTML Correcta
La razón más común por la que tu apple touch icon transparent background se muestra como un cuadrado blanco es que iOS Safari está usando un icono por defecto. Seguramente te falta la etiqueta rel='apple-touch-icon', o estás usando el tamaño incorrecto.
Aquí tienes el HTML exacto que necesitas:
<link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon-180x180.png'>Eso es todo. Una línea. El atributo sizes='180x180' le dice a iOS que use este archivo específico. Sin él, Safari podría ignorar tu icono y mostrar un marcador de posición blanco.
¿Por qué 180x180?
Apple recomienda 180x180 píxeles para iPhones modernos (iPhone 6s y posteriores). Los dispositivos más antiguos hacen un fallback sin problemas. Si estás generando múltiples tamaños, lee nuestra Guía de Tamaños de Apple Touch Icon — pero honestamente, 180x180 cubre casi todo.
Causa Raíz: Por Qué se Rompe la Transparencia
Incluso con el HTML correcto, podrías seguir viendo un fondo blanco. Aquí están los tres verdaderos culpables:
- iOS cachea agresivamente. Safari en iPhone guarda los iconos en una base de datos SQLite. Si previamente subiste una versión con fondo blanco, iOS la recuerda. Necesitas limpiar la caché de Safari o renombrar el archivo.
- Tu PNG no es realmente transparente. Algunos editores de imagen guardan áreas transparentes como píxeles blancos con opacidad cero. iOS los renderiza como blancos. Usa una herramienta como Mzu favicondl para verificar el canal alfa de tu PNG.
- Estás usando un JPG o un formato que no es PNG. iOS solo soporta PNG para Apple Touch Icons. Un JPG siempre tiene un fondo sólido.
Cómo Verificar la Transparencia de tu PNG
Abre tu icono en un navegador. Si ves un patrón de tablero de ajedrez, tu transparencia está intacta. Si ves un fondo blanco o gris sólido, tu PNG tiene un problema. Vuelve a exportar desde tu herramienta de diseño con la opción 'Transparencia' marcada.
Consejos de Prevención: Elimina el Cuadrado Blanco para Siempre
Una vez que lo arregles, no querrás que se vuelva a romper. Aquí está mi enfoque probado en batalla:
Usa SVG para Apple Touch Icons (Sí, Funciona)
iOS 14+ soporta SVG para Apple Touch Icons. SVG maneja la transparencia de forma nativa — sin cuadrados blancos, sin problemas de canal alfa. Aquí está la etiqueta:
<link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.svg' type='image/svg+xml'>Cambié a SVG en mi sitio personal hace seis meses. Cero problemas. La única pega: las versiones antiguas de iOS (iOS 13 y anteriores) ignoran SVG. Mantén un PNG como fallback.
Cache-Busting: Renombra tu Archivo
Cada vez que actualices tu icono, cambia el nombre del archivo. En lugar de apple-touch-icon.png, usa apple-touch-icon-v2.png. Esto obliga a iOS a descargar el nuevo archivo en lugar de servir la versión cacheada con fondo blanco.
Prueba en un Dispositivo Real
No confíes en el simulador. Añade tu sitio a la pantalla de inicio del iPhone y comprueba el icono. Si muestra un cuadrado blanco, lo sabrás al instante. Para una lista de verificación completa, consulta nuestra Guía Completa de Configuración de Apple Touch Icon.
¿Qué Pasa con el Atributo 'precomposed'?
Puede que veas tutoriales antiguos que recomiendan rel='apple-touch-icon-precomposed'. Esto era para iOS 6 y versiones anteriores, que añadían un efecto brillante a los iconos. El iOS moderno lo ignora. No lo uses — es peso muerto.
El problema del cuadrado blanco casi siempre es una etiqueta faltante, un icono antiguo en caché, o un PNG sin transparencia real. Arregla esas tres cosas, y tu icono se verá nativo en cualquier iPhone.