Añade a tu web un icono para el iPhone y el iPad

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.


2 comentarios

  1.   Luis Lopez dijo

    Que buen tip la verdad, gracias por compartirlo, pero existe alguna limitación o información de peso, o de tamaño, resolución etc, para que se vea mejor

  2.   Carlinhos dijo

    Puedes poner el tamaño de icono que quieras, luego el iPhone/iPad lo redimensionará a su gusto.

Escribe un comentario