tarda - ¿De qué tamaño debería ser apple-touch-icon.png para iPad y iPhone 4?
mi iphone no enciende esta totalmente muerto (11)
¿Son compatibles los iconos táctiles de Apple superiores a 60x60 y, de ser así, qué dimensiones debería usar para el iPad y el iPhone 4?
Con el iPad (tercera generación), ahora hay cuatro tamaños de iconos 57x57, 72x72, 114x114, 144x144.
Debido a que los íconos de la retina son exactamente del doble del tamaño de los íconos estándar, solo necesitamos crear 2 íconos : 114 x 114 y 144 x 144. Al configurar el ícono del tamaño de la retina en el ícono estándar correspondiente, iOS los escalará según corresponda.
<!-- 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" />
Creo que esta pregunta es sobre iconos web. Intenté dar un ícono 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 usas un ícono más grande en el iPad (aún con mi prueba de 512x512) parece salir en 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 ícono de 114x114 con la esperanza de que se vea bien en el iPhone 4 cuando se publique. Si el iPhone 4 todavía tiene un error cuando sale, voy a optimizar el ícono para el iPad (nítido y sin cambio de tamaño a 72x72), y luego dejarlo escalar para los viejos iPhones.
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.
He estado desarrollando y diseñando aplicaciones de iOS por un tiempo. ¡ This 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), consulte este enlace actualizado .
Meta actualización: Iphone 6s / 6s Plus tiene 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, especificando un icono de página web para Web Clip .
No hay necesidad de poner nada en el encabezado de su documento. Si no se especifican iconos mediante un elemento de enlace, se buscan en el directorio raíz del sitio los íconos con el ícono apple-touch-icon o apple-touch-icon-precomposed .
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
Para iPhone y iPod touch , crea iconos que midan:
57 X 57 pixels
114 X 114 pixels (high resolution @2X)
Para iPad , crea un icono que mida:
72 x 72 pixels
144 X 144 pixels (high resolution @2X)
Sí, son compatibles con más de 60x60. Para simplificar, crea iconos 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, pero solo declare un solo enlace, en cuyo caso 152x152 tamaño más alto de 152x152 o incluso un tamaño superior a ese, digamos 196x196 . Siempre reducirá el tamaño para volver a proponer. Asegúrese de mencionar el size .
También puede optar por no declarar ni un solo enlace. Apple menciona que en este escenario, buscará primero la raíz del servidor para el tamaño inmediatamente superior al que desea (formato de nomenclatura: apple-touch-icon-<size>.png ), y si no se encuentra, entonces aparecerá busque el default file: apple-touch-icon.png . Es preferible que defina los enlaces ya que eso minimizará el navegador que consulta su servidor.
Necesidades de icono:
- 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.png al nombre del archivo. (iOS 7 no agrega efectos incluso sin él).
Sí. Si el tamaño no coincide, el sistema lo reescalará . 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 ícono 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 solo se consulta cuando agrega el clip web.
(Todavía no existe una forma pública de diferenciar iPhone ≥4 de iPhone ≤3GS en Javascript).
TL; DR: use un ícono PNG a 180 x 180 px @ 150 ppi y luego conéctelo de esta manera:
<link rel="apple-touch-icon" href="path/to/apple-touch-icon.png">
Detalles sobre el enfoque
A partir del 2017-10-30, la respuesta canónica de Apple se refleja en https://developer.apple.com/ios/human-interface-guidelines/icons-and-images/app-icon/ .
Oficialmente, la especificación dice:
- iPhone 180px × 180px (60pt × 60pt a 3x)
- iPhone 120px × 120px (60pt × 60pt a 2x)
- iPad Pro 167px × 167px (83.5pt × 83.5pt a 2x)
- iPad, iPad mini 152px × 152px (76pt × 76pt a 2x)
En realidad, estas diferencias de tamaño son muy pequeñas, por lo que el ahorro de rendimiento realmente solo importará en sitios de mucho tráfico.
Para sitios con menos tráfico, generalmente utilizo un ícono PNG a 180 x 180 px @ 150 ppi y obtengo muy buenos resultados en todos los dispositivos, incluso en los de mayor tamaño.
Utilice estos tamaños 57x57, 72x72, 114x114, 144x144 y luego haga esto en la parte superior 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 Apple. ;)
Lista actualizada de 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 verificado, iPhone X y iPhone 8 presentados
Actualización de noviembre de 2016 iOS 10: nueva versión de iOS iPhone 7 y iPhone 7plus presentado, tienen la misma resolución de pantalla, ppp, etc. que iPhone 6s y iPhone 7plus, hasta ahora no se encontraron cambios con respecto a la actualización 2015
Actualización de mediados de 2016 Android: agregue dispositivos Android a la lista ya que los enlaces Apple-Touch están marcados como obsoletos por Google y no serán compatibles en ningún momento con 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) usan 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">
Iphone 6 usa la misma imagen de 120 x 120 px que 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 por defecto
- 76 x 76 px para iPads sin retina
Fuente: https://developer.apple.com/ios/human-interface-guidelines/icons-and-images/app-icon/