<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PWMBPK" height="0" width="0" style="display:none;visibility:hidden">

Qué son los Favicons y cómo añadirlos en las SERPs

¿Cómo se pueden añadir favicons a los resultados de búsqueda de Google? Google puede mostrar los logotipos de los sitios web directamente en los resultados de búsqueda. Aunque han estado disponibles en los dispositivos móviles durante bastante tiempo, los favicons también se están probando actualmente para los ordenadores de sobremesa. Los favicons son una excelente forma de distinguir tu marca cuando se trata de mostrar los resultados de búsqueda. ¡Hoy te mostraremos cómo agregar favicons!

favicons

ÍNDICE

  1. Qué aspecto tienen los favicons en Google y cómo agregarlos

  2. Qué requisitos tienes que cumplir para poder mostrar los favicons

  3. Cómo cambiar el color de la barra del navegador 

Con la ayuda de este artículo podrás usar favicons para destacar entre la multitud y ser recordado por tus clientes potenciales.

¡Vamos a ello! 

¿Qué aspecto tiene un favicon en Google? 

El año pasado Google añadió favicons a los resultados de búsqueda de los móviles. En lo que respecta al diseño del motor de búsqueda, este cambio podría considerarse un gran avance. 

hombre usando un móvil

La decisión se basó en el hecho de que:

  • Con el nuevo diseño, la marca de los sitios web se haría más visible. 

  • El diseño de las páginas de resultados ayudaría a los usuarios a comprender mejor la información mostrada. 

  • Los usuarios de Internet podrían elegir más fácilmente los sitios en los que confían.

Además, los anuncios en los resultados de los móviles muestran la palabra "publicidad" en lugar de favicons. Esto se muestra junto a la URL de la página.

término de búsqueda trusted shops

El nuevo diseño de los resultados de búsqueda en los dispositivos móviles ha sido un éxito. Por lo tanto, Google comenzó a probar favicons en las SERP de escritorio.

Como puedes observar, los favicons se están convirtiendo en una prioridad para Google.

image (1)

Así que, los favicons pueden ayudar a una marca a destacarse de la competencia. Sin embargo, no querrás que tu página se muestre con un icono por defecto, ¿verdad?

En la siguiente sección, te mostraré cómo crear tu propio favicon.

¿Cómo creo un favicon?

Los propietarios de tiendas o sitios web suelen utilizar el logotipo de su empresa como su favicon. Puedes hacer lo mismo, pero la pregunta es ¿cómo puedes hacerlo?

La herramienta Favicon.io es muy útil para este propósito.

favicon_io-sp-2x

Sólo tienes que arrastrar el archivo con tu logo a la herramienta y se generarán automáticamente los favicons.

Observa el ejemplo con el logo de eTrusted en la sección de vista previa de la captura de pantalla.

Una vez que hayas descargado el archivo, encontrarás favicons ya preparados en varios tamaños y formatos en el archivo ZIP:

favicon trusted shops

También puedes crear tu propio favicon con letras y un fondo de color. A continuación te muestro un ejemplo con mis iniciales (SB):

inicjaly-favicon_io-2x

Como puedes ver, la herramienta Favicon.io es muy útil y no se limita a simples archivos de imágenes.

Un buen favicon puede ser tan llamativo como un Google Ad... ¡Descarga nuestra checklist gratuita para crear un Google Ad que llame la atención de los usuarios!

New Call-to-action

¿Cuáles son los requisitos técnicos para mostrar los favicons?

Google ha definido los requisitos técnicos para los favicons. Con respecto a esto, deberías saber una cosa:

Si no cumples los requisitos de Google, tu favicon no aparecerá en los resultados de búsqueda. 

Sin embargo, recuerda que Google no puede garantizar que tu favicon se muestre, aunque cumplas los requisitos técnicos.

Aunque Google lo indica en su manual oficial de Google, no es muy probable que esto ocurra.

Así que estos son los requisitos que Google ha establecido para los favicons:

1. La página de inicio y el archivo de favicon deben ser indexables

Esto significa que no pueden tener el parámetro no-índice establecido en el archivo robots.txt (o en cualquier otro lugar). Si nunca has modificado el archivo robots.txt, entonces todo debería funcionar correctamente. 

2. Los favicons deben representar tu sitio web

Google exige que tus favicons sean únicos y estén vinculados a tu sitio web. El propósito de mostrar tu favicon en los resultados de búsqueda es facilitar a los usuarios de Internet encontrar el contenido que les interesa. 

3. El archivo de favicon debe tener un tamaño y formato específico

Aunque Google cambia automáticamente el tamaño de los favicons que encuentra en una página a 16x16 píxeles, exige que los propietarios de los sitios web tengan un formato de archivo más grande.

Los favicons deben ser de 48x48 píxeles, 96x96 píxeles o 144x144 píxeles.

Básicamente, puedes usar el favicon de 512x512 píxeles como el principal definido en el archivo HTML.

4. Disponibilidad bajo una URL específica

Tu favicon tiene que ser encontrado con una URL específica y no puede ser una dirección dinámica. Si cambias la URL, Google puede perder el favicon en tu índice por un tiempo.

¿Cómo añado un favicon a mi página web?

Puedes añadir un favicon a tu página web usando una etiqueta en el código HTML.

Para un icono en formato .ico:

<link rel="icon" type="image/x-icon" href="favicon.ico" />

Para un icono en formato .png:

<link rel="icon" type="image/png" href="favicon.png" />

Se debe insertar una etiqueta en la sección <head>.

También puede utilizar instrucciones y/o integración para tu CMS:

Información extra: Introduce el color de tu marca en tu navegador

Los navegadores móviles permiten a los sitios web cambiar el color de la barra superior. Gracias a esto, una empresa puede aumentar su conocimiento de marca o Brand awareness y ser reconocida por los clientes potenciales.

kolorowy-pasek-2x

Para lograr este efecto, puedes insertar la siguiente etiqueta en el código de la página:

<meta name="theme-color" content="#f73e3e" />

#f73e3e es el código de color, así que esto cambiará dependiendo de qué color quieres usar para la barra del navegador. Debe ser en formato HEX. Puedes descargar un color en este formato desde la página de códigos de color HTML.

Introduce el código anterior en la sección <header> de tu página, como en el ejemplo:

theme-color-2x
Conclusión 

En este artículo has aprendido cómo añadir un favicon a tu página web y ahora es tu turno! Si muestras tu favicon en las SERPs de Google, te ayudará a ser reconocido aún más rápido y a aumentar el conocimiento de tu marca! 

Las buenas imágenes de productos son esenciales para convertir a los visitantes de tu tienda en clientes. ¡Descarga ahora nuestro libro blanco gratuito para optimizar tus fotos de producto

Checklist sobre fotos de producto

 

0 Comentarios