Cómo potenciar tu marca y aumentar la visibilidad de tu página web con un favicon

cómo crear un favicon para potenciar tu marca y aumentar la visibilidad de tu página web

Vamos con un ejemplo práctico: abre tu navegador, entra un un sitio web y fíjate en la imagen que aparece en la pestaña del navegador, justo al lado del título de la página. ¿A qué ves una imagen pequeña?. Pues bien, esa imagen se llama favicon y, en el artículo de hoy, os vamos ha hablar de todo lo que has de saber sobre este elemento web y por qué es importante que tu web tenga uno para potenciar tu marca y aumentar la visibilidad de tu página web. ¡Vamos a ello!

Qué es un favicon

Un favicon es un icono pequeño que aparece en el lado izquierdo de la pestaña del navegador, que está asociado a una web y que tienen un gran impacto en la visibilidad de tu web. 

Los favicon son imágenes pequeñas, que según la calidad del icono, pueden tener  un tamaño de 16×16, 32×32, 48×48, 64×64 o 128×128 píxeles y pueden tener la extensión .ico, .png, .gif, .jpg o .svg

Aparecen en las pestañas del navegador.

páginas web con favicon

Los favicons aparecen en los resultados de búsqueda móvil de Google para el fragmento de búsqueda de una página. Además, también aparecen junto a una página en las secciones de marcadores de un navegador.

favicon-en-marcadores

Para qué sirve un favicon

El favicon, además de ser un elemento más de tu branding, hace que tu web destaque entre la competencia y que tu marca sea más fácil de reconocer. 

Pongamos un ejemplo, en el navegador tenemos varias páginas abiertas de modo que todo lo que un usuario puede ver es el favicon de cada página. No puede ver los nombres o los títulos de las páginas en las pestañas abiertas del navegador, por lo que la única forma de identificar qué pestaña pertenece a qué marca es mirando el favicon del sitio web. 

favicon ayuda a identificar páginas

Además de ser un elemento de branding y de usabilidad, los favicons también dan la impresión de un sitio construido profesionalmente. Cuando un sitio no tiene favicon, la imagen predeterminada que muestra un navegador es la de un icono de globo genérico, dando la impresión de un negocio no profesional que no ha hecho ningún esfuerzo para mejorar el diseño del sitio o ayudar a los usuarios a identificar su sitio.

web sin favicon

Por tanto, tener un favicon en nuestra página web nos ayuda a:

  • Mejorar la experiencia de usuario: Como el usuario tiende a fijar su mirada en la esquina superior izquierda del navegador, la presencia de este icono de página web ayuda a identificar visualmente tu página y a distinguirla del resto de pestañas cuando tiene muchas abiertas.
  • Branding: contribuye al branding y a la visibilidad de tu página web porque ayudan a que el usuario guarde en su memoria la imagen de tu marca y la reconozca fácilmente dentro y fuera de tu página web. 
  • Profesionalidad: Los favicons añaden autenticidad y profesionalidad a tu página web. Transmiten la imagen de que tu página ha sido cuidadosamente diseñada.

Cómo crear un favicon

Existen dos formas de crear un favicon: utilizando un editor gráfico o con un generador online. En este artículo os vamos a enseñar a crearlo desde un generador online ya que partimos de la base que quizá no sepas utilizar un editor gráfico o quizá, no dispones de ninguno. 

Actualmente existen muchas herramientas online que te pueden ayudar a crear tu favicon de forma rápida y fácil. Nosotros, os vamos a citar 2 que consideramos las más conocidas y son gratuitas.

  • Genfavicon: esta herramienta sale por defecto en español pero si lo prefieres en otros idiomas, no hay problema, en la parte superior derecha puedes elegir el idioma que quieras. Es nuestra favorita ya que es muy sencilla y puedes crearlo en varios tamaños: 16×16, 32×32, 48×48, 64×64 y 128×128 y acepta diferentes formatos como .jpg, .png o .ico. 
  • Favicon.cc: con esta herramienta puedes importar la imagen que quieres para tu favicon en formatos como .gif, .png y .jpeg y las convierte a archivos .ico para web, Android, Microsoft e iOS. 

