2011-02-16 15 views
5

en los iPhone de Apple y el iPod Touch, se especifica un vínculo a un archivo de icono, así:Apple iPhone/iPod Touch Web Clip tamaño de los iconos

<link rel="apple-touch-icon" href="/apple-touch-icon.png"> 

... pero en this page, se recomienda que especifique dos diferentes tamaños de icono, uno para iPhone < 4 y otro para iPhone 4.

No hay documentación que pueda encontrar que muestre cómo especificar los dos iconos separados. ¿Alguien puede ayudar?

Respuesta

14

Hay mucha documentación sobre esto en Google.

Sólo tiene que utilizar:

<!-- **normal** (iPhone/iPod **non retina** display) --> 
<link rel="apple-touch-icon" href="apple-touch-icon.png"/> 

<!-- **normal** (iPhone/iPod **retina** display) --> 
<link rel="apple-touch-icon" href="apple-touch-icon-72.png" sizes="72x72"/> 

<!-- and **iPad** version --> 
<link rel="apple-touch-icon" href="apple-touch-icon-114.png" sizes="114x114"/> 

Como información adicional, puede hacer que el icono sin el efecto de brillo si se utiliza en lugar de apple-touch-icon-precomposedapple-touch-icon.

y hay varias etiquetas se pueden utilizar con el fin de tener todas las características de Safari móvil como la pantalla de bienvenida, etc

también, dar this Mobile Tuts article una lectura y sabrá casi todo lo que necesita tener una aplicación web brillante

+2

Gracias por la respuesta, no sabía sobre el atributo 'tamaños'. Google tiene otro buen recurso para buscar ahora. Aunque creo que el iPad debería ser de 72 x 72 y la pantalla de "Retina" debería ser de 114 x 114, a juzgar por la documentación publicada en mi pregunta. –

+0

gracias - Sabía que necesitaría esto pronto. –

+0

agregó el enlace de Mobile Tuts con muchas más etiquetas que ustedes pueden usar en webapps – balexandre

Cuestiones relacionadas