Un
favicon, también llamado favorite icon, es un pequeño icono que figura al lado del nombre de los sitios web y blogs. En esta entrada te mostraré cómo personalizar el favicon en los blogs de Blogger.
Al comienzo, dicho icono solo aparecía en la lista de favoritos de los navegadores, tiempo después comenzó a utilizarse en la barra de direcciones.
Su tamaño universal es de 16x16 píxeles, aunque una variante del mismo comprende 32x32.
En Blogger, todos los blogs disponen de un favicon que, por defecto, es el logotipo de la plataforma (una B en mayúscula de color blanco sobre un fondo naranja).
No hay que considerar al favicon como un simple detalle gráfico. Es mucho más que eso, brinda una gran posibilidad de identificación, aunque para ello debes crear uno desde cero y personalizar el de Blogger.
Entonces, lo primero que debes hacer es crear un nuevo favicon. Un icono que sea representativo de aquello que deseas transmitir a tus lectores. Para esta tarea, puedes recurrir a programas de edición de imágenes (Photoshop, Gimp), de diseño gráfico (Adobe Illustrator), o herramientas online (Faviconer).
Cualquiera de los casos mencionados servirá. Una vez que tengas el favicon listo, bastará con cambiar el predeterminado por Blogger.
Pasos para personalizar el favicon en Blogger:
Para personalizar el favicon en Blogger, cuentas con dos posibilidades:
El editor proporcionado por la plataforma
El mismo código fuente del sitio
Desde el editor de Blogger:
Para cambiar el favicon con el editor debes seguir los siguientes pasos:
Paso 1:
Ingresar al sitio web:
http://blogger.com
Paso 2:
Una vez en el escritorio de Blogger, haz clic en el menú vertical desplegable. Luego clic en
Diseño.
Paso 3:
Ahí haz clic en
Editar, dentro del elemento que corresponde al favicon (ver imagen).
Paso 4:
Se abrirá una ventana emergente en la que tendrás que cargar el favicon. La imagen que utilices debe ser cuadrada (16x16px o 32x32px) y con un tamaño menor a 100KB. Una vez seleccionada, haz clic en
Guardar. Y de vuelta en
Diseño, haz clic en
Guardar Diseño para confirmar los cambios.
Listo. Sencillo pero no siempre seguro. Puede suceder que tras realizar los pasos mencionados el favicon no aparezca, esto suele pasar cuando has realizado muchas modificaciones en tu código o si tienes una de las primeras plantillas de Blogger. Para dichos casos existe la siguiene solución.
Desde el código fuente del blog:
Para cambiar el favicon a través del código fuente debes seguir los siguientes pasos:
Paso 1:
Ingresar al sitio web:
http://blogger.com
Paso 2:
Una vez en el escritorio de
Blogger, haz clic en el menú vertical desplegable. Luego clic en
Plantilla. Y en
Editar HTML.
Paso 3:
Visualizarás dentro de un marco todo el código del blog. Haz clic sobre dicho marco, luego
Ctrl + F. Emergerá un buscador. Buscá la etiqueta
<head> y justo debajo pegá el código del favicon:
<!-- FAVICON -->
<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguRuBWQ4xxQo7clZkseSAY_J2ypVaYqHTNur_1PXGDqS9zVtJE_QYE7u2BOFWCdCOywhNoY_g0fxNxTBiUrB22ybeqtbZkb4CtDLQZm2O23vIgiPxFSpYMqrGiknFn-pscpz8R51AbGRW1/s1600/icon-orange-2-16.ico' rel='icon' type='image/x-icon'/>
El elemento debería quedar encerrado entre las etiquetas
<head> y
<b:skin>.
Ahora debes cambiar la URL destacada en naranja por la URL del icono que deseas utilizar como favicon. Si bien los navegadores aceptan varios formatos, a veces pueden no reconocerlos todos. Por eso, te recomiendo utilizar el formato ICO, que siempre es leído.
Si tu imagen se encuentra en formato PNG, JPG, o cualquier otro, puedes utilizar algún
conversor online para transformarla a ICO.
Pasos para transformar imagen a formato ICO:
Paso 1:
Accedes al
conversor online.
Paso 2:
Cargas el archivo desde la computadora o subís la imagen a través de su propia URL, y haces clic en
Convertir archivo. Se descargará automáticamente el archivo ICO.
Paso 3:
Una vez que tengas el archivo ICO, lo subís a Blogger (puede hacerse desde el editor de entradas). Tras obtener la URL, la ubicás en lugar de la dirección destacada en naranja dentro del código del favicon y haces clic en
Guardar plantilla.
+ Meta Tags en Blogger
+ Mostrar código fuente en las entradas de Blogger
No hay comentarios.: