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.

¿Necesitas contratar un hosting para tu web?
En SiteGround tienes disponible una amplia oferta de hostings para todo tipo de bolsillos y necesidades. Encuentra el hosting que estás buscando al mejor precio, con las últimas tecnologías en velocidad y seguridad web y soporte en español 24h:
HostingHosting WordPress

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.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *