¿De qué tamaño debe ser apple-touch-icon.png para iPad y iPhone?

¿Son compatibles los íconos táctiles de Apple con un tamaño superior a 60x60? De ser así, ¿qué dimensiones debo usar para iPad y iPhone?

Lista actualizada en diciembre de 2019, iOS13 Un ícono para iOS 180x180 px y otro para Android 192x192 px (declarado en site.webmanifest).

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

#### site.webmanifest
{
    "name": "",
    "short_name": "",
    "icons": [
        {
            "src": "/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        }
    ],
    "display": "standalone"
}

Lista en desuso octubre de 2017, iOS11

Lista para iPhone y iPad con y sin retina

<!-- iPhone(first generation or 2G), iPhone 3G, iPhone 3GS -->
<link rel="apple-touch-icon" sizes="57x57" href="touch-icon-iphone.png">
<!-- iPad and iPad mini @1x -->
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<!-- iPhone 4, iPhone 4s, iPhone 5, iPhone 5c, iPhone 5s, iPhone 6, iPhone 6s, iPhone 7, iPhone 7s, iPhone8 -->
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<!-- iPad and iPad mini @2x -->
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
<!-- iPad Pro -->
<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-pro.png">
<!-- iPhone X, iPhone 8 Plus, iPhone 7 Plus, iPhone 6s Plus, iPhone 6 Plus -->
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-6-plus.png">
<!-- Android Devices High Resolution -->
<link rel="icon" sizes="192x192" href="icon-hd.png">
<!-- Android Devices Normal Resolution -->
<link rel="icon" sizes="128x128" href="icon.png">

Actualización de octubre de 2017 iOS 11: iOS 11 marcado, iPhone X y iPhone 8 introducidos

Actualización de noviembre de 2016 iOS 10: se introdujo la nueva versión de iOS iPhone 7 y iPhone 7plus, tienen la misma resolución de pantalla, dpi, etc. que iPhone 6s y iPhone 7plus, hasta ahora no se encontraron cambios con respecto a la actualización 2015

Actualice Android a mediados de 2016: agregue dispositivos Android a la lista ya que los enlaces de Apple Touch están marcados como obsoletos por Google y no serán compatibles en ningún momento para sus dispositivos

<!-- Android Devices High Resolution -->
<link rel="icon" sizes="192x192" href="icon-hd.png">
<!-- Android Devices High Resolution -->
<link rel="icon" sizes="128x128" href="icon.png">

Actualización 2015 iOS 9: para iOS 9 y iPad pro

<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-pro.png">

Los nuevos iPhones (6s y 6s Plus) están usando los mismos tamaños que el iPhone (6 y 6 Plus), el nuevo iPad pro usa una imagen de tamaño 167x167 px, las otras resoluciones siguen siendo las mismas.

Actualización 2014 iOS 8:

Para iOS 8 y iPhone 6 plus

<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-6-plus.png"> 

El iPhone 6 usa la misma imagen de 120 x 120 px que el iPhone 4 y 5, el resto es el mismo que para iOS 7

Actualización 2013 iOS7:

Para iOS 7, las resoluciones recomendadas cambiaron:

• para iPhone Retina de 114 x 114 px a 120 x 120 px
• para iPad Retina de 144 x 144 px a 152 x 152 px

La otra resolución sigue siendo la misma.

• 57 x 57 px predeterminado
• 76 x 76 px para iPads sin retina

Fuente: https://developer.apple.com/ios/human-interface-guidelines/icons-and-images/app-icon/

Use estos tamaños 57x57, 72x72, 114x114, 144x144 y luego haga esto en el encabezado de su documento:

<link rel="apple-touch-icon" href="apple-touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-iphone4.png" />

Esto se verá bien en todos los dispositivos de Apple. ;)

Con el iPad (3ra generación) ahora hay cuatro tamaños de iconos 57x57, 72x72, 114x114, 144x144.

Debido a que los íconos de retina son exactamente el doble del tamaño de los íconos estándar, en realidad solo necesitamos hacer 2 íconos : 114 x 114 y 144 x 144. Al configurar el ícono de tamaño de retina en el ícono estándar correspondiente, iOS los escalará en consecuencia.

<!-- Standard iPhone --> 
<link rel="apple-touch-icon" sizes="57x57" href="touch-icon-iphone-114.png" />
<!-- Retina iPhone --> 
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone-114.png" />
<!-- Standard iPad --> 
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad-144.png" />
<!-- Retina iPad --> 
<link rel="apple-touch-icon" sizes="144x144" href="touch-icon-ipad-144.png" />

El icono en el sitio de Apple es de 152x152 píxeles.
http://www.apple.com/apple-touch-icon.png

Espero que responda tu pregunta.

TL; DR: use un ícono PNG a 180 x 180 px @ 150 ppi y luego enlácese de esta manera:

<link rel="apple-touch-icon" href="path/to/apple-touch-icon.png">

Detalles sobre el enfoque

A partir de 2020-04, la respuesta canónica de Apple se refleja en su documentación en iOS .

