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

134

¿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?

Harry
fuente
Para la mejor respuesta, eche un vistazo en el sitio web de Apple
Ruub
1
Encontré esta herramienta para crear íconos con todos los tamaños admitidos y el marcado para incluir en su página. iconifier.net
agarcian

Respuestas:

145

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/

felipep
fuente
30
Desearía que solo admitan SVG y terminen con esta basura. Gracias por la respuesta, sin embargo!
Steven Vachon
2
Me encantan las actualizaciones ... ¡hace que esta respuesta sea súper relevante!
Chris Allinson
1
Vale la pena señalar que el repositorio HTML5 Boilerplate popular y probado en batalla recomienda usar solo un ícono general <link rel="apple-touch-icon" href="icon.png"> github.com/h5bp/html5-boilerplate/blob/master/dist/…
jackocnr
Además, el enfoque moderno para admitir dispositivos Android es utilizar un archivo de manifiesto y especificar sus iconos allí: developers.google.com/web/fundamentals/app-install-banners : este enfoque también lo utiliza HTML5 Boilerplate repo: github.com/h5bp/html5-boilerplate/blob/master/dist/…
jackocnr
Probado En iPhone Xs, los íconos parecen un poco borrosos al lado del ícono de Github. : /
kaiserkiwi
117

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. ;)

Darren
fuente
8
Documentación de respaldo de apple: developer.apple.com/library/safari/#documentation/…
Jim Geurts
66
Sin embargo, el atributo de tamaños no es HTML válido.
8
Los dispositivos iOS más antiguos no entienden el sizesatributo y, por lo tanto, usan el último valor. Por <link rel="apple-touch-icon" href="apple-touch-icon-iphone.png" />lo tanto, debe ser el último. Además, como dice pezillionaire, ahora puede agregar un nuevo icono a 144x144 para el iPad Retina.
appmattus el
55
A partir de ios7, los tamaños recomendados han cambiado: 114 × 114 -> 120 × 120, 144x144 -> 152x152 (retina)
Cody Django
44
@Cody y el enfoque que está tomando HTML5Boilerplate ahora es usar solo el ícono 152x152 y llamarlo apple-touch-icon-precomposed.png, y dejar que otros iDevices cambien el tamaño según sea necesario.
Blazemonger
94

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" />
pezillonario
fuente
Me gusta más este método.
Caleb Jares
Este método tiene una hermosa simplicidad.
PaulSkinner
1
Entonces, hacemos 2 imágenes únicas y permitimos que el dispositivo se reduzca 2x. Lindo.
superluminary
9
A partir de ios7, los tamaños recomendados han cambiado: 114 × 114 -> 120 × 120, 144x144 -> 152x152 (retina)
Cody Django
44
@Cody y el enfoque que está tomando HTML5Boilerplate ahora es usar solo el ícono 152x152 y llamarlo apple-touch-icon-precomposed.png, y dejar que otros iDevices cambien el tamaño según sea necesario.
Blazemonger
34

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.

abe
fuente
1
Esta. O 144x144 (esperado iPad Retina res). Todos se ven bien reducidos para reducir el tamaño de los iPhone / iPad mientras se planifica un poco para el futuro.
DOOManiac
66
A partir de octubre de 2013, ahora es 152x152 y no parece cambiar para diferentes dispositivos (de todos modos, no entre mi computadora portátil y mi iphone4)
Wick
17

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.

serraosayos
fuente
16

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 :)!

esta imagen es de ese artículo :)

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:

Información de dispositivos iOS 8 y mediados de 2014

MrHaze
fuente
6

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
Jan M
fuente
Sí, pero esta pregunta se refiere a los nuevos iconos (más grandes) para iphone4 y ipad.
cherouvim
Si bien no es necesario especificar nada en el encabezado, sigue siendo una buena práctica. Si, por ejemplo, pierde la versión 144x144 para el iPad retina y no hay un icono sin una dimensión de píxeles, Mobile Safari volverá a mostrar solo una vista previa de un sitio, aunque podría usar una versión más pequeña, no óptima, pero aún mejor.
Rafael Bugajewski
Esta es una muy mala idea para no especificar en el encabezado ya que otras plataformas también los usarán (Android, ChromeOS, Blackberry, ...)
Remi Grumeau
5

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).

kennytm
fuente
1
La resolución del iPhone 4 aparentemente se amplía desde los iPhone 3 en un factor de dos, por lo que 114x114 probablemente sería una buena opción para el tamaño del icono para eso.
JAB
@JAB: hay bordes agregados al icono, por lo que el tamaño real del icono en el iPhone ≤3GS es 59x60. Si ese es el caso, 114x114 podría estar un poco apagado.
kennytm
¿Los bordes del iPhone 4+ no están escalados en la misma cantidad, en cuanto a resolución (de modo que, en cuanto al tamaño, parecen tener el mismo ancho)?
JAB
@JAB: Debería serlo. No lo comprobé.
kennytm
Gracias por todas sus ideas / consejos. Si hago 3 versiones, ¿cómo apunto a cada dispositivo con el tamaño relevante? ¿A menos que me falte algo y PNG sea un formato contenedor en el que puedo colocar los diferentes tamaños?
Harry
2

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).

Ethan
fuente
1

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.

Chris Drackett
fuente
0

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)
Prashant Aggarwal
fuente