Añade a tu web un icono para iPhone o iPad

Diseño Web, Introducción, Ios Dejar un comentario

Hoy he añadido una optimización a opcionWEB, para poder tener un icono personalizado en el escritorio de un iPad o iPhone. Si tienes una web o blog, el sistema de creación es muy sencillo, yo lo he realizado siguiendo las instrucciones de Apple developer, pero te dejo los pasos que he realizado en la creación del icono y en la modificación del código de la web.

nuevo icono apple-touch-icon.png

Crea una imagen de 114×114 pixels, en formato PNG, con el nombre apple-touch-icon.png (si quieres los reflejos que crea en los iconos el sistema iOS) o apple-touch-icon-precomposed.png (si NO quieres el efecto añadido del reflejo). Una vez terminada, sube la imagen al directorio raíz de tu web.

apple-touch-icon size

A continuación hay que añadir entre el <head></head> de tu web una de las 2 instrucciones, según el tipo de imagen, para que se vea la imagen personalizada, como icono de la web, al añadirla al escritorio de un terminal móvil de Apple.

<link href="apple-touch-icon.png" rel="apple-touch-icon"/> o
<link href="apple-touch-icon-precomposed.png" rel="apple-touch-icon"/>

Ahora cuando se visite la web desde un dispositivo móvil de Apple, al añadir la web a la pantalla de inicio, pondrá el icono personalizado en lugar del icono predeterminado, en que se ve una captura de la web.

añadir la web a la pantalla de inicio

Blog Widget by LinkWithin
¿Te gustó?, VOTA el post. SÍGUEME por Twitter, Facebook o RSS.

Sigue leyendo:

Un Trackback

6 Comentarios

  1. Gravatar 21 febrero 2012, 16:26
    PC-SERVEIS, Diseño Web: Reply to this comment

    Muchas Gracias por tu Publicación.

    Hoy me han comentado que añadir un Apple Icon en cualquier página Web incrementa el page rank de Google porque es sinónimo de haber efectuado una optimización para dispositivos móviles… Así que sin dudarlo ahora mismo me pongo con ello ;))

    Un Saludo desde Barcelona !

  2. Gravatar 21 febrero 2012, 17:21
    Pancho opcionweb: Reply to this comment

    Un placer. Me alegro que te resultara útil e interesante.
    Un saludo.

  3. Gravatar 1 abril 2012, 2:28
    SERENA: Reply to this comment

    Hola, no entiendo bien, pero puedo crear un icono para iphone con accesso a mi web y que los clientes puedan tener esta aplicacion en sus movil ?

  4. Gravatar 2 abril 2012, 16:09
    Pancho opcionweb: Reply to this comment

    Si. Con este sistema ofreces un icono personalizado de tu web, para que el visitante que cree el acceso directo en el escritorio, tenga la imagen que tu quieres.

  5. Gravatar 1 abril 2013, 11:07
    Fernando: Reply to this comment

    Hola. Una pregunta:
    No soy informático, y mi duda es: ¿Cómo se dónde esta el directorio raíz de mi web? En mi caso estoy con 1&1. Quizá sepas orientarme un poco. Gracias.

  6. Gravatar 2 abril 2013, 10:47
    Pancho opcionweb: Reply to this comment

    Donde tienes el index.html de tu web.
    Espero que te funcione. Un saludo.

Escribe tu comentario o... ¡salta!

Etiquetas XHTML permitidas: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>


Entradas RSS Comentarios RSS Acceder Subir
twitter facebook Rss mail rssSígueme en Google Currents