Apple anda por las noticias gracias a que han presentado nuevos iPods y un nuevo Apple TV, pero nosotros vamos a contar un pequeño truco que podemos utilizar para poner un icono personalizado cuando se añade un favorito a la página de inicio de nuestra página.

Para realizarlo necesitaremos añadir esta línea donde tenemos la línea del favicon de toda la vida:

<link rel=”apple-touch-icon” href=”/icono-para-ios.png”>

A partir del momento en el que pongamos la línea en el código y el icono en la raíz de nuestro servidor ya podremos disfrutar de un icono en la pantalla de inicio y no de una mini-captura de pantalla. Apple especifica que el icono creado es de 60×60, pero eso carece de sentido en las nuevas Retina Display, así que yo he hecho la prueba de usar uno de 200×200 en mi iPhone 4 pero se sigue creando de 60×60, así que eso lo tienen que corregir.

En la imagen de arriba tenéis como quedaría la de un proyecto en el que estoy trabajando. No es mucho esfuerzo y la gente que navegue con iPhones, iPod e iPads nos lo agradecerá. Os recuerdo que el aspecto glossy del icono lo aplica el iDevice de forma automática.

Los favicons identifican en el navegador a una pagina web, es por ello que comparto algunos de la completa recopilación de favicones para inspiración.

Para ver mas favicons visita, elitebydesign