Ardilla Quio Ardilla Quio

11 de Octubre de 2012

Apple Touch Icon: favicon o icono de WebApp en iOS

En un artículo anterior vimos cómo crear los distintos iconos de nuestras aplicaciones para iOS. En este artículo explicaremos cómo crear un icono para añadir a la pantalla de inicio de un iPhone o iPad para una página web o una WebApp, sus distintos tamaños y con o sin efectos de sombras y brillos.

Dimensiones y formato del icono

Con una dimensión de 57x57 píxeles se mostrará correctamente en todos los dispositivos, pero lo ideal es aprovechar el máximo permitido para cada uno, así que podemos crear las siguientes imágenes:

  • iPhone: 57x57 píxeles
  • iPhone 4 alta resolución y posteriores: 114x114 píxeles
  • iPad: 72x72 píxeles

No es necesario que redondeemos las esquinas de nuestros iconos, ya que iOS hace ese trabajo por nosotros de forma automática.

La resolución debe ser de 72 dpi.

Nombre de la imagen y ubicación por defecto

Para mostrar nuestro icono, iOS busca y reconoce unas imágenes por defecto en el raíz de nuestra web. La forma más rápida y fácil de tener nuestro propio icono es crear esos ficheros. Si sólo tenemos un icono deberá llamarse apple-touch-icon.png. Si hemos hecho uno para cada dispositivo los nombres tienen que ser:

  • apple-touch-icon-57x57.png para el iPhone
  • apple-touch-icon-114x114.png para el iPhone 4 alta resolución y posteriores
  • apple-touch-icon-72x72.png para el iPad

Efectos de los iconos

Al hacer la imagen no necesitamos crear los efectos de sombras y brillos que tienen los nuevos iconos, ya que iOS lo hace por nosotros. Existe la posibilidad de decirle que no haga esos efectos y que muestre el icono como nosotros lo hemos creado (sin efectos o con los nuestros propios). Para ello deberemos modificar el nombre del fichero de esta forma:

  • apple-touch-icon-precomposed.png si sólo hacemos el icono por defecto
  • apple-touch-icon-57x57-precomposed.png para el iPhone
  • apple-touch-icon-114x114-precomposed.png para el iPhone 4 alta resolución y posteriores
  • apple-touch-icon-72x72-precomposed.png para el iPad

Mejorando el método

El método descrito es fácil y rápido de hacer, pero tiene el inconveniente de que es lento a la hora de mostrar nuestro icono, ya que iOS debe buscar entre todos los ficheros que haya en el raíz si alguno coincide con los nombres que él reconoce. Para acelerar esta búsqueda, podemos indicar en el código cuál es el nombre exacto del fichero que debe buscar. Además con este método podemos cambiar el nombre del fichero y la ubicación del mismo. Para ello debemos añadir en el <head> de nuestras páginas, la siguiente línea:

<link rel="apple-touch-icon" href="/nombre-del-icono.png" />

Si lo que queremos es el icono sin efectos:

<link rel="apple-touch-icon-precomposed" href="/nombre-del-icono.png" />

Y si queremos utilizar los iconos con las dimensiones específicas de cada dispositivo, debemos utilizar el atributo sizes.

Con efectos:

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

Sin efectos:

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

1 comentarios

javio

05/11/2012 10:13:58

Hello, this is a really fas­ci­nat­ing web blog and I have loved read­ing sev­eral of the arti­cles and posts con­tained upon the site, sus­tain the great work and hope to read a lot more excit­ing arti­cles in the time to come. Thank you so much.

Comentario anónimo
Comentar como usuario