GnDx

Cuando navegamos dentro desde un iPhone por paginas web tenemos la opción de añadir a favoritos o añadir a pantalla de inicio, aquí la opción que nos interesa es añadir a pantalla de inicio la cual nos crea un icono con una vista previa del sitio web para agregarlo entre los iconos de nuestras aplicaciones, juegos y de mas apps, La finalidad de este tutorial es crear un icono personalizado para nuestra blog y a si los usuarios con iPhone, iPod e iPad puedan agregar nuestro sitio a favoritos e identificarlo con un icono personalizado.

Para crear un icono personalizado para dispositivos iOS es necesario crear 3 imágenes diferentes o una genérica que identificaran nuestro blog o pagina web una vez que el usuario elija añadir a favoritos.

Cuando se elige la opción de “Añadir a pantalla de inicio” el dispositivos busca un archivo llamado apple-touch-icon.png el cual debe de estar en la raíz del sitio, o bien podemos crear una imagen identificativa para iPad e iPhone 4.

El icono que vamos a crear debe de contar con las siguientes características:

• Medir 57×57 pixeles para nuestro icono General (apple-touch-icon.png)
• Medir 57×57 pixeles para nuestro icono del iPad (touch-icon-ipad.png)
• Medir 114×115 pixeles para nuestro icono del iPhone 4 (touch-icon-iphone4.png)
• Sin efectos de brillo o esquinas redondeadas (iOS se encarga de preparar el icono)
• sin trasparencias (iOS se encarga de preparar el icono)

Una vez que tenemos nuestro icono creado utilizando uno General o eligiendo crear el mismo icono pero con las diferentes calidades (esto por la diferencia de la calidad en las pantallas del iPad e iPhone 4 y su retina display). Es necesario crear las referencias en nuestro blog en el archivo header, dependiendo del formato de icono que usaremos, en nuestro caso utilizamos iconos con calidades para cada tipo de dispositivo. (Ver codigo de insercion en header.php)

Existe otra opción que nos permite crear nuestro icono con efectos de redondez y brillo sin que iOS agregue sus efectos clásicos al cual le pondremos el nombre de “apple-touch-icon-precomposed.png” y subirlo a nuestro directorio raíz. No es del todo necesario agregar el siguiente código al header de nuestro sitio, mientras se encuentre el icono General (touch-icon-iphone.png) o el icono Pre creado (apple-touch-icon-precomposed.png) no es necesario agregarlo al menos que quieras especificar una ruta diferente del icono. (Ver codigo de insercion en header.php)

De esta forma podemos invitar a nuestros lectores que guarden nuestro blog en sus favoritos de pantalla de inicio e identifiquen nuestro icono entre sus aplicaciones y visiten nuestro blog desde el acceso directo.

El resultado final se ve de esta forma:

Mas información: Safari Web Content Guide

Busquedas hacia esta pagina: