Vemos como configurar un sitio web para proveer el icono de acceso directo a la web en un iOS, el denominado Apple Touch Icon.
Algunos sitios web, no obstante, cuando se colocan como accesos directos entre los iconos de iOS, sí que ofrecen una imagen diferenciada. En consecuencia, hemos investigado un poco para saber cómo podíamos crear nosotros mismos nuestro propio icono personalizado, en vez de dejar al propio sistema generarlo automáticamente a partir de la captura de pantalla. ¡Hemos dado con la solución que os pasamos a comentar!
Creación del icono en formato Apple Touch Icon
Para empezar tenemos que crear un icono que se adapte a los estándares de Apple, es decir:- Tamaño: 144x144 u 72x72 para iPad y 57x57 para iPhone
- Formato: siempre "PNG"
A la hora de crear tu icono puedes utilizar la técnica que desees, pero ten en cuenta una cosa: no hace falta redondear las esquinas, pues los propios dispositivos Apple lo hacen al mostrar el icono que hemos subido a nuestra web.
Código HTML para asociar el icono
Lo más sencillo para que funcione nuestro icono es añadir la imagen a la raíz de nuestra web con el siguiente nombre:apple-touch-icon.png
Tan sólo con esto, podremos ver nuestro icono en los dispositivos Apple. Pero esto nos plantea algunos problemas...
- ¿Y si no queremos o no podemos tener la imagen en la raíz?
- ¿Y si queremos dar unos toques especiales a nuestro icono?
- ¿Y si queremos tener un icono diferente para Ipad y otro para Iphone?
Para el problema de la ubicación del archivo, obtenemos la solución añadiendo una linea de código en nuestro HTML. En concreto, dicho código tiene que estar entre las etiquetas HEAD de la siguiente manera:
<head>
<link rel="apple-touch-icon" href="ruta/apple-touch-icon.png">
</head>
Si lo que queremos es dar aspectos distintos a nuestro botón podemos utilizar el código anterior o bien podemos crear nuestro icono y guardarlo con el siguiente nombre:
apple-touch-icon-precomposed.png
Añadiendo esta imagen a nuestra raíz del dominio no hace falta crear nada de código HTML.
Por último, vamos a ver qué podemos hacer para tener un icono distinto para cada dispositivo. Es muy simple, añadiremos tantas lineas del código como imágenes distintas tengamos, es decir, si tenemos dos iconos distintos, uno para iPhone y otro para iPad, el código sería el siguiente:
<head>
<link rel="apple-touch-icon" sizes="57x57" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-ipad.png" />
</head>
Con esto espero que queden resueltas las dudas respecto al icono de acceso directo en los dispositivos Apple.
Generar un icono a un sitio web desde un iPhone o iPad
Si eres usuario de dispositivos Apple y no sabías que podías crear iconos de sitios web entre los iconos de tus aplicaciones, ahora vamos a mencionar cómo añadirlos a nuestro dispositivo desde el navegador Safari.Lo primero que tenemos que hacer es abrir la página web, a continuación pulsamos el botón de acción y se nos abre una pantalla en la que tenemos que seleccionar la opción de "Añadir a pantalla de inicio".
Al realizar dicha acción nos aparecerá automáticamente el icono que tengamos subido a nuestra web.
En otro artículo veremos cómo añadir una imagen de inicio para mostrar cuando la web no esté en línea y cómo personalizar la barra de estado para nuestra web.