When someone adds your website to their iPhone or iPad home screen, iOS uses the Apple Touch Icon as the app-like icon. Without one, iOS takes an ugly screenshot of your page instead. Here's everything you need to know.
What is an Apple Touch Icon?
An Apple Touch Icon is a special PNG image that iOS devices use when a user bookmarks your site to their home screen. It works like a native app icon — iOS automatically applies its signature rounded corners and gloss effect (on older iOS versions).
In 2026, you only need one size: 180×180 pixels. Here's why:
iPhone (Retina) — Uses 120×120 or 180×180 (iOS scales 180 down to 120 if needed)
iPad Pro — Uses 167×167 (iOS scales 180 down)
iPad — Uses 152×152 (iOS scales 180 down)
Since iOS can scale down but cannot scale up well, providing the largest size (180×180) is the safest approach. One file covers all devices.
Historical note: In the past, you needed separate sizes for each device (57, 60, 72, 76, 114, 120, 144, 152, 167, 180). Modern iOS handles scaling well enough that 180×180 alone works perfectly.
If you place a file named apple-touch-icon.png in your website's root directory, iOS will find it automatically — even without any HTML declaration. However, explicitly declaring it in HTML is still recommended for reliability.
apple-touch-icon vs apple-touch-icon-precomposed
Attribute
apple-touch-icon
apple-touch-icon-precomposed
Gloss effect
iOS adds gloss (iOS 6 and earlier)
No gloss added
Modern iOS (7+)
No gloss (same behavior)
No gloss (same behavior)
Recommendation
Use this one
Deprecated, not needed
Since iOS 7+ no longer adds the gloss effect, apple-touch-icon and apple-touch-icon-precomposed behave identically. Just use apple-touch-icon.
Design Tips
Don't add rounded corners — iOS applies them automatically. If you round them yourself, you'll get double-rounded corners.
Avoid transparency — Use a solid background color. Transparent areas become black on iOS.
Keep it simple — The icon is displayed at ~60px on screen. Fine details won't be visible.
Use your brand color as background — This ensures the icon stands out on any wallpaper.
Test on a real device — The iOS simulator doesn't always match real devices.
Common Mistakes
Using transparency → Black background on iOS home screen
Too small → Providing 57×57 looks blurry on modern Retina screens
Forgetting to test → Always test by actually adding to home screen on a real iPhone
See How Other Sites Do It
Curious how major websites handle their Apple Touch Icons? Use Mzu favicondl to check any website's favicon setup, including the Apple Touch Icon.
Cuando alguien añade tu sitio web a la pantalla de inicio de su iPhone o iPad, iOS utiliza el Apple Touch Icon como icono de aplicación. Sin él, iOS toma una fea captura de pantalla de tu página. Aquí tienes todo lo que necesitas saber.
¿Qué es un Apple Touch Icon?
Un Apple Touch Icon es una imagen PNG especial que los dispositivos iOS utilizan cuando un usuario marca tu sitio en su pantalla de inicio. Funciona como un icono de aplicación nativa: iOS aplica automáticamente sus esquinas redondeadas distintivas y un efecto de brillo (en versiones antiguas de iOS). Se declara en HTML con:
En 2026, solo necesitas un tamaño: 180×180 píxeles. Aquí te explicamos por qué:
iPhone (Retina) — Usa 120×120 o 180×180 (iOS escala 180 a 120 si es necesario)
iPad Pro — Usa 167×167 (iOS escala 180 hacia abajo)
iPad — Usa 152×152 (iOS escala 180 hacia abajo)
Dado que iOS puede escalar hacia abajo pero no puede escalar hacia arriba bien, proporcionar el tamaño más grande (180×180) es el enfoque más seguro. Un solo archivo cubre todos los dispositivos.
Nota histórica: En el pasado, necesitabas tamaños separados para cada dispositivo (57, 60, 72, 76, 114, 120, 144, 152, 167, 180). El iOS moderno maneja el escalado lo suficientemente bien como para que 180×180 por sí solo funcione perfectamente.
Requisitos del Formato de Archivo
Formato: Solo PNG (JPEG funciona, pero PNG es el estándar)
Si colocas un archivo llamado apple-touch-icon.png en el directorio raíz de tu sitio web, iOS lo encontrará automáticamente, incluso sin ninguna declaración HTML. Sin embargo, se sigue recomendando declararlo explícitamente en HTML para mayor fiabilidad.
apple-touch-icon vs apple-touch-icon-precomposed
Atributo
apple-touch-icon
apple-touch-icon-precomposed
Efecto de brillo
iOS añade brillo (iOS 6 y anteriores)
No se añade brillo
iOS moderno (7+)
Sin brillo (mismo comportamiento)
Sin brillo (mismo comportamiento)
Recomendación
Usa este
Obsoleto, no necesario
Dado que iOS 7+ ya no añade el efecto de brillo, apple-touch-icon y apple-touch-icon-precomposed se comportan de forma idéntica. Simplemente usa apple-touch-icon.
Consejos de Diseño
No añadas esquinas redondeadas — iOS las aplica automáticamente. Si las redondeas tú mismo, obtendrás esquinas doblemente redondeadas.
Evita la transparencia — Usa un color de fondo sólido. Las áreas transparentes se vuelven negras en iOS.
Mantenlo simple — El icono se muestra a ~60px en pantalla. Los detalles finos no serán visibles.
Usa el color de tu marca como fondo — Esto asegura que el icono destaque en cualquier fondo de pantalla.
Prueba en un dispositivo real — El simulador de iOS no siempre coincide con los dispositivos reales.
Errores Comunes
Usar transparencia → Fondo negro en la pantalla de inicio de iOS
Añadir esquinas redondeadas manualmente → Efecto de doble redondeo
Formato de archivo incorrecto → SVG no es compatible; usa PNG
Demasiado pequeño → Proporcionar 57×57 se ve borroso en pantallas Retina modernas
Olvidar probar → Siempre prueba añadiéndolo a la pantalla de inicio en un iPhone real
Mira cómo lo hacen otros sitios
¿Tienes curiosidad por saber cómo manejan los sitios web importantes sus Apple Touch Icons? Usa Mzu favicondl para verificar la configuración de favicon de cualquier sitio web, incluido el Apple Touch Icon.
누군가 당신의 웹사이트를 iPhone 또는 iPad 홈 화면에 추가할 때, iOS는 Apple Touch Icon을 앱과 같은 아이콘으로 사용합니다. 이것이 없으면 iOS는 대신 페이지의 보기 흉한 스크린샷을 찍습니다. 알아야 할 모든 것을 여기에 정리했습니다.
Apple Touch Icon이란 무엇입니까?
Apple Touch Icon은 사용자가 당신의 사이트를 홈 화면에 북마크할 때 iOS 기기가 사용하는 특별한 PNG 이미지입니다. 네이티브 앱 아이콘처럼 작동하며, iOS는 자동으로 시그니처인 둥근 모서리와 광택 효과(이전 iOS 버전에서)를 적용합니다. HTML에서는 다음과 같이 선언합니다.