Crear un Icono Personalizado del Blog para iOS

No se si tú lo haces normalmente, pero yo entro en mis blogs todos los días varias veces desde el móvil para asegurarme de que todo va bien, contestar a los comentarios, por si hay cualquier problema... lo que viene siendo una adicta, es lo que hay.

El caso es que cada vez que hago eso, me toca entrar en Safari, poner el nombre del blog en el buscador y darle a buscar para acceder a él. Y tú dirás ¡joer, no es para tanto! y sí, es cierto, tampoco es que eso me lleve todo el día, pero cuando la gente me pregunta:

-¿Cómo te da tiempo a todo?-. Pues precisamente así, organizándome para que todo lo que hago sea de la forma más simple y sencilla, y por tanto me ocupe menos tiempo y molestias.

¿Y cómo puedo conseguir acortar ese tiempo que ocupo en buscar mis blogs cada vez en el buscador? Pues hay una manera muy simple de hacerlo, añadiendo un icono personalizado del blog a la pantalla de nuestro iPhone ¡¡tachaaaaannn!! ¿es una gran idea o no? Y no sólo eso, además vamos a hacerlo bonito y con diseño, que ya que nos ponemos, dejamos las cosas como Dios manda.

Verás que es súper sencillo.

Crear un icono personalizado del blog para iOS:

1. Lo primero es averiguar si tienes un favicon puesto en tu web, el favicon no es más que el iconito que sale en el navegador al lado de tu url. Si ya lo tienes puesto, ve directamente al punto 6, si no, te explico cómo ponerlo.

Crear un Icono Personalizado del Blog para iOS

2. Si estás en este punto es porque no tienes puesto el favicon, así que tienes que crearte uno chulo y molón, y para eso, necesitas un editor de fotos o de diseño como Photoshop, Corel, Gimp... el que uses o tengas. E incluso puedes usar un sitio web como Canva o PicMonkey para hacerlo, eso lo dejo a tu elección (si quieres usar PicMonkey, aquí tienes un post con todo un paso a paso). Eso sí, el tamaño tiene que ser de 152 x 152px y lo tienes que guardar al finalizar como un archivo .png.

Ten en cuenta que al guardar en .png se quedará con fondo transparente, y éste se verá negro en la pantalla del móvil. A mí me gusta cómo queda el mío con el fondo negro, pero si prefieres un fondo acorde con los colores de tu logo, sólo tienes que hacer el icono con el fondo en el color elegido. Además ten en cuenta que va a ser un icono para el móvil, es pequeño, por lo que tu diseño debe verse bien, si añades textos y cosas pequeñas no se distinguirán.

3. Sube la imagen a tu blog como una imagen normal de cualquier post.

4. Si tu blog es de WordPress estás de suerte porque es súper fácil, instalas un plugin imprescindible que te permita subir un favicon y "apañao". Hay un montón, pon la palabra "favicon" en el buscador de plugins y tendrás para pasarte el día eligiendo.

5. Si tu blog está en Blogger es un poco más complicado, aunque tampoco es para pedir auxilio.

Ve a Edición de HTML en tu plantilla y haz una copia de seguridad por si la lías. A continuación, inserta el siguiente código en tu plantilla, justo después de la etiqueta <head>.

<Link rel="apple-touch-icon-precomposed" href="http://UrlDeTuIcono.png"/>

Tienes que cambiar "UrlDeTuIcono.png" por el nombre que le hayas dado al icono. A continuación, guarda.

6. Ahora es cuando vamos a lo que mola, añadir el icono personalizado a la pantalla principal del iPhone. Desde el móvil ve a tu blog o sitio web como lo haces normalmente.

icono-del-blog-iphone

Pulsa sobre el cuadrado con el icono de la flecha y selecciona Añadir a pantalla de inicio.

icono-blog-movil

A continuación, elige el título que quieres darle, pulsa sobre Añadir y ¡listo!

icono-blog-en-movil

Si te ves incapaz de hacer un favicon o pasas de hacerlo, ¡¡no hay problema!!, también puedes tener tu icono personalizado; te saltas todos los pasos hasta llegar al punto 6, sigue el camino de baldosas amarillas igual que los demás, y al darle a Añadir, él mismo cogerá una captura de pantalla de tu blog como icono.

icono-blog-iphone

¿A que es fácil de hacer? Ahora es mucho más cómodo acceder al blog o página web a través del icono personalizado, evitándonos un montón de pasos, y por tanto ganando tiempo para dedicarlo a otras cosas.

¡Que te diviertas! 😀

Opt In Image
The following two tabs change content below.
Alicantina, Enfermera, Blogger y Mamá de tres maravillosas fieras. Cabezona (mucho), muy muy optimista y extremadamente trabajadora. Me gusta vivir la vida y exprimirla, disfrutarla con los míos y sacarle todo el jugo, que total, estamos aquí tres días, no es como para perderlos en cosas (ni gente) que no merecen la pena.

8 comentarios en “Crear un Icono Personalizado del Blog para iOS

  1. Yo no tengo Iphone pero lo he probado con mi Xperia Z2 y te cuento. Me deja poner un icono en la pantalla de inicio, ¡oleeeeee!, pero aunque tengo favicon no me lo personaliza, así que solo estoy contenta a medias. Pero oye, que me ahorras tener que meterne en el buscador para llegar al blog, que no es poco, ¡qué tecnolerda me siento!

  2. Genial el tutorial, pero el código para blogger no me funcionó y luego vi que era porque en el código decía “precompuesto” y debería ir “precomposed”, al final el código quedó así:

    Después de hacer la modificación funcionó … gracias por el dato de poder poner un icono de mi blog en mi iphone! ^_^

Deja un comentario