Icono de Apple Touch para sitios web

83

Hasta ahora, he incluido la línea para el ícono de Apple Touch en mi cabeza así:

<link rel="apple-touch-icon" href="https://stackoverflow.com/apple-touch-icon.png">

Sin embargo, en la sección de preguntas y respuestas "¿Cuáles son las dimensiones de píxeles correctas para un ícono táctil de manzana?" En la respuesta aceptada se indica que ahora se necesitan tres imágenes de acuerdo con las pautas de Apple.

Entonces, ¿cómo haría uno para insertarlos en la sección principal del código?

html mobile apple-touch-icon J82
fuente

Respuestas:

88

Solución minimalista - Recomendada

Una práctica común es crear un solo ícono de 180x180, que es la resolución más alta esperada, y dejar que los dispositivos iOS lo reduzcan según sea necesario. Se declara con:

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

Solución exhaustiva - No recomendado

Las especificaciones de Apple especifican nuevos tamaños para iOS7:

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

Y también para iOS8 :

  • 180x180

Además, los iconos precompuestos están obsoletos.

Como consecuencia, para admitir dispositivos nuevos (con iOS7) y más antiguos (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, debes 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 cosas interesantes en el código HTML (un poco como lo que está haciendo IE /favicon.ico). Por lo tanto, es importante mantener los nombres de los archivos que aparecen 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 favicon puede crear todas estas imágenes a la vez. Divulgación completa: soy el autor de este sitio.

philippe_b
fuente
2
¿Se <link>descargan todos los archivos de cada etiqueta si no están en la caché del cliente? Independientemente de dónde se solicite la página (teléfono, tableta, pc, windows, android ...)? Estoy un poco preocupado por las implicaciones del rendimiento ...
RayOnAir
1
A partir de iOS8, también existe la nueva resolución de 180x180. En realidad, tampoco tiene que vincular los iconos desde HTML, a menos que desee iconos específicos para una sola página en particular. Apple tiene la lista reciente de los tamaños que les gustan: developer.apple.com/library/ios/documentation/UserExperience/… . Busque la entrada "Icono de clip web" en la tabla.
qingu
1
Agregar tantos datos en el encabezado de cada página me parece innecesario: si el ícono no es enorme en la versión de 180x180 (el mío suele estar entre 2kb y 5kb), entonces solo tenerlo <link rel="apple-touch-icon" href="https://stackoverflow.com/apple-touch-icon.png" type="image/png" />es suficiente. E incluso si crea imágenes de diferentes tamaños, por lo que puedo decir, puede eliminar todos los enlaces de Apple-Touch-Icon e iOS buscará los archivos en sí, comenzando con el tamaño preferido (como Apple-Touch-Icon-180x180. png) y usando apple-touch-icon.png si no se encuentran otros archivos.
iquito
1
@iquito Así es, puedes usar totalmente solo una declaración. Como fundador de RealFaviconGenerator, estoy trabajando en esta solución única para todos. Hay una trampa posible, aunque iOS hace un buen trabajo: iOS usa un algoritmo similar a Mitchell para reducir los iconos. Dependiendo de su diseño específico, es posible que eso no sea lo que desea. Actualizaré mi respuesta una vez que tenga más comentarios sobre esto.
philippe_b
2
RealFaviconGenerator es realmente genial, por cierto, lo único que pensé que podría ser mejor fueron los muchos enlaces de encabezado que no son estrictamente necesarios, tanto al generar nuevos favicons como al comprobar el rendimiento de un sitio web. Tal vez como una mejora adicional, el sitio web podría mostrar diferentes posibilidades: qué partes son estrictamente beneficiosas (y qué hacen / más explicación), y qué partes pueden omitirse y generalmente son detectadas automáticamente por el navegador (hasta donde yo sé, iOS también busca los tamaños específicos en el directorio raíz si la página no tiene información sobre apple-touch-icon).
iquito
70

Aquí tienes, espero que esto te ayude.

Si desea que Apple haga la parte estética por usted (agregue el brillo), entonces pondría esto en las <head>etiquetas:

<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, de modo que Apple la muestre sin el brillo, entonces haría 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 en el ejemplo, el iPad con pantalla retina necesita un ícono de 144x144px, el iPhone 4 / 4S / 5 necesita un ícono de 114x114px, el iPad original (y iPad 2, como el la resolución de la pantalla no es diferente) necesita un ícono de 72x72px, y el iPhone original no necesita una especificación de tamaño, pero para su referencia es 57x57px.

Charles Cooke
fuente
¿Por qué precompuesto significa sin brillo? No puedo hacer la definición de trasluchada precompuesta con "sin brillo". Y no, no estoy siendo sarcástico, realmente quiero saber.
boatcoder
@ Mark0978 Lo leí en el sentido de: "ya está compuesto, es decir," estilo iOS "(por ti), por lo que iOS no se mete con él (excepto para redondear las esquinas)"
Michael Haren
5
Esto está desactualizado a partir de iOS 7.
bjb568
¿Es posible tener solo una imagen y dejar que Apple cambie su tamaño automáticamente en su extremo?
Aaron Franke
12

Dado que algunas de estas respuestas ya están desactualizadas, recomiendo usar http://realfavicongenerator.net/ para generar todas las imágenes y el marcado; dono un par de euros cada vez que lo uso con la esperanza de que les permita conservar actualizado en cuanto a lo que es válido actualmente en iOS, Android y Windows, por lo que no tengo que hacerlo.

Tim Iles
fuente
3
(Me acabo de dar cuenta de que una de las otras respuestas aquí es del autor de realfavicongenerator.net; ¡vote a favor su respuesta en lugar de la mía!)
Tim Iles
3
Apoye a este desarrollador, porque este sitio es perfecto
whiteshooz
Tim + @whiteshooz: ¡Gracias por su apoyo! (sí, noto sus comentarios en este momento)
philippe_b
7

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

El título de la aplicación reemplazará el título de su sitio web. Por lo general, querrás eso. La imagen de inicio es lo que aparecerá mientras se inicia la aplicación.

Pedro Ferrari
fuente
6

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 el enlace de la página web a la pantalla de inicio. Estos enlaces, representados por un icono, se denominan Clips web. 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 de documentos raíz llamada apple-touch-icon.png

Para especificar un icono para una sola página web o reemplazar el icono del sitio web con 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 su nombre de archivo de icono. Para especificar varios iconos para diferentes resoluciones de dispositivo, por ejemplo, admitir dispositivos iPhone y iPad, agregue un atributo de tamaño 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 tiene el tamaño más apropiado para el dispositivo. Si no se establece ningún atributo de tamaños, el tamaño predeterminado del elemento 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 más grande que el tamaño recomendado. Si no hay iconos más grandes que el tamaño recomendado, se utiliza el icono más grande.

Si no se especifican iconos mediante un elemento de enlace, se buscan iconos en el directorio raíz del sitio web con el prefijo apple-touch-icon ... Por ejemplo, si el tamaño de icono apropiado para el dispositivo es 60 x 60, el sistema busca nombres de archivo en el siguiente orden:

apple-touch-icon-76x76.png

apple-touch-icon.png

Consulte Tamaños de iconos e imágenes para conocer las métricas de iconos de páginas web.

Nota : Safari en iOS 7 no agrega efectos a los íconos. Las versiones anteriores de Safari no agregarán efectos a los archivos de íconos nombrados con el sufijo -precomposed.png. Consulte Primeros pasos: identificación de su aplicación en iTunes Connect para obtener más detalles.

Fuente: especificaciones del icono táctil de Apple


fuente
hola, ¿sabes de dónde puedo descargar esas imágenes de icono png?
BKSpurgeon
2

Nunca he leído ninguna especificación de Apple, debo admitir, pero según los registros de mi sitio, estas imágenes son necesarias 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
Tomáš Zato - Reincorporar a Monica
fuente
2

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">
Pinal
fuente