Configuración de Apple Touch Icon - Configuración Completa de iOS (2025)
Aprende a agregar Apple Touch Icon para la pantalla de inicio de iOS Safari. Crea el ícono PNG de 180×180, agrega etiquetas HTML y prueba en iPhone y iPad.
Cuando los usuarios agregan tu sitio web a la pantalla de inicio de su iPhone o iPad, iOS Safari busca un ícono especial llamado Apple Touch Icon. Sin él, iOS tomará una captura de pantalla de tu página y la usará como ícono, lo que generalmente se ve terrible (imagina una captura de pantalla diminuta y borrosa de tu página de inicio).
Este tutorial te muestra cómo crear el tamaño correcto (PNG de 180×180), agregar las etiquetas HTML y probar el ícono en dispositivos iOS reales. Toma alrededor de 5 minutos configurarlo, y funciona en todos los iPhones y iPads modernos.
Cómo iOS usa Apple Touch Icon
A diferencia de los navegadores de escritorio que leen favicon.ico, iOS Safari depende de archivos PNG dedicados de Apple Touch Icon para la pantalla de inicio, el conmutador de aplicaciones y los resultados de búsqueda de Spotlight. Es la versión de Apple de un favicon, pero a diferencia de los favicons, iOS no usa la etiqueta estándar <link rel="icon"> ni el web manifest. Necesitas una etiqueta separada <link rel="apple-touch-icon">.
¿Por qué iOS no usa el web manifest como Android? Porque Apple introdujo el Apple Touch Icon en 2007 (antes de que existiera el estándar de web manifest), y se han mantenido con él por compatibilidad hacia atrás. Entonces, si quieres que tu sitio se vea bien tanto en iOS como en Android, necesitas tanto un Apple Touch Icon como un web manifest.
Paso 1: Prepara tu ícono PNG de 180×180
Apple recomienda un archivo PNG de 180×180 para iPhones y iPads modernos (iPhone 6 y posteriores, todos los iPad Pro, todos los iPad Air). Los dispositivos más antiguos usaban tamaños más pequeños (120×120, 152×152), pero 180×180 funciona en todas partes: iOS lo reducirá automáticamente si es necesario. No te molestes en crear múltiples tamaños a menos que estés apuntando a dispositivos muy antiguos (iPhone 5 y anteriores).
Si generaste tu paquete de favicon con nuestro Convertidor de Imágenes, ya tienes archivos PNG en varios tamaños. Busca el PNG de 192×192 (lo suficientemente cerca de 180×180) o regenera un PNG de 180×180 específicamente para iOS. Coloca el archivo en el directorio raíz de tu sitio (como /apple-touch-icon.png) o en una carpeta /icons/ (como /icons/apple-touch-icon.png).
Importante: No agregues tus propias esquinas redondeadas o sombras a la imagen de origen. iOS agrega esquinas redondeadas y una sombra sutil automáticamente. Si las agregas tú mismo, terminarás con esquinas doblemente redondeadas o sombras dobles, lo que se ve horrible. Mantén tu imagen de origen cuadrada con esquinas afiladas, y deja que iOS maneje el estilo.
Paso 2: Agrega la etiqueta apple-touch-icon
Agrega esta línea a tu sección HTML <head>: <link rel="apple-touch-icon" href="/apple-touch-icon.png">. iOS obtendrá el archivo cuando el usuario toque "Añadir a pantalla de inicio" en Safari. Asegúrate de que la ruta href sea correcta: si tu ícono está en un subdirectorio, usa la ruta completa como href="/icons/apple-touch-icon.png".
Para un solo ícono moderno, puedes comenzar con un archivo de 180×180 y una etiqueta de enlace simple (no se necesita atributo sizes). Si quieres admitir dispositivos más antiguos, agrega múltiples tamaños: <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180.png"> y <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152.png">. Declara el tamaño más grande primero para que iOS pueda elegir la mejor coincidencia para pantallas de alta densidad.
Asegúrate de que el archivo se sirva desde el directorio raíz de tu dominio (como https://tusitio.com/apple-touch-icon.png) o usa una ruta absoluta. iOS a veces busca el ícono en la raíz incluso si especificas una ruta diferente, por lo que ponerlo en la raíz es la opción más segura. Si estás usando un CDN, asegúrate de que el ícono sea accesible sin autenticación.
Paso 3: Combina con web manifest para Android
Incluso si ya tienes un web manifest con íconos (para Android y Chrome de escritorio), iOS todavía presta especial atención a las etiquetas apple-touch-icon al construir el ícono de la pantalla de inicio. Los íconos del web manifest no funcionarán en iOS: necesitas ambos sistemas.
Mantén el diseño de tu Apple Touch Icon consistente con los íconos listados en tu manifest.json para que los usuarios vean la misma marca en todas las plataformas. Usa el mismo logo, los mismos colores, el mismo estilo, solo asegúrate de que el Apple Touch Icon sea de 180×180 y los íconos del manifest sean de 192×192 y 512×512.
Paso 4: Prueba en dispositivos iOS reales
Abre tu sitio en Safari en un iPhone o iPad, toca el botón Compartir (el cuadrado con una flecha apuntando hacia arriba) y elige "Añadir a pantalla de inicio". Deberías ver una vista previa de tu ícono de 180×180 con esquinas redondeadas aplicadas por iOS. Verifica el ícono, el color de fondo y el nombre que se muestra debajo del ícono. Si ves una captura de pantalla de tu página en su lugar, la etiqueta <link rel="apple-touch-icon"> falta o la ruta del archivo es incorrecta.
Después de agregar el ícono a la pantalla de inicio, tócalo para confirmar que inicia tu sitio correctamente. El ícono debería verse nítido y claro, no borroso o pixelado. Si se ve borroso, tu imagen de origen probablemente era demasiado pequeña (menos de 180×180). Regenera el ícono desde un logo de mayor resolución (al menos 512×512) usando nuestro Convertidor de Imágenes.
Después de cambiar íconos, elimina el acceso directo antiguo de la pantalla de inicio y agrégalo nuevamente: iOS almacena en caché los íconos de forma agresiva y no se actualizará automáticamente. ¿No tienes un iPhone o iPad? Usa el Simulador de iOS que viene con Xcode (descarga gratuita para usuarios de Mac). No es perfecto, pero es lo suficientemente bueno para pruebas básicas.
¿Apple Touch Icon configurado?
Una vez que tu Apple Touch Icon esté funcionando en iOS, no olvides agregar soporte de Android con un web manifest. iOS y Android usan sistemas completamente diferentes para íconos de pantalla de inicio, por lo que necesitas ambos. Si solo tienes un Apple Touch Icon, los usuarios de Android verán un ícono genérico o una captura de pantalla.