Personalizar Favicon en Blogger

La personalización del favicon dota a los blogs de identidad propia 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.

Favicon de Creativo 2.0

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

Favicon personalizado desde el editor 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.

Favicon personalizado desde el código fuente 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='http://2.bp.blogspot.com/-ZhotIn5IKmw/VRIjBawbvpI/AAAAAAAAA6k/YkGVOs35mi0/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

Profesional en constante evolución. Apasionado del diseño y la escritura. Blogger desde los 13 años. Escribo sobre marketing digital, social media y técnicas de blogging. Mi actividad profesional es la docencia. En este blog volcaré todos mis conocimientos. Más sobre mi.
SUSCRÍBETE AL BLOG POR CORREO ELECTRÓNICO

No hay comentarios.: