Cómo habilitar los "Touch Icons" en tu web

¿Tienes una página web adaptada para móviles? Si es así, ¿has incluido en ella los "Touch Icons"? Si aún no lo has hecho, aquí veremos cómo hacerlo fácilmente.

Pero, ¿qué son los "Touch Icons"?

Para que todos nos entendamos, los "touch icons" son el equivalente al favicon pero para los smartphones o tablets, o visto de otra forma, los "touch icons" son iconos usadas por las aplicaciones móviles, como los navegadores web, que permiten asociar una página web con una imagen.

Pero, ¿para qué incluir un "touch icon" en mi web? Imagina que un visitante accede a tu web y desea almacenarla en su lista de marcadores dentro de su navegador, o mejor aún, decide crear un acceso directo a tu web en el escritorio de su teléfono móvil; pues el icono que se mostrará en este tipo de situaciones será el "touch icon", no el favicon como podría imaginarse.

¿Qué tamaños tienen los "Touch Icons"?

Debido a la diversidad de terminales que existen hoy día en el mercado y la variedad de resoluciones que eso produce, los principales sistemas operativos han creado una tabla en la que en función de la resolución del dispositivo será necesario disponer de iconos de un tamaño u otro. A día de hoy, es necesario disponer de los "touch icons" en las siguientes resoluciones (realmente son más las resoluciones necesarias, pero con esto se cubre la gran mayoría de los casos necesarios):

57x57 px: Usado por iPhone (no Retina), iPod y Android 2.1.
72x72 px: Usado por iPad Mini y iPad (no Retina) de versiones anteriores de iOS7.
76x76 px: Usado por iPad2 y iPad Mini (no Retina) en iOS7 o versiones posteriores.
114x114 px: Usado por iPhone (Retina) en versiones anteriores de iOS7.
120x120 px: Usado por iPhone (Retina) en iOS7 o versiones posteriores.
144x144 px: Usado por iPad (Retina) en versiones anteriores de iOS7.
152x152 px: Usado por iPad (Retina) en iOS7 o versiones posteriores.
180x180 px: Usado por iPhone 6 Plus.
192x192 px: Usado por Android.

Aquí puedes encontrar un desglose de todos los tamaños de "touch icons" necesarios para iOS y para Android.

Pero...¿qué resolución debo usar en cada momento? He aquí la mejor parte...todas, el navegador web o la aplicación utilizará el icono que necesite en cada momento, por lo que lo único que debes hacer es ofrecer todos los iconos en tu web y dejar que sea la aplicación que los necesite la que decida cual usar.

Como norma general, los dispositivos que utilicen estos "touch icons" deben buscar de entre todos los disponibles el icono que se ajuste exactamente a sus necesidades, en caso de no encontrarlo deben usar el de tamaño superior más próximo. En caso de que la resolución buscada sea superior a las ofrecidas, tomarán la versión de mayor resolución, en nuestro caso la de 192x192.

¿Cómo incluir los "touch icons" en mi web?

Por fin llegamos a la parte de código, en este caso un pequeño fragmente de código HTML. El primer paso será subir a tu servidor web los iconos con las múltiples resoluciones. Se recomienda usar la siguiente nomenclatura para los archivos:

apple-touch-icon-[ancho]x[alto]-precomposed.png para los iconos de entre 72 y 180 px de ancho. Ej: apple-touch-icon-180x180-precomposed.png
touch-icon-192x192.png para el icono de 192x192px.
apple-touch-icon-precomposed.png para el icono de 57x57px.

Una vez subidos a tu web los archivos, por cada archivo debes incluir la sección "head" de tu código HTML un nodo tipo "link" con el atributo 'rel="apple-touch-icon-precomposed"' de la siguiente forma:

Esto debes aplicarlo a todos los iconos salvo el icono de 57x57 en el cual no hay que incluir el atributo "sizes", y para el icono de tamaño 192x192, el cual el atributo rel es "icon", quedando el código HTML completo para todos los iconos de la siguiente forma:

Tal vez te preguntes que ¿qué es eso de "precomposed"? En versiones anteriores de iOS, el sistema operativo creaba unos efectos de brillo a los "touch icons", el cual se desactiva añadiendo el prefijo "precomposed" al archivo y al atributo "rel" del link a crear.

Por último, simplemente denotar que los "links" están ordenados incluyendo los iconos de mayor tamaño al inicio, y de menor tamaño al final. Esto es así para que en versiones anteriores de iOS4.2, los dispositivos no soportaban el atributo "sizes", lo que hace que se descargue el último icono incluido en el código, en nuestro caso el de menor tamaño, reduciendo el ancho de banda requerido.

Hasta aquí llegamos con los "touch icons", ahora no hay excusas para incluirlos en vuestra página web. ¿Lo habéis incluido ya?

Extra:

Dos aplicaciones online que os facilitarán la creación de estos "touch icons": Iconifier y Favicon Generator. Espero os sea de ayuda.

Programación y más

Pages