El icono de tu web en el escritorio del iPhone

Muchos os preguntaréis cómo se hace para que al añadir una web como acceso directo al escritorio del iPhone salga un icono personalizado. Normalmente, si la web no está adaptada , el teléfono, por defecto añade una imagen en miniatura de la misma. Bien, esto es lo que vamos a tratar de solucionar con este pequeño tutorial.

1.- Necesitaremos un icono de 57 x 57 px, el formato tiene que ser .png, no le deis brillos, ni redondeéis las esquinas, ni nada por el estilo, Mr. Jobs  ya se encarga de todo eso.
2.- Lo subimos al servidor en el que habitualmente alojamos las fotos, copiamos la url y, como diría un cocinero, reservamos...
3.- Ahora tenemos que copiar el siguiente código y pegarlo en la cabecera de nuestra web, donde pone http://www.miservidor.com.png, lo sustituimos por la url de nuestro icono :


<!-- Meta Images -->

<link href='http://www.miservidor.com.png' rel='apple-touch-icon'/>

4.-Recordaros que antes de guardar ningún cambio, hagáis copia de seguridad de vuestra plantilla, por lo que pudiera pasar. Para finalizar, deciros que para probar el efecto podéis hacerlo con mi web y ya dejar el icono instalado en vuestro escritorio de por vida..., es broma... :p

Si alguien no sabe como crear un acceso directo, puede mirar aqui: Crear acceso directo en iPhone

Cualquier duda estaré encantado de resolverla en los comentarios.

Compartir en Google Plus

Sobre Jorge Pizarro

Redactor en iPhoneWorld