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.

Mejora el rendimiento de tu web
Te enseñamos cómo crear tu web con WordPress y cómo conseguir mucho tráfico en poco tiempo:
Crear un blog con WordPressPasa de 0 a 5.000 visitas en tu web

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