Clic, Diseño y Desarrollo de sitios Web en México ::
  Vivir Guadalajara: Grand Prix International con Checo Pérez en Guadalajara

    Malagana en tu e-mail

Subscribe

Como agregar un icono de tu página web en el home para iPhone, iPad y iPod.

Hace algunos años, me rompí la cabeza para descubir la manera de colocar el famoso “favicon” en la barra de dirección de mis páginas web. Eso fué hace años y afortunadamente no me he quedado quedar atrás y me encanta seguir aprendiendo las novedades. Ahora se me ha ocurrido compartir la manera de colocar un ícono (o el mismo favicon) en la pantalla de inicio de los iPhones, iPads o iPod touch cuando los agregar como favoritos y la verdad es que es tan sencillo que cualquiera puede hacerlo.

Icono en el home de dispositivos Apple

La pantalla de incio o home de un iPhone

Haz el diseño!, finalmente es lo más importante!

1.- Lo primero que debes de hacer es crear la imagen del icono. Puedes realizar en cualquier editor de imagenes o vectores, la elección es tuya, pero eso si, debes de asegurarte de respetar fielmente las siguiente medidas:

  • iPhone Standard: 57×57px
  • iPad: 72×72px
  • iPhone 4: 114×114px

Yo lo realicé  en Fireworks ya que me encuentro en este momento realizando diseño web, pero como lo mencioné anteriomente la decisión es tuya.

Diseña la imagen que será tu icono

Diseña la imagen que será tu icono

 

Te sugiero utilices imagenes PNG (por aquella cuestión del alfa y las transparencias) y en modo en RGB. Mi recomendación es que exportes los tres formatos, así se podrá usar el icono en las resoluciones admitidas para cada dispositivo. No te preocupes por como elegirá el usuario el formato,  por default se añadirá a la página de inicio como se explicará más adelante. Algo fabuloso es que no tendrás que darle los acabados glossy y redondeados ya que el sistema lo hará por tí de manera automática.

2.- A continuación sube esos tres archivos a la carpeta raíz de tu web.

Agrégale nombre!

3.- Al subirlo, asegúrate de ponerle el nombre, es importante dada la importancia de saber qué hacen esas imagenes en la carpeta raíz de tu web. Yo elijo usar apple-touch-icon.png dado que lo describe  por sí mismo.

Si deseas nombrar cada icono para que luzca mejor en cada dispositivo (el cual sugiero firmemente) puedes hacerlo de esta manera:

  • apple-touch-icon-57x57.png (iPhone standar)
  • apple-touch-icon-72x72.png ( iPad)
  • apple-touch-icon-114x114.png (iPhone 4)

!Importante: No olvides subir estos 3 archivos a tu directorio raíz.

El HTML

4.- Ahora viene especificar los archivos dentro de nuestro html (estoy seguro que sabes que ddebe de ir en tu página index, ya sea, html, php, etc) debe de ir dentro de la etiqueta <HEAD>y de la siguiente manera:

<link rel=”apple-touch-icon” href=”apple-touch-icon.png” />
<link rel=”apple-touch-icon” sizes=”72×72″ href=”icon-ipad.png” />
<link rel=”apple-touch-icon” sizes=”114×114″ href=”icon-iphone4.png” />

Cuando no hay atributos (sizes) el default será el tamaño de 57×57, el cual luce muy bien en los iPhones.

El ícono de tu web en la pantalla de inicio

El ícono de tu web en la pantalla de inicio

Y eso es todo! sumamente sencillo.

 

Comparte en tus redes sociales.

Un Comentario

  1. Posted el 2 mayo 2012 a las 21:38 | Enlace Permanente

    Interesante aporte. Gracias por compartir tu conociemiento

Escribir un Comentario

Tu e-mail no será revelado. Los campos obligatorios están marcados con un *

*
*