Cómo personalizar el Apple Touch Icon de tu sitio web

Cómo personalizar el Apple Touch Icon de tu sitio web

Compartir

Si eres de los que les gusta estar al día de todas las novedades de Apple, seguramente ya habrás añadido un acceso directo de iPadizate a la pantalla de inicio de tu iPhone, iPod Touch o iPad. Y si no, ¿a qué esperas?

Cómo personalizar el Favicon Apple Touch Icon

Se llama Apple Touch Icon y tú también puedes personalizarlo en los dispositivos Apple con iOS a partir de la versión 1.1.3.

Para empezar, crea un icono en formato PNG con una resolución mínima de 72dpi y diferentes dimensiones para cada dispositivo:

  • iPhone y iPod Touch: 57×57 píxeles
  • iPad: 72×72 píxeles
  • iPhone 4 y siguientes versiones: 114×114 píxeles

Para una configuración básica del Apple Touch Icon, subiremos el icono de 57×57 al directorio raíz del sitio web con el nombre apple-touch-icon.png.

iOS se encarga él solito de hacerle los bordes redondeados y añadirle el efecto brillo. A partir de iOS 2.0 podemos eliminar este brillo utilizando el nombre de archivo apple-touch-icon-precomposed.png.

En iOS 4.2 y versiones posteriores podremos optimizar la visualización en cada aparato según la resolución que hemos indicado para los diferentes dispositivos. En ese caso, en lugar de subir al directorio raíz un único archivo con el nombre apple-touch-icon.png, subiremos uno para cada resolución: apple-touch-icon-57x57.png, apple-touch-icon-72x72.png y apple-touch-icon-114x114.png.

Para eliminar el efecto brillo, añadimos la terminación -precomposed.png al nombre de archivo como explicado anteriormente.

Con este método no necesitamos tocar el código de la página, pero puede ser que los dispositivos Apple tarden demasiado en encontrar el icono y los usuarios pierdan la paciencia.

Para evitar este problemilla, podemos realizar una configuración más completa del Apple Touch Icon añadiendo unas pocas líneas de código en el <head> de nuestro site.

Para utilizar un único icono en todos los dispositivos, escribiremos: <link rel="apple-touch-icon" href="/nombre-icono.png"/ o <link rel="apple-touch-icon-precomposed" href="/nombre-icono.png"/> (sin brillos).

Para utilizar iconos personalizados para páginas diferentes, cambiaremos la ruta de la imagen en el atributo href correspondiente. Atentos aquí a la barra al inicio de /nombre-icono, que indica que el archivo se buscará en el directorio raíz del sitio web (si escribimos la ruta sin barra, el archivo se buscará en el directorio de la propia página).

Las líneas de código para definir diferentes Apple Touch Icon para iPhone, iPod Touch y iPad incluirán el atributo sizes:

<link rel="apple-touch-icon" href="/touch-icon-iphone.png" /> <link rel="apple-touch-icon" sizes="72x72" href="/touch-icon-ipad.png" /> <link rel="apple-touch-icon" sizes="114x114" href="/touch-icon-iphone4.png" />

Ahora todos tus lectores podrán añadir el icono personalizado de tu web a la pantalla de inicio de sus dispositivos iOS.

Comparte este artículo con tus amigos en las redes sociales más populares con los botones que encontrarás al principio del mismo. ¡Muchas gracias!