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.
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
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
Y eso es todo! sumamente sencillo.
Interesante aporte. Gracias por compartir tu conociemiento