¿Cuáles son las dimensiones de píxel correctas para un apple-touch-icon?

Desde la caché de Google de Apple Developer Connection - Web Apps Dev Center - Designing Content...

Crear un Icono de Marcador de Clip Web

El iPhone y el iPod touch permiten al usuario guardar un marcador de clip web en su sitio en su Pantalla de Inicio.

Para especificar un icono de marcador para todos páginas de un sitio web, colocar una imagen PNG llamado " apple-touch-icon.png " en el directorio raíz de su servidor web - similar al " favicon.ico" para sitio iconos.

Para anular el icono de marcador del sitio en una página web específica, inserte un elemento similar a dentro de la elemento de la página.

Las dimensiones del icono de marcador deben ser de 57x57 píxeles. Si el icono es un diferente tamaño se escalará y recortado para encajar.

Safari se compondrá automáticamente el icono con el estándar " glassy" superposición por lo que parece un built-in Aplicación para iPhone o iPod.

Depende de cuánto detalle quieras que tenga, necesita tener la relación de aspecto de 1:1 (básicamente - necesita ser cuadrado)

Yo iría con la propia Manzana 129 * 129

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

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

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

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

• Guía de contenido web de Safari (2012; por Apple Inc; PDF; 6,91 MB)

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

Especificaciones de Apple especificar nuevos tamaños para iOS7:

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

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

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

Por cierto, los iconos precompuestos están obsoletos.

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

<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, 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. Revelación completa: Soy el autor de este sitio.

No creo que haya un "tamaño correcto". Dado que el iPhone realmente está ejecutando OSX, el sistema de representación de iconos es bastante robusto. Siempre que le dé 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 forma muy limpia. Mi sitio utiliza un 158x158 y el icono se ve pixel-perfecto en la pantalla del iPhone.

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

... Por supuesto, toda esta inconsistencia tuvo que ser tratado con el tiempo, ¿verdad? Bueno 2.0 se ocupó de ella en fin la moda! Finalmente 57x57 realmente significaba 57x57.

...todos y cada píxel ... renderizar perfectamente.

Ya no tiene que preocuparse por el tamaño correcto. Si tiene un archivo itune artwork (es decir, un archivo de tamaño 1024 * 1024) de su icono, entonces he creado esta aplicación que le proporcionará todos los iconos basados en la información proporcionada aquí. Obtenga la aplicación desde aquí, y siga las instrucciones en el archivo readme para crear todos los iconos necesarios para la aplicación iOS.

Lista actualizada octubre 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"> 

Iphone 6 utiliza 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

Las otras resoluciones siguen siendo las mismas

• 57 x 57 px por defecto
• 76 x 76 px para iPads sin retina