martes, 29 de enero de 2013

Blogger: icono para dispositivos Apple

Si desde un dispositivo

Apple

(Iphone o Ipad) accedes a tu blog de

Blogger

(o realizado con cualquier otra plataforma) puedes añadir una página en la pantalla de inicio del dispositivo pero ¿con qué icono saldrá? En este artículo te explicaré cómo personalizarlo.

Si no has hecho nada por personalizar el

icono para dispositivos Apple

lo más normal es que si añades una página en la pantalla de inicio del dispositivo te salga un icono con una especie de miniatura de la página que has añadido y con las esquinas redondeadas. Lo normal es que quieras personalizar este icono:

  1. Crea un icono personalizado de 57x57 píxeles, guárdalo en formato png y súbelo a algún sitio donde esté accesible desde

    Blogger

    (dropbox, Google Drive,...). En el caso de

    areaTIC

    lo que tengo es una página de

    Blogger

    que no publico y donde añado este icono, los de redes sociales,... una vez añadidos el enlace que me genera lo puedo utilizar en las distintas páginas artículos del blog. El icono creado para

    areaTIC

    es el siguiente (no es necesario que redondees las esquinas, ni lo sombrees,... se encarga tu dispositivo

    Apple

    por tí).


    Si queremos más información sobre los

    iconos para dispositivos Apple

    , consejos para su creación,... podemos acceder a la siguiente página de la iOS Developer Library.

  2. Entramos en

    Blogger

    , vamos al apartado Plantilla y pulsamos sobre el botón "Edición de HTML".


  3. Buscamos en el HTML de la plantilla el código:
    </head>
    
  4. Justo encima del código anterior añadimos el código siguiente:
    <link rel='apple-touch-icon' href='http://.../iphoneicon.png' />
    
    Donde:
    • "iphoneicon.png" es el nombre del icono que has creado en el paso 1.
    • "http://.../iphoneicon.png" es la URL correspondiente al icono.
    Tras los cambios guardamos la plantilla.

  5. Ahora llega el momento de probarlo, si disponéis de un dispositivo

    Apple (iPhone o iPad)

    es muy sencillo, ¿pero y si no lo tenemos? Podemos acceder al blog de Duopixel y utilizar su simulador de

    iPhone

    , seleccionas la imagen creada en el paso 1 la subes y podrás ver el resultado. En un

    iPad

    se visualiza de igual forma.


Y hasta aquí el artículo de hoy, espero que os haya sido interesante, dentro de

areaTIC

puedes encontrar otros artículos, no dudes en consultar nuestro archivo; también puedes seguirnos por RSS o las principales redes sociales (twitter, facebook, linkedin...)


No hay comentarios:

Publicar un comentario en la entrada