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...)