precomposed - apple touch icon html
Ícono de Apple Touch para sitios web (8)
Hasta ahora, he incluido la línea del icono de Apple Touch en mi cabeza de esta manera:
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
Sin embargo, en las preguntas y respuestas "¿Cuáles son las dimensiones de píxel correctas para un icono de toque de manzana?" se afirma en la respuesta aceptada que ahora se necesitan tres imágenes según las pautas de Apple.
Entonces, ¿cómo podría uno insertar estos en la sección de la cabeza del código?
A partir de 2018, el sitio web de desarrolladores de Apple recomienda lo siguiente para dispositivos iOS:
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-retina.png">
<link rel="apple-touch-startup-image" href="/launch.png">
<meta name="apple-mobile-web-app-title" content="AppTitle">
Título de la aplicación reemplazará el título de su sitio web. Usualmente, querrías eso. Imagen de inicio es lo que aparecerá mientras se inicia la aplicación.
Aquí tienes, espero que esto ayude.
Si quiere que Apple le haga un poco de estética (agregue el brillo), debe ponerlos en las etiquetas <head> :
<link rel="apple-touch-icon" href="apple-touch-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-iphone4.png" />
<link rel="apple-touch-icon" sizes="144x144" href="apple-touch-ipad-retina.png" />
Si desea precomponer la imagen, para que Apple la muestre sin brillo, debe hacer esto:
<link rel="apple-touch-icon-precomposed" href="apple-touch-iphone.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-ipad.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-iphone4.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-ipad-retina.png" />
Siempre que incluya más de uno, el dispositivo iOS buscará el tamaño correcto y utilizará esa imagen automáticamente. Como puede ver en los nombres de las imágenes del ejemplo, el iPad con pantalla retina necesita un icono que es 144x144px, el iPhone 4 / 4S / 5 necesita un ícono que es 114x114px, el iPad original (y el iPad 2, como el la resolución de la pantalla no es diferente) necesita un icono que es 72x72px, y el iPhone original no necesita una especificación de tamaño, pero para su referencia es 57x57px.
Dado que algunas de estas respuestas ya están desactualizadas, recomiendo usar http://realfavicongenerator.net/ para generar todas las imágenes y el marcado: doné un par de euros cada vez que lo uso con la esperanza de que les permita mantener actualizado sobre lo que es actualmente válido en iOS, Android y Windows, así que no es necesario.
Desde mi solicitud de extracción a https://github.com/h5bp/mobile-boilerplate (con iconos de iPhone 6):
<!-- iPad and iPad mini (with @2× display) iOS ≥ 8 -->
<link rel="apple-touch-icon-precomposed" sizes="180x180" href="img/touch/apple-touch-icon-180x180-precomposed.png">
<!-- iPad 3+ (with @2× display) iOS ≥ 7 -->
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="img/touch/apple-touch-icon-152x152-precomposed.png">
<!-- iPad (with @2× display) iOS ≤ 6 -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/touch/apple-touch-icon-144x144-precomposed.png">
<!-- iPhone (with @2× and @3 display) iOS ≥ 7 -->
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="img/touch/apple-touch-icon-120x120-precomposed.png">
<!-- iPhone (with @2× display) iOS ≤ 6 -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/touch/apple-touch-icon-114x114-precomposed.png">
<!-- iPad mini and the first- and second-generation iPad (@1× display) on iOS ≥ 7 -->
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="img/touch/apple-touch-icon-76x76-precomposed.png">
<!-- iPad mini and the first- and second-generation iPad (@1× display) on iOS ≤ 6 -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/touch/apple-touch-icon-72x72-precomposed.png">
<!-- Android Stock Browser and non-Retina iPhone and iPod Touch -->
<link rel="apple-touch-icon-precomposed" href="img/touch/apple-touch-icon-57x57-precomposed.png">
<!-- Fallback for everything else -->
<link rel="shortcut icon" href="img/touch/apple-touch-icon.png">
<!--
Chrome 31+ has home screen icon 192×192 (the recommended size for multiple resolutions).
If it’s not defined on that size it will take 128×128.
-->
<link rel="icon" sizes="192x192" href="img/touch/touch-icon-192x192.png">
<link rel="icon" sizes="128x128" href="img/touch/touch-icon-128x128.png">
<!-- Tile icon for Win8 (144x144 + tile color) -->
<meta name="msapplication-TileImage" content="img/touch/apple-touch-icon-144x144-precomposed.png">
<meta name="msapplication-TileColor" content="#222222">
Nunca he leído ninguna especificación de Apple, debo admitir, pero de acuerdo con los registros en mi sitio, estas imágenes se requieren en la raíz:
apple-touch-icon-72x72.png
apple-touch-icon-76x76.png
apple-touch-icon-120x120.png
apple-touch-icon-152x152.png
apple-touch-icon-72x72-precomposed.png
apple-touch-icon-76x76-precomposed.png
apple-touch-icon-120x120-precomposed.png
apple-touch-icon-152x152-precomposed.png
Las especificaciones de Apple especifican nuevos tamaños para iOS7:
- 60x60
- 76x76
- 120x120
- 152x152
- 180x180
Además, los iconos precompuestos están en desuso.
Como consecuencia, para admitir nuevos dispositivos (con iOS7) y anteriores (iOS6 y anteriores), 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">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
Además, debe crear una imagen de 180x180 llamada apple-touch-icon.png .
Tenga en cuenta que iOS busca URL como /apple-touch-icon-76x76.png , si no encuentra elementos interesantes en el código HTML (un poco como lo que IE está haciendo con /favicon.ico ). Por lo tanto, es importante mantener los nombres de los archivos que están arriba. También es importante tener en cuenta que Android / Chrome también está usando estas imágenes .
Es posible que desee saber que este generador de favicones puede crear todas estas imágenes a la vez. Divulgación completa: soy el autor de este sitio.
Especificación de un icono de página web para Web Clip
Es posible que desee que los usuarios puedan agregar su aplicación web o enlace de página web a la pantalla de inicio. Estos enlaces, representados por un ícono, se llaman Web Clips. Siga estos sencillos pasos para especificar un icono que represente su aplicación web o página web en iOS.
Para especificar un icono para todo el sitio web (cada página del sitio web), coloque un archivo de icono en formato PNG en la carpeta del documento raíz llamada apple-touch-icon.png
Para especificar un icono para una página web individual o reemplazar el icono del sitio web por un icono específico de la página web, agregue un elemento de enlace a la página web, como en:
<link rel="apple-touch-icon" href="/custom_icon.png">
En el ejemplo anterior, reemplace custom_icon.png con el nombre de archivo de su icono. Para especificar múltiples iconos para diferentes resoluciones de dispositivos, por ejemplo, admitir dispositivos iPhone y iPad, agregue un atributo de tamaños a cada elemento de enlace de la siguiente manera:
<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">
Se utiliza el icono que es el tamaño más apropiado para el dispositivo. Si no se establece ningún atributo de tamaño, el tamaño del elemento predeterminado es 60 x 60. Si no hay un icono que coincida con el tamaño recomendado para el dispositivo, se utiliza el icono más pequeño que sea más grande que el tamaño recomendado. Si no hay iconos más grandes que el tamaño recomendado, se utiliza el ícono más grande.
Si no se especifican iconos con un elemento de enlace, se buscan en el directorio raíz del sitio web los íconos Apple-touch-icon ... prefix. Por ejemplo, si el tamaño de icono apropiado para el dispositivo es de 60 x 60, el sistema busca los nombres de los archivos en el siguiente orden:
apple-touch-icon-76x76.png
apple-touch-icon.png
Consulte Íconos e Índices de imagen para métricas de íconos de página web.
Nota : Safari en iOS 7 no agrega efectos a los iconos. Las versiones anteriores de Safari no agregarán efectos para los archivos de iconos nombrados con el sufijo -precomposed.png. Vea los primeros pasos: identificación de su aplicación en iTunes Connect para más detalles.