Haz que tu web luzca un buen icono en la pantalla de inicio de tu dispositivo iOS

Si dispones de una web y quieres que luzca bien en los dispositivos iOS puedes hacer bastantes cosas, una de ellas es adaptar la plantilla a las medidas de dichos dispositivos y otra es la que os vamos a enseñar.

Bien es sabido que Safari permite agregar accesos directos y los pone en la pantalla de inicio, normalmente carga una previsualicación de la web y ese es el icono que muestra, pero podemos hacer que cargue la imagen que queramos haciendo que el acceso directo se vea como una app propia y adaptándola al entorno gráfico del dispositivo.

Para esto necesitaremos una imagen con un tamaño de 100×100 px, no os molestéis en hace el efecto glass típico de los iconos ya que lo hace el sistema de forma automática.

Esa imagen tiene que tener formato .png y debe tener el nombre de apple-touch-icon.png y para que surja efecto debe estar alojado en public_html, es decir, que debe estar con todos los archivos principales, no debe estar oculto ni en carpetas ni en ningún sitio.

De este modo cuando agreguéis vuestra web a la pantalla de inicio os aparecerá el icono seleccionado con el efecto glass y ya si usáis la aplicación que el otro día os recomendamos (StoreSizer) podréis adaptar vuestro icono a la Retina Display.
Espero que os sea sencillo haber hecho este truco, puede que tarde en cargar el icono, pero si esperáis sale.