Configurar el Apple Touch Icon en tu sitio

  • Por
Vemos como configurar un sitio web para proveer el icono de acceso directo a la web en un iOS, el denominado Apple Touch Icon.
Este artículo surge debido a que en múltiples ocasiones, hemos creado accesos directos de una web desde nuestro iPhone/iPad y hemos visto que el icono que se crea por defecto es una pequeña imagen capturada de la web. Este icono no es feo del todo, ¡pero se puede mejorar!

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"
Una vez que tenemos esto claro, podemos utilizar cualquier programa de diseño para crearlo. Como es una imagen PNG, podrás utilizar casi cualquier editor gráfico del mercado.

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.

Referencia: En DesarrolloWeb.com tenemos diversos contenidos que explican como crear iconos o imágenes. Puedes ver los Talleres de Photoshop.

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?
Bien pues estos problemas los podemos resolver de la siguiente manera:

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>

Nota: Si añadimos este código debemos tener en cuenta que el dispositivo ya no nos redondea las esquinas ni da el aspecto de botón típico de Apple, que sí nos hacía si añadíamos únicamente la imagen a la raíz del dominio con el nombre apple-touch-icon.png.

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.

Autor

Sara Alvarez

Equipo DesarrolloWeb.com

Compartir

Comentarios

thechechbcn

30/8/2012
da igual las dimensiones
queria deciros que no tiene que ser del tamaño especificado
solo .png
aqui mi icono ios
http://www.hotimg.com/direct/EpqjHYa.png

la prueba en thechechbcn.com añadelo a tu pantalla de inicio y pruebalo

nadie lo ha escrito pero se ajusta perfectamente


aqui mi articulo añadido a mi blog
http://www.thechechbcn.com/2012/08/bueno-ya-tengo-imagen-en-app-para-ios.html