Hola, somos Arume

Desarrollamos páginas web, aplicaciones para móviles, capas de realidad aumentada y aplicaciones para Facebook. Nos apasiona la informática y somos unos perfeccionistas incurables; por eso en nuestros proyectos utilizamos estándares.

tel. 625 519 694

Mendaña de Neyra, 34, 3º B, 15008, A Coruña

Autenticarse

Registrarse. ¿Has olvidado tu contraseña?

Etiquetas

Saltar las etiquetas

Suscríbete a las RSS

Estás en:

  • Inicio >
  • Blog >
  • Apple Touch Icon: favicon o icono de WebApp en iOS

Apple Touch Icon: favicon o icono de WebApp en iOS

11 Oct 2012 por Cruz

Comentarios: 1

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" />

Comentarios

1 comentarios. Comentar.

1. javio el 05 Nov 2012 a las 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.

Comentar

Comentar de forma anónima

Puedes comentar poniendo cualquier nombre o apodo, exceptuando los nombres de usuarios registrados. Máximo de 50 caracteres.

Comentar como usuario registrado

Registrarse. ¿Has olvidado tu contraseña?