Oficialmente, la especificación dice:

• iPhone 180 px × 180 px (60pt × 60pt @ 3x)
• iPhone 120px × 120px (60pt × 60pt @ 2x)
• iPad Pro 167px × 167px (83.5pt × 83.5pt @ 2x)
• iPad, iPad mini 152px × 152px (76pt × 76pt @ 2x)

En realidad, estas diferencias de tamaño son pequeñas, por lo que los ahorros de rendimiento realmente solo serán importantes en sitios con mucho tráfico.

Para sitios de bajo tráfico, normalmente uso un ícono PNG a 180 x 180 px @ 150 ppi y obtengo muy buenos resultados en todos los dispositivos, incluso en los más grandes.

He estado desarrollando y diseñando aplicaciones de iOS por un tiempo y esta es la mejor hoja de trucos de diseño de iOS que existe.

que te diviertas :)!

Actualización: para iOS 8+ y los nuevos dispositivos (iPhone 6, 6 Plus, iPad Air) vea este enlace actualizado .

Meta actualización: Iphone 6s / 6s Plus tienen las mismas resoluciones que iPhone 6/6 Plus respectivamente

Esta es una imagen de la nueva versión del artículo:

La documentación relevante en el sitio de Apple, Especificación de un icono de página web para Web Clip .

No es necesario poner nada en el encabezado de su documento. Si no se especifica ningún ícono usando un elemento de enlace, el directorio raíz del sitio web busca íconos con el ícono apple-touch-icon o apple-touch-icon-precomposed prefijo .

Por ejemplo, si el tamaño de icono apropiado para el dispositivo es 57 x 57, el sistema busca los nombres de archivo en el siguiente orden:

• apple-touch-icon-57x57-precomposed.png
• apple-touch-icon-57x57.png
• apple-touch-icon-precomposed.png
• apple-touch-icon.png

Si. Si el tamaño no coincide, el sistema lo redimensionará . Pero es mejor hacer 2 versiones de los íconos.

• iPad - 72x72.
• iPhone (≥4) - 114x114.
• iPhone ≤3GS - 57x57 - Si es posible.

Puede diferenciar iPad y iPhone por el agente de usuario en su servidor. Si no desea escribir un script en el servidor, también puede cambiar el icono con Javascript por

<link ref="apple-touch-icon" href="iPhone_version.png" />
...

if (... iPad test ...) {
  $('link[rel="apple-touch-icon"]').href = 'iPad_version.png'; // assuming jQuery
}

Esto funciona porque el icono se consulta solo cuando agrega el clip web.

(Todavía no hay una forma pública de diferenciar iPhone ≥4 de iPhone ≤3GS en Javascript).

Sí, se admiten más de 60x60. Para simplificar, cree íconos de estos 4 tamaños:

1) 60x60  <= default
2) 76x76
3) 120x120
4) 152x152

Ahora, es preferible agregarlos como enlaces en su HTML como:

<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">

Puede optar por no declarar los 4 enlaces anteriores, sino simplemente declarar un enlace único, en cuyo caso dar el tamaño más alto 152x152o incluso un tamaño más alto que eso, por ejemplo 196x196. Siempre recortará el tamaño para reubicar. Asegúrese de mencionar el size.

También puede optar por no declarar ni un solo enlace. Apple menciona que en este escenario, primero buscará la raíz del servidor para el tamaño inmediatamente mayor que el tamaño que desea (formato de nombre:apple-touch-icon-<size>.png , y si eso no se encuentra, luego buscará el default file: apple-touch-icon.png. Es preferible que defina los enlaces para minimizar el navegador que consulta su servidor.

Necesidades de íconos:

- use PNG, avoid interlaced
- use 24-bit PNG
- not necessary to use web-safe colors

En versiones anteriores a iOS 7, si no desea que agregue efectos a sus iconos, simplemente agregue el sufijo -precomposed.pngal nombre del archivo. (iOS 7 no agrega efectos incluso sin él).

Creo que esta pregunta es sobre iconos web. Intenté dar un icono a 512x512, y en el simulador de iPhone 4 se ve genial (en la vista previa), sin embargo, cuando se agrega a la pantalla de inicio, está muy pixelado.

En el lado bueno, si usa un ícono más grande en el iPad (aún con mi prueba 512x512), parece que tiene una mejor calidad en el iPad. Esperemos que la representación del iPhone 4 sea un error.

He abierto un error sobre esto en el radar.

EDITAR:

Actualmente estoy usando un icono de 114x114 con la esperanza de que se vea bien en el iPhone 4 cuando se lance. Si el iPhone 4 todavía tiene un error cuando sale, voy a optimizar el ícono para el iPad (nítido y sin cambiar el tamaño a 72x72), y luego dejarlo reducir para los iPhones viejos.

Para iPhone y iPod touch , cree íconos que midan:

    57 X 57 pixels
    114 X 114 pixels (high resolution @2X)

Para iPad , cree un icono que mida:

    72 x 72 pixels
    144 X 144 pixels (high resolution @2X)