El Apple Touch Icon ¿que es? y como añadir uno a nuestra web

Desde hace algún tiempo Apple permite que en iOs podamos crear accesos directos a algunas páginas web como si se tratase de iconos de apps. Para ello, desde el navegador Safari podemos elegir la opción «Añadir a pantalla de inicio» (que está disponible desde el mismo boton con el que podemos guardar una página en favoritos, el llamado «Boton de acción»). Al hacerlo, por defecto se crea una imagen con una pequeña captura de la página en cuestión. No obstante si queremos definir un icono propio en lugar de hacer uso de esa captura, podemos definir el llamado Apple Touch Icon.

¿Y como lo hacemos? Lo primero de todo es crear el icono, el cual debe cumplir las siguientes condiciones impuestas por Apple: debe estar en formato PNG y debe tener una resolución adecuada al dispositivo (144×144 pixeles o 72×72 pixeles para los iPad y 57×57 pixeles en el caso del iPhone). Si el icono lo tenemos almacenado en la raiz de nuestro sitio web con el siguiente nombre: apple-touch-icon.png todo debería funcionar de forma automática. Pero lo más fácil es que por tener todo mejor organizado en nuestro servidor este icono no se pueda encontrar en la raiz, con lo cual tendremos que añadir algo de código a la cabecera <head></head> de nuestra página. El código sería como sigue:

<head>
<link rel=»apple-touch-icon» href=»ruta_donde_esta_el_icono/apple-touch-icon.png»>
</head>

Y si además, queremos usar un icono distinto en iPhone y iPad, escribiremos el siguiente código:

<head>
<link rel=»apple-touch-icon» sizes=»57×57″ href=»ruta_donde_esta_el_icono/touch-icon-iphone.png» />
<link rel=»apple-touch-icon» sizes=»114×114″ href=»ruta_donde_esta_el_icono/touch-icon-ipad.png» />
</head>

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.