El apple-touch-icon es la imagen que iOS usa cuando alguien añade tu sitio web a la pantalla de inicio de su iPhone o iPad. También aparece como icono de pestaña fijada de Safari en Mac. Sin él, iOS muestra una miniatura genérica de una captura de pantalla — una oportunidad de marca perdida. Esta guía cubre el tamaño exacto, la etiqueta correcta y cómo corregir los fallos comunes de auditoría.
La respuesta corta
- Tamaño: 180×180 píxeles, PNG
- Nombre de archivo:
apple-touch-icon.png - Etiqueta:
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
La etiqueta link del apple-touch-icon
Añade esto dentro del <head> de cada página:
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">También puedes declarar varios tamaños para dispositivos antiguos, pero 180×180 por sí solo cubre todos los iPhone y iPad modernos (iOS lo escala automáticamente):
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180.png">
<link rel="apple-touch-icon" sizes="167x167" href="/apple-touch-icon-167.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152.png">¿Necesitas un PNG de 180×180 rápido? Sube tu logo a Favicon.one — el paquete de salida incluye
apple-touch-icon.pngcon el tamaño correcto.
Directrices de diseño para los Apple touch icons
- Rellena todo el cuadrado. iOS redondea las esquinas por sí mismo — no las redondees antes ni añadas padding.
- Sin transparencia. Usa un color de fondo sólido; las zonas transparentes se renderizan en negro en iOS.
- Mantenlo simple. A 180px o menos, el detalle se pierde. Las formas gruesas y el alto contraste ganan.
- Prueba en un dispositivo real. Añade tu sitio a la pantalla de inicio para ver cómo se ve realmente.
Por qué Lighthouse marca tu apple-touch-icon
La auditoría PWA de Google Lighthouse comprueba que exista un apple-touch-icon válido. Fallos comunes:
- Falta la etiqueta por completo — añade la etiqueta
<link rel="apple-touch-icon">. - 404 en el archivo — confirma que
/apple-touch-icon.pngexiste realmente y carga. - Tamaño incorrecto — debe ser de al menos 144×144; se recomienda 180×180.
- Imagen no cuadrada — el icono debe tener el mismo ancho y alto.
Pasa tu sitio por el Favicon Checker para verificarlo.
apple-touch-icon vs favicon — ¿cuál es la diferencia?
| favicon.ico / PNG | apple-touch-icon.png | |
|---|---|---|
| Usado por | Pestañas del navegador, marcadores | Pantalla de inicio de iOS, pestañas fijadas de Safari |
| Tamaño | 16, 32, 48 | 180×180 |
| Transparencia | Soportada | Evitar (se renderiza en negro) |
| Esquinas | Tal cual | Redondeadas automáticamente por iOS |
Necesitas ambos para una configuración completa — consulta la guía completa de tamaños.
Iconos “precomposed” (heredado)
Las versiones antiguas de iOS admitían rel="apple-touch-icon-precomposed" para evitar que iOS añadiera un efecto de brillo. El iOS moderno ignora por completo ese efecto, así que hoy basta con el apple-touch-icon simple.