In Diseño, Universo IOS

Una de las cualidades que tiene los equipos IOS (iPhone, iPad, Ipod Touch, etc…) es poder salvar nuestras páginas web como Apps o mejor dicho Web Apps.

web-app2

Los que tengas un equipo IOS, ya sabeis que es muy facil hacerlo, dándole al botón de “Añadir a pantalla de inicio”, desde el menú del navegador Safari.

Bien, pues si pruebas a hacerlo con una web que no tiene preparado el ICONO, simplemete salvará una captura de la web como icono en el equipo IOS, como podeis ver en la foto de abajo. Este ejemplo es una web de un periódico que no tiene  preparado el icono para crear la Web App. (Decir también que tampoco tiene la web adapatada para dispositivos móviles. Pero ese es otro tema 🙂   )
web-app3

En este post os voy a enseñar de una forma facil y rápida, como preparar nuestra web para disponer un icono para los distintos dispositivos IOS. Decir que el icono no es el mismo, como por ejemplo, un Iphone 4 que un iPad 3.

Lo primero que debemos hacer es crearnos nuestro icono a tres tamaños en formato PNG. Lo tres formatos son 57X57 pixeles, 72×72 pix. y 114×114 pix. Es decir serán cuadradas como esta por ejemplo que hemos utilizado para nuestra web:
icono-iphone-retina-114x114

Una vez credas las tres imágenes, las subimos a nuestro servidor a la carpeta raiz de donde tengamos alojada nuestra web.

Y por último, añadimos estas tres lineas de código entre las etiquetas <head> y </head>

<link rel="apple-touch-icon" href="icono-57x57.png" />
<link rel="apple-touch-icon" sizes="72x72" href="icono-ipad-72x72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="icono-iphone-retina-114x114.png" />

Y listo, ya tendreis vuestro icono Web App en todos los disopositivos IOS.
web-app4

 

Contacta con Nosotros

Puedes contactar con nosotros sin compromiso. Atenderemos tus dudas gustosamente!!