Como añadir un icono para el iPhone a tu web
Friday, May 22nd, 2009Desde la versión 1.1.3 del sistema operativo del iPhone, puedes añadir enlaces a tus webs favoritas a la pantalla de inicio. Por defecto, el dispositivo crea una miniatura de esa web, pero es tan pequeña que no sirve para identificarla. Por suerte, ese icono se puede personalizar como podéis ver en la captura de pantalla.
Según podemos leer en la documentación de Apple, es tan simple como crear una imagen en formato PNG de 57×57 pixeles (sí, a mi también me parece un tamaño un poco extraño) y colocarlo en la raíz de nuestra web con el nombre apple-touch-icon.png
. El dispositivo se encargará de redondear las esquinas y darle ese efecto glossy. Pero si nuestra imagen ya tiene algún tipo de efecto de brillo (como me ocurre a mi) queda demasiado sobrecargado: demasiado brillo. Para que el iPhone no añada ese efecto glossy a la imagen manteniendo las esquinas redondeadas, basta con renombrarlo a apple-touch-icon-precomposed.png
, como se indica en otra parte de la documentación.
En lugar de usar los nombres por defecto, también podemos dar una referencia a la imagen que queremos que se use como icono añadiendo en la cabecera del documento HTML uno de los siguientes tags dependiendo de si quieremos o no que se aplique el efecto glossy a la imagen:
<link rel="aple-touch-icon" href="/customIcon.png"/> <link rel="apple-touch-icon-precomposed" href="/customIcon.png"/> |
Lo que no acabo de entender muy bien son los motivos que puede tener Apple para no usar el favicon (eng) que los navegadores ya usan, entre otras cosas, para asignar un icono al enlace cuando lo guardamos en nuestros bookmarks. Ya se que normalmente el favicon es de 16×16 píxeles por lo que resulta algo pequeña para la interfaz del iPhone y escalándola quedarían horribles. Pero el formato ICO soporta que en el mismo fichero puedas tener varios tamaños de la imagen. Bastaría con que el iPhone usara la más grande disponible y si ninguna tiene el tamaño mínimo requerido que hiciera lo de la miniatura de la web. Ahora mismo no se me ocurre ningún motivo técnico para tener que usar otra imagen diferente para un fin similar.