Como agregar un icono de tu sitio web a la pantalla del iPhone, iPod o iPad

Los que somos constantes asiduos a las tecnologías de Apple y en el caso particular del iPhone, iPod o iPad y hemos navegado por internet desde estos gadgets nos hemos dado cuenta que muchas veces cuando un sitio web es interesante para nosotros lo agregamos al home screen pero muchos de estos sitios los hemos visto con iconos predeterminados y no screenshots de la página que automaticamente hace el sistema. Si eres de los que quiere tener un icono predeterminado en tu página, aquí te explicare como.

Como lo comentaba, hay y seguira habiendo muchas personas que son verdaderos geeks y que quieren que su blog o sitio web tenga esta caracteristica. La verdad no funciona para nada, pero si lo tomas por el lado gráfico, es un detalle fancy que le puedes agregar a tu página para que se vea más trabajada.

Como sabemos, las resoluciones de la pantalla entre el iPhone o iPod y el iPad son muy diferentes, mientras que los primeros utilizan logotipos o imágenes de 57×57 pixeles, mientras que el iPad son de 72×72 pixeles; esto es básicamente por el tamaño de la pantalla; de igual manera si ustedes checan, todos los iconos tienen las esquinas redondeadas, esto lo hace automaticamente Safari, por lo cual no es necesario hacerlo por nosotros mismos; con estas pequeñas especificaciones… porque no vamos a la explicación.

Pasos

Número 1

Lo primero será crear nuestro lienzo en el programa de edición de nuestra preferencia, puede ser Photoshop, ilustrator, Gimp, Sketchbook o el que decidamos. Para este caso yo lo hare en Ilustrator.

El lienzo lo crearemos de 72×72 pixeles en RGB.

Número 2

Ya que tenemos el lienzo, entonces creamos nuestro logo, en este caso yo creare el del blog “gravedad Blog” y lo que haré será una g para diferenciarlo.

Número 3

Ya que tenemos creado el logo o imágen que queramos colocar entonces procedemos a guardarla. Recuerden que no es necesario hacer las esquinas redondeadas.

Número 4

Al guardarlo, lo haremos como “Save for Web & Devices”, esto nos permitira guardalo en una forma optimizada y en el formato que necesitamos.

Cuando estemos ahí, nuestra opción será guardarlo como PNG – 24, recuerden que con PNG no hay perdida de calidad como la hay con JPG, ademas que el PNG es el formato que acepta Safari.

Esto es IMPORTANTE, al guardalo lo haremos con el nombre de apple-touch-icon.png

Ya que lo tenemos guardado, vamos a nuestro FTP, SVN o Panel y vamos a subir este archivo al root de nuestro sitio.

Número 5

Ya que tengamos arriba el archivo entonces podremos tener nuestro icono personalizado en nuestro home screen de cualquiera de nuestros dispositivos apple. Ya que safari detecta automaticamente la imágen, no será necesario que eliminemos el acceso, con abrirlo es darle reload es suficiente.

Segunda opción

Si no estas muy conforme y no tienes mucha fé en que el sistema tomará automaticamente la imágen de tu web, hay una opción alterna donde solo debes de poner una linea de código dentro de tu sitio web. La línea es:

<link rel="apple-touch-icon" href="la ruta que tiene el archivo">

Recuerda que este tipo de códigos deben de estar dentro de la etiqueta HEAD

Que pasa si no quiero que mi imágen tenga el brillo que le agrega el sistema, entonces cuando guardes tu imagen el nombre deberá ser el siguiente:

apple-touch-icon-precomposed.png

Espero les resulte muy util esto. No olvides poner tus comentarios o feedback en la parte de abajo.

  • Pingback: Tweets that mention Como agregar un icono de tu sitio web a la pantalla del iPhone o iPad | Gravedad Blog -- Topsy.com()

  • Jose

    Hola!! esta genial el tuto!!! me ha servido de gran ayuda!!
    Pero ahora quisiera hacerlo con mi blog de blogger… y no lo consigo 🙁 🙁 ni siquiera subiendo la imagen a un servidor gratuito y llamandola como pones en la segunda opcion… no funciona 🙁 🙁

    Sabes como se podria hacer para blogger???
    gracias!!! un saludo!

  • Semillas feminizadas

    Interesante información la que ha publicado, nos muestra una detallada explicación respecto al tema.

  • daush

    No me resulta de ninguna manera :/

  • Ivan

    Que es lo que no te resulta daush? no lo puedes ver?

  • jmz

    Tengo una pregunta. no se si sea el lugar adecuado para preguntar pero estoy desesperado.
    mi pregunta es la siguiente ¿como detecto si el icono ya existe en el homescreen?

    • Cuando ya existe, te lo crea en algun lugar disponible en tu home screen, si no lo encuentras, puedes buscarlo con el nombre de tu sitio. Cuando agregas un icono, te aparece exactamente igual que una aplicacion.

  • apple2012

    hola disculpa intente quitar el brillo que deja en la imagen pero no me acepto y sigue poniéndolo me podrías ayudar o si existe otro método?

    • Que tal. Claro, hay otro método, estás usando wordpress? o html simple?