Favicon para múltiples dispositivos en Blogger

Favicon multiples tamaños Favicon multiples dispositivos Blogger

El favicon nos permite representar rápidamente nuestro sitio en el navegador, gracias a un pequeño icono que nos identifica como imagen corporativa o simplemente para darle más personalidad a nuestro blog.


Gracias a HTML5 el favicon nos permite modificar el aspecto de nuestro sitio incluso en dispositivos móviles. Hoy vamos a aprender a insertar favicon para múltiples dispositivos de manera automática en Blogger.


iOS, Windows y Navegadores

He escrito el código para que Blogger genere los iconos en cada plataforma, dispositivo y resolución que le sean necesarios. Primero crea tu favicon en formato png y 310x310 píxeles ya que este icono se utilizara en el repertorio de aplicaciones o como icono del navegador:


metro

Una vez lo tengas, obligatoriamente subelo a blogger y copia la url de la imagen, luego nos dirigimos a Temas > Editar HTML. Si estás usando plantillas de zkreations, busca la siguiente linea de codigo y eliminala:


<!-- favicon -->
<link expr:href='data:blog.blogspotFaviconUrl' rel='icon' type='image/x-icon'/>

Si por el contrario, no encuentras nada parecido puede que estés utilizando uno de los temas oficiales proporcionados por Blogger, en ese caso el código a buscar es el siguiente:


<b:include data='blog' name='all-head-content'/>

Si encontraste el primero y lo eliminaste (El que corresponde a mis plantillas) pegaremos el siguiente código en su lugar. En caso de haber encontrado el segundo (Plantillas Oficiales de Blogger), el código deberás pegarlo arriba de eso:


<!-- Multiple favicon sizes for Blogger by zkreations -->
<b:with value='"[favicon.png]"' var='favicon'>
   <!-- Apple Touch Icon -->
   <b:loop values='[57,60,72,76,114,120,144,152,180]' var='sizes'>
      <link expr:href='resizeImage(data:favicon, data:sizes, "1:1")' rel='apple-touch-icon' expr:sizes='+(data:sizes,"x",data:sizes)'/>
   </b:loop>
   <!-- Favicon -->
   <b:loop values='[16,32,48,96]' var='sizes'>
      <link expr:href='resizeImage(data:favicon, data:sizes, "1:1")' expr:sizes='+(data:sizes,"x",data:sizes)' rel='icon' type='image/png'/>
   </b:loop>
   <!-- Tiles for IE 11+ on Windows 8.1+ -->
   <meta name="msapplication-TileColor" content="#ffffff"/>
   <meta name="msapplication-TileImage" expr:content='resizeImage(data:favicon, 144, "1:1")'/>
   <b:loop values='[70,150,310]' var='sizes'>
      <meta expr:content='resizeImage(data:favicon, data:sizes, "1:1")' expr:name='+("msapplication-square",data:sizes,"x",data:sizes,"logo")'/>
      <b:if cond='data:sizes in {150}'>
         <meta expr:content='resizeImage(data:favicon, 310, "310:150")' expr:name='+("msapplication-wide310x",data:sizes,"logo")'/>
      </b:if>
   </b:loop>
</b:with>

Ahora solo reemplazamos [favicon.png] por la url de nuestro icono que habíamos copiado con anterioridad. Guardamos los cambios y listo.


Chrome android

En este caso necesitaremos crear un archivo site.webmanifest que contiene los iconos para los accesos directos en el escritorio de android.


icono escritorio android

También se se usa para la vista en segundo plano y al momento de ejecutar el acceso directo (configurado en standalone):




Dado que Blogger no permite subir archivos al servidor, vamos a usar Github. Para ello sigue los pasos de mi articulo sobre github como servicio de alojamiento web gratuito y vuelve a esta entrada.


Con nuestro repositorio creado, vamos a dar clic al botón "Create new file":


create site webmanifest

En el campo de nombre y extensión, escribiremos "site.webmanifest" y dentro pegaremos las instrucciones que serán tomadas por Chrome para Android:


create site webmanifest

Las instrucciones json de la captura, son las siguientes:


{
    "name": "Blog",
    "short_name": "Blog",
    "icons": [
        {
            "src": "favicon.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "favicon.png",
            "sizes": "256x256",
            "type": "image/png"
        }
    ],
    "theme_color": "#ffffff",
    "background_color": "#ffffff",
    "display": "standalone"
}

Para empezar Blog se reemplaza por el título del blog mientras que favicon.png se reemplaza dos veces por la url subida a blogger, uno en tamaño 192x192 y otro en 256x256. Por último elegimos el fondo y color del tema utilizados por Android 5.0 o posterior, que por defecto he dejado en blanco.


Al terminar de reemplazar los datos, escribimos un comentario y presionamos el botón "Commit new file" para que nuestro archivo esté disponible en nuestro repositorio:


create site webmanifest

Ahora damos clic sobre el mismo para poder revisarlo y presionamos el botón "raw":


create site webmanifest


Copiamos el enlace del navegador y posteriormente visitamos rawgit, pegamos el enlace en el primer cuadro y copiamos el enlace generado del lado izquierdo:


create site webmanifest

Listo, debajo del código que pegamos para generar los iconos de dispositivos iOS, Windows y Navegadores, vamos a pegar lo siguiente:


<!-- Chrome Android -->
<link rel="manifest" href="site.webmanifest"/>
<meta name="theme-color" content="#ffffff"/>

Por último reemplazamos lo resaltado "site.webmanifest" por el enlace que copiamos de rawgit, guardamos los cambios y listo. Si quieres saber mas sobre el archivo site.webmanifest te recomiendo leer Web App Manifest por Mozilla.


Espero que este tutorial les haya sido útil, y que puedan personalizar aun más la experiencia de usuario dependiendo del dispositivo. SI tienes alguna duda por favor déjala en los comentarios y no olvides compartir este articulo, lo agradecere mucho.