Modificar el favicon en Blogger para verlo en los resultados de Google

Cambiar el favicon en Blogger y su presencia en los resultados de búsqueda de Google

Desde que Google comenzó a mostrar el favicon en los resultados de búsqueda móviles, cada vez más personas prestan atención a este elemento particular de nuestros sitio web y buscan agregarlo o modificarlo en su blog, pero es posible que aún cuando se realiza la acción de modificación, esto no se refleje tan rápido como se espera.

Comencemos por lo básico y luego avanzamos sobre diferentes aspectos relacionados.

¿Qué es el favicon?

Favicon proviene del Inglés y es la simplificación de "Favorites Icon" (Icono de favoritos), este es un elemento que se usa en los sitios web y es una imagen en formato icono (extensión .ico) tal y como podemos verlos en nuestros computadores en el escritorio y en nuestros PC tienen la función de servir como un "atajo" para acceder a una aplicación, tal y como lo hacemos en nuestros dispositivos móviles o Smartphones, incluso se pueden personalizar tal y como se puede realizar en Microsoft Windows y otros sistemas operativos, ya sea personalizando un icono en particular o el tema del sistema operativo (incluye el fondo de pantalla, personalización de ventanas, letra e iconos en lo general).

En Internet y particularmente en nuestros sitios web, el favicon tiene dos utilidades:

1 - Ser el identificación de nuestros sitio web en el la pestaña del navegador

Este icono aparece en la pestaña del navegador que usamos (Chrome, Firefox, Opera, IE, Safari, etc.) y permite que se identifique fácilmente la imagen de nuestro sitio web y le permita al usuario ubicarlo rápidamente entre aquellas pestañas que tenga abiertas en el navegador.

2 - Servir como acceso directo en nuestros dispositivos

Es de utilidad para casos donde una persona quiere crear un acceso directo con el navegador a un sitio web en su dispositivo (equipo de escritorio o móvil ) y al momento de hacerlo, este utilizará el icono que encuentre establecido como Favicon.

Ahora veamos el proceso básico para modificar este elemento en nuestro blog.

Como agregar o modificar el favicon en Blogger

Agregarlo o cambiarlo es muy sencillo, solo es seguir el siguiente procedimiento:

1 - Ingresamos al CMS de Blogger
2 - Nos dirigimos a la opción de [Diseño]
3 - Identificamos el elemento que dice "Favicon" e ingresamos en "Editar"

Una vez hacemos esto nos aparece la ventana con la opción de configurar este elemento y así mismo podemos ver el siguiente mensaje:

"Selecciona un archivo favicon. Usa una imagen cuadrada cuyo tamaño sea menor que 100 KB."

4 - Seleccionamos la imagen y usamos la opción de "Cargar"

y con ello ya tendremos el favicon para nuestro sitio en Blogger.

¿Qué debemos tener en cuenta al momento de modificar este elemento?

Blogger por defecto establece un favicon propio con su logo, por lo que en si mismo, el blog ya cuenta con favicon preestablecido, ahora veamos que debemos tener en cuenta para cambiarlo.

Formato u extensión

El formato de la imagen puede ser .PNG ó .ICO y casi cualquier programa de edición gráfica permite guardar imágenes en dichos formato, por ejemplo Paint en Microsof Windows o en editores de imágenes más avanzados pero que nos permiten manejar imágenes con transparencias como GIMP (licencia libre y se puede descargar desde su sitio oficial) o Photoshop (licencia de pago).

Si utilizamos un formato en la imagen .PNG, Blogger hace la conversión de la misma a .ICO sin problemas lo cual es una ventaja en razón de la versatilidad en el manejo del .PNG y de transparencias.

Una buena idea para ver cómo quedará sería generar la imagen de lo que será nuestro logo en alta calidad y definición, luego con un programa como GIMP crear la imagen a una escala de 48x48 pixeles y si se aprecia bien, guardarla en formato .ICO y luego cargarla al blog.

Tamaño de la imagen

Puede parecer que 100 KB no son mucho como límite máximo para .ico, pero realmente es bastante respecto del tamaño de una imagen que será un icono.

Como referencia una imagen de 1000x1000 pixeles en .PNG puede pesar tan solo 54 KB, así que no debemos guiarnos solo por el tamaño ya que la definición de la imagen puede hacer que 100 KB sea poco o demasiado.

El tamaño final de la imagen en formato .ico luego de subirla a Blogger

Cuando cargamos la imagen, Blogger la re-dimensiona automáticamente a un tamaño de 16x16 pixeles, por lo que esto es algo a tener en cuenta al momento del diseño del logo o imagen que utilizaremos.

Nota: es importante mencionar que por el momento en Blogger no se cuenta con la capacidad de determinar el tamaño del favicon, no obstante, esto no es un problema como lo veremos más adelante.

Ahora que ya conocemos lo anterior vamos a explorar algunas incidencias que se pueden llegar a presentar

Problemas con la modificación del Favicon

Se pueden presentar típicamente algunas incidencias al momento de modificarlo que describiré a continuación.

No aparece el nuevo favicon en la pestaña del Browser

Esto es normal y a veces no se refleja inmediatamente el cambio al actualizar la pestaña del blog o volver a abrirlo, puede tardar algún tiempo como en efecto sucede en algunos casos

- No me aparece el favicon - Foro de ayuda de Blogger

