¿Cuáles son las dimensiones de píxel correctas para un icono de toque de manzana?

votos
69

No estoy seguro de cuál debería ser el tamaño correcto.

Muchos sitios parecen repetir que el icono de toque de manzana debe tener 57x57 píxeles, pero citan un enlace roto como origen.

Los comentarios de Hanselman y los niños del patio sugieren diferentes tamaños, incluyendo 163x163 y 60x60.

¡El icono de apple.com propio de Apple es 129x129!

Ver mi pregunta relacionada: ¿cómo le doy a mis sitios web un ícono para iPhone?

Publicado el 04/08/2008 a las 22:17
fuente por usuario
En otros idiomas...                            


11 respuestas

votos
40

Parece que las directrices de Apple como el 3 de agosto de 2010 incluyen ahora las imágenes de "alta resolución" (para el iPhone 4) en sus "necesarios" tamaño de los iconos.

Parece que tenemos que proporcionar una imagen de 640x960 título tanto un 57x57 y una imagen de 114x114 ahora, así como.

Ver icono personalizado e Imagen Directrices para la creación (Javascript required) que forma parte de todo un documento:

Respondida el 16/08/2010 a las 07:15
fuente por usuario

votos
5

Desde la caché de Google de Apple Developer Connection - Centro de desarrollo de aplicaciones web - Diseño de contenido ...

Crear un icono de marcador de clip web

iPhone e iPod touch permiten a los usuarios guardar un marcador de Web Clip en su sitio en su pantalla de inicio.

Para especificar un icono de marcador para todas las páginas de un sitio web, coloque una imagen PNG llamada "apple-touch-icon.png" en el directorio raíz de su servidor web, similar a "favicon.ico" para los iconos del sitio.

Para anular el icono del marcador del sitio en una página web específica, inserte un elemento <link> similar a <link rel = "apple-touch-icon" href = "/ customIcon.png" /> dentro del elemento <head> de la página .

Las dimensiones del icono del marcador deben ser de 57x57 píxeles. Si el icono tiene un tamaño diferente, se escalará y recortará para que quepa.

Safari combinará automáticamente el icono con la superposición estándar "vidriosa" para que parezca una aplicación de iPhone o iPod incorporada.

Respondida el 07/08/2008 a las 00:13
fuente por usuario

votos
3

Depende de la cantidad de detalles que desee que tenga, debe tener una relación de aspecto de 1: 1 (básicamente, debe ser cuadrada)

Me gustaría ir con el propio 129 * 129 de Apple

Respondida el 04/08/2008 a las 22:36
fuente por usuario

votos
2

Como parte de su guía de safari de contenido web, Apple tiene en realidad una página a disposición del público llamado " Especificación de un icono de página web para la Web Clip " (Javascript required) que cubre todas las resoluciones y su aplicación.

Respondida el 22/01/2011 a las 13:53
fuente por usuario

votos
2

No puedo citar una fuente para esos tamaños porque la referencia oficial está bajo llave de ADC.

Sin embargo, muchos de los sitios que no son NDA tienen los tutoriales sobre cómo crear los íconos. Por ejemplo aquí:

Respondida el 07/08/2008 a las 00:06
fuente por usuario

votos
1

Especificaciones de Apple especifican los nuevos tamaños para iOS7:

  • 60x60
  • 76x76
  • 120x120
  • 152x152

Mientras que para tamaños viejos iOS6 y antes son:

  • 57x57
  • 72x72
  • 114x114
  • 144x144

Por cierto, iconos precompuestas están en desuso.

Como consecuencia de ello, pero para apoyar los nuevos dispositivos (correr iOS7) y mayores (iOS 6 y anteriores), estos 8 fotos deben estar presentes y el código genérico es:

<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">    
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">

Además, se debe crear una imagen de 152x152 llamadoapple-touch-icon.png .

Es posible que desee saber que este generador de favicon puede generar todas estas imágenes a la vez. La revelación completa: Soy el autor de este sitio.

Respondida el 15/01/2014 a las 23:04
fuente por usuario

votos
1

El tamaño oficial es 57x57. Yo recomendaría usar el tamaño exacto simplemente porque lleva menos memoria cuando se carga (a menos que Apple guarde en caché la representación escalada). Dicho esto, Rex tiene razón en que cualquier tamaño cuadrado funcionará

Respondida el 06/08/2008 a las 05:10
fuente por usuario

votos
0

Usted no tiene que preocuparse por el tamaño correcto más. Si tiene archivos de iTunes obra (es decir, el archivo de 1024 * 1024 tamaño) de su icono, a continuación, he creado esta aplicación que le proporcionará todos los iconos basados en la información proporcionada aquí . Obtener la aplicación desde aquí , y seguir las instrucciones en el archivo léame para crear todos los iconos necesarios para la aplicación de iOS.

Respondida el 20/04/2014 a las 21:43
fuente por usuario

votos
0

Lista actualizada octubre de 2014, iOS8

Lista para iPhone y iPad con y sin retina

<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">
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-6-plus.png"> 

Actualización 2014 IOS 8:

Para iOS 8 y 6 más Iphone

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

Iphone 6 utiliza la misma imagen 120 x 120 px como iphone 4 y 5 el resto es el mismo que para iOS 7

Actualizar iOS7 2013:

Para iOS 7 las resoluciones recomendadas cambiaron:

  • para iPhone Retina de 114 x 114 px a 120 x 120 px
  • para el iPad Retina de 144 x 144 píxeles de 152 x 152 píxeles

La otra resolución siguen siendo los mismos

  • defecto 57 x 57 px
  • 76 x 76 px para iPads sin retina
Respondida el 12/11/2013 a las 17:06
fuente por usuario

votos
0

El enlace de NilObject me llevó a la gran publicación de blog Catchup en su icono en makentosh.com

... Por supuesto, toda esta inconsistencia tuvo que ser tratada con el tiempo, ¿verdad? ¡El pozo 2.0 lo trató de la mejor manera! Finalmente, 57x57 significaba 57x57.

... todos y cada uno de los píxeles ... procesados ​​a la perfección.

Respondida el 07/08/2008 a las 00:36
fuente por usuario

votos
0

No creo que haya un "tamaño correcto". Dado que el iPhone realmente está ejecutando OSX, el sistema de renderización de iconos es bastante robusto. Siempre que le proporcione una imagen de alta calidad con la relación de aspecto correcta y una resolución al menos tan alta como la salida real, el sistema operativo se reducirá de forma muy limpia. Mi sitio usa un 158x158 y el ícono se ve perfecto como un píxel en la pantalla del iPhone.

Respondida el 04/08/2008 a las 22:22
fuente por usuario

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more