Cómo crear uno con genfavicon

Primero, abre la página de genfavicon y verás cómo te muestra los tres pasos que tienes que dar:

proceso para crear favicon con genfavicon
  • Paso 1: Selecciona la imagen que quieres utilizar como favicon y dale a Subir Imagen y verás cómo se carga en la pantalla que hay encima. 
  • Paso 2: selecciona el área de la imagen que quieres exportar como favicon y luego elige el tamaño en el que lo quieres guardar. Nosotros te recomendamos 32×32. Ahora dale a Captura & Previsualización
  • Paso 3: inmediatamente se genera el favicon resultante y un botón para descargarlo en formato .ico o en .jpg

¡Listo, creado en menos de 5 minutos! 

Cómo añadir o cambiar un favicon en wordpress

Antes para poder añadir un favicon en wordpress era necesario instalar un plugin pero desde la versión 4.3, WordPress ya permite añadirlo desde el panel de control.

Lo primero que tenemos que hacer es iniciar sesión en el Panel de Administrador de nuestro WordPress y buscar en el menú lateral Apariencia. Pincha en Apariencia > Personalizar.

cómo añadirlo con wordpress

Se te abrirá una pantalla para personalizar el tema que tienes instalado. Pulsa en Cabecera > Identidad del Sitio y busca Icono del Sitio. Dale a Cambiar Imagen o Seleccionar, dependiendo de si ya tienes un archivo favicon subido o no.

icono del sitio para crear favicon

Sube el favicon a la biblioteca de WordPress, pinchando en Subir archivo y selecciona el archivo. Una vez que lo tengas localizado, pulsa el botón de Elegir. 

subirlo a wordpress

Una vez subido sólo tienes que darle a Seleccionar y listo. ¡Has visto qué fácil!. En el caso que quieras cambiar tu favicon, simplemente pulsa en el botón de Cambiar y sigue los mismos pasos.

Tips para crear un favicon

Cuando hablamos de diseñar un favicon, parece que lo más lógico sería utilizar tu logo ¿verdad? pues vamos a darte unos pequeños tips para tu favicon, tanto si utilizas tu logo como si optas por otra opción:

  • Simplicidad: su diseño debe ser sencillo, claro y discernible. Apuesta por un favicon con un diseño llamativo, limpio y fácilmente reconocible.
  • Identidad de marca: el favicon debe representar el espíritu de tu página web y marca con el mismo lenguaje visual y esquema de colores  que tu web.
  • Casi sin texto: Mejor sin texto pero si quieres incluir texto, te recomendamos que no uses más de tres caracteres en tu favicon. Puedes usar las iniciales.
  • Color: utiliza colores intensos que llamen la atención. Fíjate por ejemplo en Youtube o en Coca-Cola

Como conclusión, decir que es importante que tu página web tenga un favicon para que se asocie a tu marca y así los usuarios, de un simple vistazo, te identifiquen y ofrecer una imagen más profesional de tu negocio online. 

¿Qué te ha parecido el artículo? ¿Qué le añadirías? ¿Conocías la existencia de los favicons? Déjanos un comentario 🙂

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on pinterest
Pinterest
Share on email
Email
Share on whatsapp
WhatsApp

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Responsable: Assistantgroup
Finalidad: Gestión de los comentarios de las publicaciones
Legitimación: Consentimiento del interesado
Destinatarios: Los datos no se cederán a terceros salvo en los casos en que exista una obligación legal. Los boletines electrónicos o newsletter están gestionados por entidades cuya sede y servidores se encuentran dentro del territorio de la UE o gestionados por entidades acogidas al acuerdo EU-US Privacy Shield.
Derechos: Acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la información adicional. Si no facilitas los datos solicitados como obligatorios, puede dar como resultado no poder cumplir con la finalidad para los que se solicitan