hit counter
EstrellatuOreja.cl
Posted on May 31, 2013 by Felipe Faundez on design, webdesign

Como crear un icono para tu website en un iPhone/iPad

Ayer se me ocurrió agregar un acceso a este website en mi iPhone, para no tener que abrir Safari y despues escribir el www, algo facil como el acceso desde un icono. Esta tarea es muy simple, basta con abrir el website en Safari y hacer click en el icono de al medio/abajo y luego seleccionar “Add to Home Screen”. Ahora el problema es que Apple selecciona una imagen via screenshot de tu website y crea un icono a su antojo. No, lo que quiero es tener el icono de mi logo brillante. Acá va el ninja tip que encontré sin tener que tocar ninguna línea de código:

• Crea un icono cuadrado de 120×120 y sálvalo como archivo PNG, no te preocupes por los bordes redondeados, Apple lo hara automáticamente añadiendole el efecto “shiny” de sus iconos.
• Tu archivo PNG debe ser guardado con el nombre de “apple-touch-icon.png”
• Ahora subes el icono via FTP a la raiz de tu website. Por ejemplo http://www.estrellatuoreja.co.uk/apple-touch-icon.png

Listo!

Ahora haz la prueba nuevamente. Apple reaccionará e interpretará tu nuevo icono como una especie de favicon agregándolo automaticamente a tu pantalla. Si, exactamente como quiero que se vea.

display

Ninja-tip gracias a Georgia: http://www.imore.com/ninja-tip-create-custom-iphone-icon-site

Leave a Reply