Añade un icono de tu blog en iPhone o iPad

Hoy quiero compartirles como aprendí a colocar un botón con aspecto de App en mi iPod Touch y que ustedes podrán colocar en sus iPhone o iPad.

También, vamos a lograr que tu icono se vea con las esquinas redondeadas como cualquier icono del App Store.

Y para qué me sirve?

Para tener un acceso, para mostrar a otros tu sitio desde tu dispositivo móvil y para demostrarle en persona, a algún patrocinador potencial que te tomas tu sitio MUY en serio. Branding, en definitiva.

Tutorial

El tutorial puede resultar un poco largo pero si sigues al pie de la letra las instrucciones, de seguro, lo lograrás.

Para que entienda lo que haremos, así como a tu blog puedes colocarle un favicon para distinguirlo, el icono de una app no deja de ser un favicon, solo que algo más grande.

Para lograr que el icono de tu blog se vea como el de una app, primero vamos a necesitar un icono que identifique a tu blog. Y su medida debe ser de 129 x 129 pixeles. Ni más ni menos. No te preocupes por los bordes redondeados, de eso nos encargaremos automáticamente luego.

Una vez que tengas el icono creado, procura guardarlo como .PNG. Esto será muy importante.

Ahora tienes que subir tu .PNG a tu sitio vía FTP (si tienes un blog con su propio hosting) o bien, subirlo a algún hosting gratuito como Photobucket (si usas Blogger. Aún usas Blogger ???!!!!)

Bien, ahora tienes un URL de tu imagen. Guárdala en un lugar seguro porque la usaremos bastante en el tutorial.

Ahora empieza lo bonito.

En WordPress irás a Apariencia / Editor / header.php y allí tienes que ubicar la etiqueta /head. Y por encima de esta etiqueta, pega el siguiente código, previa colocación de la URL de la imagen que te hice guardar antes.

Si usas Blogger irás a Plantilla, luego a Editor HTML y luego de aceptar la advertencia de que si metes la pata es tu culpa por seguir usando Blogger, harás click en Expandir artilugios.

Ahora, deberás buscar la etiqueta head. Una vez localizado ese head, inmediatamente después pegas el código de arriba.

Solo por precaución, click en Vista previa para checar que todo sigue en orden y si es así, Guardar plantilla.

Ahora si, añade el icono de tu blog en iPhone o iPad

Toma tu iPhone o Ipad (yo lo hice con mi iPod Touch) y entra al explorador Safari. Tipea la dirección de tu blog. Si tienes activada la opción de navegado con dispositivo móvil, desactivala: debes ver tu blog tal cual lo verías desde tu PC.

Debes hacer click en el icono que te señala esta captura

Ahora te aparecerá este menú de opciones. Si en vez de tu icono te aparece como una mini captura de pantalla, erraste con alguna parte del código. Si aparece tu icono como en la siguiente captura, ya puedes hacer click en «Añadir a pantalla de inicio»

Inmediatamente después de «Añadir a pantalla de inicio», te aparecerá una nueva pantalla en donde colocarás el nombre del botón. Sé breve, no hay muchos caracteres disponibles:

Click en Añadir y listo !! El icono de tu blog, estilo app en tu iPhone o iPad !