Recursos

Añade un icono de tu web tipo APP para iPad, iPhone y Android

En esta ocasión te traigo un pequeño tutorial para que puedas aportar algo más a las seguidoras o seguidores de tu blog. Se trata de incluir un pequeño icono tipo App de tu web, para iPad, iPhone, Android, etc. De esa manera tus seguidoras o seguidores podrán acceder más cómodamente a tu web.

¿Todavía no sabes bien a bien a qué me estoy refiriendo? ¿Ni mirando la imagen destacada de este post? ¡No problemo! Dirígete al paso 5 del tutorial y donde digo “Accede a tu web”, puedes probar con mi web si quieres, termina todas las indicaciones del paso 5 y verás qué sucede. ;)

Bueno, pues si ya estás covencido/a y quieres intentar hacerlo para tu web, sólo tienes que seguir los 6 pasos siguientes, pero si no te sale a la primera no desesperes, déjame un comentario al final de la entrada e intentaré ayudarte en lo que pueda. ¿Empezamos?

Paso 1: Crea el icono de tu logo

Crear un icono con tu logo en formato png cuadrado y, a ser posible, 1024×1024 píxeles (tratándose de un logo que luego se verá a un tamaño muy reducido, no debería pesar más de 100kb).

Si no puedes hacerlo tan grande, intenta que sea de 180×180 o 152×152 píxeles. Vale incluso uno de 57×57, pero en dispositivos como un iPad retina no se verá del todo nítida.

Paso 2: Crea mini copias de tu logo

En iOS (iPad, iPhone,…) puedes crear varias copias del icono original a diferentes tamaños y nombrarlos según sea para un iPhone o iPad antiguo, para un dispositivo no tan viejo (iPhone 4, iPad 2) o incluso para los nuevos dispositivos con pantalla retina. Pero mi consejo es que no te compliques y dejes la imagen a 1024×1024, porque en las pruebas que he realizado en diferentes dispositivos es la que mejor se ve (lo he probado desde un iPhone 4 hasta un iPad retina).

Para dispositivos Android necesitas dos dimensiones:

  • 128×128 píxeles (Android “normales”)
  • 192×192 píxeles (Android de alta resolución)

Si necesitas redimensionar las imágenes y no sabes hacerlo, puedes utilizar esta fantástica aplicación web gratuita. Sólo necesitas cargar la imagen de tu logo en formato cuadrado (a ser posible de 1024×1024 píxeles) y te enviarán por email una carpeta con todas las dimensiones posibles de tu logo para los iconos de iOS y Android.

Paso 3: Nombra los iconos correctamente

Para iOS (iPhone, iPad,…), el icono debe tener el nombre “apple-touch-icon.png” (sin las comillas).

Para Android “icon-normal.png” para el de 128×128 píxeles, y “icon-hires.png” para el de 192×192 píxeles.

Paso 4: Guárdalos en la raíz de tu web

Guárdalos en la carpeta raíz de tu web. Si utilizas el hosting de CDmon, debes guardarlos en la carpeta /web. Si utilizas otros hostings, puede ser la carpeta /html o /html_public, etc.

Paso 5: Comprueba que funciona

Una vez te asegures que tienen el nombre correcto (muy importante) y que los has guardado en la carpeta raíz del directorio de tu web, toca probar si funciona:

Desde iOS:

  • Abre el navegador Safari desde un iPad o iPhone
  • Accede a tu web
  • Una vez haya cargado del todo tu web, pulsa el icono (aquí va un icono) y selecciona la opción “Añadir a pantalla de inicio”
  • Aquí deberías ver cómo cambia el icono por defecto al icono que tú hayas subido. Si no es así, revisa que los hayas subido al tamaño correcto, con el nombre adecuado y en la carpeta raíz.
  • Si el icono es el que has subido, entonces sólo tienes que hacer clic en “Añadir” para terminar. Si quieres, antes de hacerlo puedes cambiar el título.

Desde Android:

En Andorid se complica un poco más la comprobación, porque depende de la versión. Te indico unos pasos a ver si hay suerte y coincide con tu versión:

  • Abre el navegador
  • Escribe la URL de tu web
  • Pulsa Menú y Marcadores
  • Pulsa en añadir y guarda el marcador (clic en Ok)
  • Pulsa sin soltar el marcador que acabas de crear
  • En la pantalla de opciones que te aparece, selecciona la opción “Añadir acceso directo al escritorio”
  • Si vuelves al escritorio deberías ver el icono de tu web

Paso 6: Si no ha funcionado

Si no ha funcionado, tendrás que escribir algo de código y se complica la cosa. A priori no te recomiendo que lo hagas, pero si te atreves, más abajo tienes los pasos a seguir.

El código está probado y funciona, pero si se altera lo más mínimo o no se coloca donde debe, puede causar fallos importantes. Es por ello que me eximo de toda responsabilidad si tu web deja de funcionar o no funciona correctamente. Mi recomendación es que, si dudas, o no lo tienes claro, no lo hagas.

Dicho esto, si te atreves y asumes toda la responsabilidad, aquí tienes el procedimiento:

  • Localiza el archivo header.php dentro de la carpeta child de tu plantilla (/wp-content/themes/nombretema-child/). Si no tienes un child, no recomiendo que sigas porque en cuanto actualices la plantilla el código se borrará.
  • Guarda una copia del archivo header.php en tu ordenador. Si algo falla, sólo tendrás que volver a subir esta copia.
  • Dentro del archivo header.php de tu servidor (el de la copia de tu ordenador no debes tocarlo), localiza la etiqueta <head> (suele estar al principio).

Justo debajo de  <head>, en una línea a parte, escribe lo siguiente:
< link href="http://www.tuweb.com/apple-touch-icon.png" rel="apple-touch-icon" />
< link href="http://www.tuweb.com/icon-hires.png" rel="icon" sizes="192x192" />
< link href="http://www.tuweb.com/icon-normal.png" rel="icon" sizes="128x128" />

Sustituye www.tuweb.com por la url de tu web.

  • Guarda cambios.
  • Asegúrate que los cambios se han guardado. Es decir, vuelve a abrir el archivo header.php de tu servidor y comprueba que está el código que habías escrito.
  • Recarga tu página web.
  • Si tu web da error, es probable que no hayas hecho bien los pasos. Revisa que el código esté bien escrito, y que esté dentro justo debajo de <head> (cada línea en una línea separada, una debajo de la otra). Si sigue dando fallos, borra este archivo y sube el que habías guardado en tu ordenador.

Comentarios

    1. Hola

      Realmente los desarrolladores de las apps también tienen que construir los diferentes tamaños, para que cuando añadas la app a tu escritorio puedes verlo. Para la web es lo mismo, primero necesitas crear el icono en diferentes tamaños y ubicarlos en algún lado para que el sistema sepa de dónde coger la imagen.

      Espero haberte ayudado.

      Un saludo :)

Los comentarios están cerrados.