Pregunta

No estoy seguro de qué tamaño es el correcto debería ser.

Muchos sitios parece repetir que el de apple-touch-icon debe ser 57x57 píxeles, pero por citar un enlace roto como su fuente.

Hanselman's y playgroundblues's comentarios sugieren diferentes tamaños, incluyendo 163x163 y 60x60.

La propia Apple apple.com icono es 129x129!

Ver a mi pregunta relacionada con:¿Cómo puedo dar a mis sitios web un icono para el iPhone?

¿Fue útil?

Solución

Parece que Apple directrices de 3 de agosto de 2010 incluyen ahora la "Alta resolución" de las imágenes (para el iPhone 4) en su "requerido", el tamaño de los iconos.

Parece que necesita proporcionar un 57x57 y un 114x114 imagen, así como un 640x960 título de la imagen.

Ver Icono personalizado y Creación de la Imagen de las Directrices de (Requiere Javascript), el cual es parte de todo el documento:

Otros consejos

Desde la caché de Google de Apple Developer Connection - Aplicaciones Web Del Centro De Desarrollo - Diseño De Contenido...

Crear un Clip Web Icono del Marcador

el iPhone y el iPod touch permite a un usuario guardar un Clip Web marcador a su sitio en su Pantalla de Inicio.

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

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

El icono del marcador dimensiones deben ser 57x57 píxeles.Si el icono es un diferente tamaño será la escala y la recortada para que se ajuste.

Safari automáticamente compuesto el icono con el estándar de "vidrioso" superposición de por lo que se ve como un built-in el iPhone o el iPod de la aplicación.

Depende de la cantidad de detalle que se desea, es necesario disponer de la relación de aspecto de 1:1 (básicamente - debe ser cuadrada)

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

No puedo citar la fuente para los tamaños porque la referencia oficial es bajo candado y llave de ADC.

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

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

El oficial es el tamaño de 57x57.Yo recomiendo usar el tamaño exacto, simplemente por el hecho de que se necesita menos memoria cuando se carga (a menos que Apple almacena en caché de la escala de representación).Con eso dicho, Rex está a la derecha que cualquier cuadrado tamaño funcionará

Apple especificaciones especificar nuevos tamaños de iOS7:

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

Mientras que el viejo tamaños para iOS6 y antes son:

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

Por el camino, ya que los iconos son obsoletas.

Como consecuencia, el apoyo, pero los nuevos dispositivos (que se ejecuta iOS7) y mayores (iOS6 y antes), estas 8 imágenes debe estar presente 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, usted debe crear una 152x152 imagen con nombre apple-touch-icon.png.

Tal vez le interese saber que este generador de favicon puede generar todas estas imágenes a la vez.La divulgación completa:Soy el autor de este sitio.

Creo que no hay un "tamaño correcto".Desde que el iPhone es realmente ejecutan OS x, el icono del sistema de representación es bastante robusto.Mientras usted le da una imagen de alta calidad con el derecho de la relación de aspecto y resolución de al menos tan alto como el resultado real será, el sistema operativo de convertir muy limpia.Mi sitio utiliza un 158x158 y el icono se ve perfecta de píxeles en la pantalla del iPhone.

NilObject link me llevó a la gran blog Catchup en su Icono en makentosh.com

...Por supuesto, toda esta incoherencia tuvo que ser tratado finalmente, a la derecha?Así 2.0 abordado en bellas la moda!Finalmente 57x57 que realmente significa 57x57.

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

Usted no tiene que preocuparse por tamaño correcto de más.Si tienes itunes archivo de arte (es decir,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 de aquí, y siga las instrucciones en el archivo léame para crear todos los iconos necesarios para la aplicación de iOS.

Lista actualizada de octubre de 2014, iOS8

Lista para el iPhone y el 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 el Iphone 6 plus

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

El Iphone 6 se utiliza el mismo 120 x 120 px imagen como el iphone 4 y el 5 el resto es el mismo como para iOS 7

Actualización 2013 iOS7:

Para iOS 7 las soluciones recomendadas cambiado:

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

La otra resolución de la misma

  • 57 x 57 px defecto
  • 76 x 76 px para iPads sin retina
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top