- Duda con Favicon - Foro de Ayuda de Blogger

¿Cómo comprobar que se modificó el elemento?

Muchas veces se cae en el error de pensar que se debe volver a cargar, pero no hay que hacerlo, la forma de comprobar ello es simple

1 - Abrimos el blog en una pestaña en el modo incógnito
2 - Presionamos en el teclado [ Ctrl ] + [U] para que se abra la ventana del código fuente HTML de la página
3 - Buscamos la línea del icono que estará en la parte superior (en la cabecera o Head) y tendrá el siguiente formato:

El favicon de un sitio en Blogger en los resultados de búsqueda de Google

Este es uno de los aspectos que, como ya mencioné en un inicio, llega a ser de interés y se llegan a ver diferentes casos como por ejemplo:

- Mi favicon no aparece en las serps de Google - Foro de Ayuda de Blogger

- Favicon no se ve en el móvil - Foro de Ayuda de Blogger

Ahora vamos a mencionar algunos aspectos que es importante tener en cuenta:

1 - Se muestra solo para los resultados móviles en el buscador, no para los resultados de búsqueda tipo escritorio.

2 - El contar con el Favicon en nuestro sitio, no establece que Google tendrá que mostrarlo o que, si este no se muestra existe un problema, esto es algo automatizado y el algoritmo determina si lo muestra.

Ahora veamos un aspecto que se esgrime en la propia documentación de Google y sobre el cual muchos creen que es la causa de que el favicon no se muestre en los resultados de búsqueda

En la documentación de Google en sus directrices dice lo siguiente:

"El icono de página debe ser cuadrado y tener un número de píxeles múltiplo de 48 (por ejemplo: 48x48, 96x96 o 144x144). Los archivos SVG no tienen un tamaño específico. Se admite cualquier formato de icono de página válido. Google cambiará la escala de tu imagen a 16x16 píxeles para poder usarla en los resultados de búsqueda, así que comprueba que se vea bien con esa resolución. Nota: No proporciones un icono de página de 16x16 píxeles."

Fuente: Definir un icono de página para que aparezca en los resultados de búsqueda - (Define a favicon to show in search results) - Search Console Help

y como ya mencionamos antes, Blogger redefine el tamaño de la imagen a 16x16 y por ello se llega a pensar o creer que no esa es la razón por la cual no se mostrará, pero no es así, Google lo muestra sin problemas en sus resultados de búsqueda como se puede apreciar a continuación:

Resultados móviles de Google para búsqueda orgánica y no orgánica para sitios de Blogger mostrando el favicon .

Por lo que no hay que preocuparse por este aspecto, si bien en Blogger eventualmente podrían cambiar el tamaño de este, no es algo que sea una limitación ya que es conocido por Google que muchos sitios utilizan este tipo de tamaño para sus favicons

Tip de ayuda: Comprobar la versión móvil de nuestros blogs y de los resultados de Google

Los blogspot que no poseen plantillas responsive, pueden ver su versión móvil agregando el parámetro "?m=1" en la barra de dirección al final de la URL, por ejemplo

https://nombredelblogenblogger.blogspot.com/?m=1

Aquellos blogs que posee una plantilla adaptativa como por ejemplo lo son las nuevas plantillas Contempo, SOHO, Destacable y Emporio, podrán ver la versión móvil en su equipo desktop de la siguiente forma:

Usando el navegador Chrome Browser para ejemplificarlo, seguimos este procedimiento:

Click derecho sobre el ventana (en un espacio "en blanco")
Click en [Inspeccionar] en el menú que se despliega.
Ubicar y dar click sobre el icono que parecen dos dispositivos juntos en la parte superior derecha, denominado "Toogle Device Toolbar", opción que sirve para ver la simulación de dispositivos móviles en nuestros equipos de escritorio.

Este procedimiento nos sirve también para ver los blogs con plantillas que no son responsive (Awesome, Simple, etc.), para ello solo se debe actualizar la ventana (Persionar F5 en el teclado) y no será necesario agregar el parámetro anteriormente referenciado al final, la URL cambiará por sí sola.

Podemos aplicar lo mismo referenciado anteriormente para ver los resultado de búsqueda móviles de Google como lo veríamos en nuestros smartphones.

Un agregado sobre la nueva versión de Blogger y la modificación de este elemento.

La nueva versión de Blogger y el Favicon

Blogger ha lanzado la nueva versión de la interfaz de su CMS en el 2020 como se puede ver anunciado en su blog oficial

Una mejor experiencia de Blogger en la web - Blog Oficial de Blogger - (A better Blogger experience on the web) - 2020

Interfaz que al momento puede estar presentando algunas incidencias, uno de los aspectos que se ha llegado a ver es que en la nueva interfaz no es posible modificar el Favicon porque dicho elemento no aparece relacionado en la opción de [Diseño], algo que ya está reportado al equipo de Blogger.

- Estoy intentando añadir mi favicon, pero no me da la opción, porfa necesito ayuda!! - Foro de Ayuda de Blogger

Si se quiere modificar y se está utilizando la nueva versión de la interfaz de Blogger, lo mejor es retornar a la versión clásica temporalmente, realizar el cambio y luego retornar a la nueva versión.

¿Ya personalizaste el favicon de tu blog para que se muestre en los resultados de búsqueda de Google?

Buscar este blog