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.
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.
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.
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.
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:
- 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.
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.
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.
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 🙂