iphone - icono - ios icons

¿Cuáles son las dimensiones correctas de píxeles para un ícono táctil de apple? (11)

Como parte de su Guía de contenido web de Safari, Apple tiene una página disponible públicamente llamada " Especificar un icono de página web para Web Clip " (se requiere Javascript) que cubre todas las resoluciones y su implementación.

Safari Web Content Guide (2012; por Apple Inc; PDF; 6,91 MB)

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

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

Hanselman comentarios de Hanselman y playgroundblues sugieren diferentes tamaños, incluidos 163x163 y 60x60.

¡El ícono apple.com de Apple es 129x129!

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

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)

Yo iría con el propio 129 * 129 de Apple

Desde el 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
El iPhone y el iPod touch permiten al usuario 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 al "favicon.ico" para los iconos del sitio.
Para anular el icono de 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 de marcador deben ser 57x57 píxeles. Si el icono tiene un tamaño diferente, se escalará y recortará para que se ajuste.
Safari compondrá automáticamente el ícono con la superposición "vidriosa" estándar para que parezca una aplicación integrada para iPhone o iPod.

El enlace de NilObject me llevó a la gran publicación de blog Catchup on your Icon en makentosh.com

... Por supuesto, toda esta inconsistencia tuvo que ser tratada eventualmente, ¿verdad? ¡Bien 2.0 lo solucionó de manera elegante! Finalmente 57x57 en realidad significaba 57x57.
... cada píxel ... renderizado perfectamente.

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

No creo que haya un "tamaño correcto". Como el iPhone realmente ejecuta OSX, el sistema de representació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 reducirá la escala de manera muy limpia. Mi sitio utiliza un 158x158 y el icono se ve perfecto en píxeles en la pantalla del iPhone.

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

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

CÓMO: iPhone Webclip Icons (enero de 2008; por Dan Dickinson)

Parece que las pautas de Apple a partir del 3 de agosto de 2010 ahora incluyen las imágenes de "Alta resolución" (para iPhone 4) en los tamaños de íconos "requeridos".

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

Consulte las Pautas de creación de imágenes y iconos personalizados (se requiere Javascript) que forma parte de un documento completo:

Pautas de la interfaz humana de iOS (2013; por Apple Inc; PDF; 26,3 MB)

Ya no tiene que molestarse por el tamaño correcto. Si tiene su archivo de arte de iTunes (es decir, un archivo de tamaño 1024 * 1024) de su icono, entonces he creado esta aplicación que le proporcionará todos los iconos en función de la información proporcionada here . Obtenga la aplicación desde aquí y siga las instrucciones en el archivo Léame para crear todos los íconos necesarios para la aplicación iOS.

developer.apple.com/library/ios/documentation/AppleApplications/… especifican nuevos tamaños para iOS7:

60x60
76x76
120x120
152x152

Mientras que los tamaños anteriores para iOS6 y anteriores son:

57x57
72x72
114x114
144x144

Por cierto, los iconos precompuestos están en desuso.

Como consecuencia, para admitir dispositivos nuevos (con iOS7) y anteriores (iOS6 y anteriores), estas 8 imágenes deben estar presentes y el código genérico es:

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

Es posible que desee saber que este generador de favicones puede generar todas estas imágenes a la vez. Divulgación completa: soy el autor de este sitio.

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