Favicon y tu marca online: ¡Seguro vas a destacar!
Icono de favoritos o «Favicon», esa imagen cuadrada de 16px por 16px que puede ser pequeña pero no insignificante. Su impacto e importancia en la experiencia de usuario es vital para las marcas. Favicon y tu marca online: ¡Seguro vas a destacar!.
Que es un favicon?
Es el identificador visual de un sitio web, como la foto de tu DNI o Pasaporte. Suele aparecer en las pestañas de los navegadores, en los marcadores o listas de historial. Algunos buscadores lo agregan junto al titulo del sitio web.
Los favicon juegan un papel importante en la percepción del usuario sobre tu marca o sitio web. Bien creado, aporta una impresión duradera en los visitantes. También potencia el SEO y fortalece la imagen visual de tu marca.
Mal diseñado resta profesionalismo y seriedad a tu marca. Ademas dificulta la identificación y el recuerdo por parte de los usuarios. Si no existe denota falta de compromiso con la marca o dejadez.
Importancia de los Favicon
Dentro del branding el favicon es una minúscula parte, pero muy importante. Es un ancla visual muy potente que refuerza la identidad de marca. Recuerda el «swoosh» de Nike o la manzana de Apple o la «f» de Facebook.
Por pequeño que sea el icono, será reconocible al instante. Esa es la importancia de un favicon y ahí reside su importancia. Hoy en día trabajamos con el multitasking y solemos tener muchas ventanas abiertas en el navegador. Si trabajamos con varios programas como pasamos de uno a otro….. pinchando en su pestaña, pero tenemos tantas!!!.
Favicon y tu marca online: ¡Seguro vas a destacar!
La experiencia de usuario es otra parte importante. Todos queremos fluidez e intuición a la hora de trabajar. Los favicon nos proporcionan una forma rápida y fácil de identificar las pestañas abiertas simultáneamente. Una mirada al favicon y tenemos localizada la pestaña que deseamos.
En esta época donde lo móvil inunda nuestras vidas, el favicon a tomado un nuevo uso. Se han transformado en iconos de aplicación. Que se llamen asi es por comodidad pero hagamos un ejercicio practico. Busca una aplicación de tu móvil en un ordenador y mira la pestaña del navegador. Son el mismo?.
Beneficios que ofrece
Este chiquitín ofrece algunos beneficios a nuestra marca, directa e indirectamente. Da a entender que cuidamos al detalle nuestra marca. Por ende tambien cuidamos nuestros productos, trabajos y servicios al detalle.
Contribuye al reconocimiento y la confianza de la marca, aumentando la pregnancia de la misma en el usuario. Denota seriedad y profesionalismo generando una mayor participación y tiempos de estancia más largos. Esto a su vez ayuda a aumenta el SEO de tu marca y bajar las tasas de rebote.
Combinado con otras estrategias como la visibilidad, la experiencia de usuario o el branding, mejora los resultados de búsqueda de tu sitio.
Crea tu propio Favicon
En este post no voy a extenderme demasiado en el diseño de los favicon. Eso lo dejaremos para un tutorial con EGO. Pero básicamente debes generar una imagen representativa de tu marca. Usa tu editor de imágenes habitual y crea tu icono en un lienzo de 256px por 256px.
Guárdalo como png o jpeg y lo convertiremos al formato de los favicon. Este formato se llama .ico y se puede conseguir con los generadores de favicon. En internet hay mil maneras de hacerlo, yo os diré mi forma.
Vamos a la página convertico.com y subimos nuestra imagen le damos a convertir y esperamos. El archivo que nos genera solo sirve para utilizarlo en Html. Si utilizas gestores de contenido como WordPress, Magento, Joomla, etc etc, no necesitas este archivo.
Estas plataformas tienen sus códigos internos y simplemente necesitas subir una imagen png de aprox 500px y listo.
Si por el contrario eres un purista como Mac y deseas utilizar Html, te indico como implementar tu favicon.
Problema y soluciones
Una de las frustraciones más grandes de un diseñador web, es terminar todo el código y que el favicon no aparezca. Si esto ocurre puede deberse a varios factores como el tipo de formato, el tamaño o incluso el código.
Respecto al código solo puedo comentarte que verifiques que esta correcto. Una simple coma puede generar horas de frustración, una simple coma….
Si no es el código y sigue sin aparecer, prueba estos consejos:
- Borrar la Caché del Navegador: Los navegadores a menudo almacenan en caché los favicons, por lo que uno recién subido podría no aparecer de inmediato. Borra la caché de tu navegador e intenta recargar tu sitio web.
- Verificar la Ruta del Archivo: Asegúrate de que el archivo favicon.ico esté colocado en la ubicación correcta (el directorio raíz de tu sitio web) y que el código HTML que lo referencia tenga la ruta correcta.
- Verificar el Formato y las Dimensiones del Archivo: Asegúrate de que tu favicon esté en formato ICO (o PNG como alternativa) y que tenga las dimensiones correctas (16×16 píxeles es el estándar). Si has utilizado un generador, debería haberse encargado de esto por ti.
- Actualización Forzada: A veces, se necesita más que una simple actualización. Intenta una actualización forzada (Ctrl+Shift+R o Cmd+Shift+R) para obligar al navegador a obtener la última versión de tu favicon.
Tamaños habituales y adaptación
Si trabajas en Html puede crear una carpeta exclusiva y colocar todos los tamaños ahí dentro bien organizados. Los gestores de contenido generan los distintos tamaños a partir de una imagen (bastante grande). Ademas existen algunos plugins que se encargan de adaptar el favicon al tamaño requerido por cada dispositivo.
No todos tienen una vista de halcón y adaptar tu favicon visualmente para gente con déficit de visión es un punto a favor de tu marca. También consigues una audiencia más amplia y empatia con todos tus posible clientes. Algunos pasos a seguir pueden ser:
- Proporcionar Texto Alternativo: Incluye texto alternativo descriptivo para tu favicon. Los lectores de pantalla leerán este texto en voz alta, permitiendo que los usuarios con discapacidades visuales comprendan el propósito del ícono. Por ejemplo, el texto alternativo podría ser «Favicon del sitio web» o «Logotipo de la empresa.»
- Elegir Colores Contrastantes: Asegúrate de que los colores de tu favicon tengan suficiente contraste para ser fácilmente distinguibles para usuarios con baja visión o daltonismo. Puedes usar verificadores de contraste en línea para asegurarte de que tu favicon cumpla con las pautas de accesibilidad.
- Evitar Destellos o Parpadeos: Si estás usando un favicon animado, asegúrate de que no destelle o parpadee demasiado rápido, ya que esto puede desencadenar convulsiones en algunas personas.
Conclusión
Invertir tiempo y esfuerzo en crear un favicon bien diseñado y optimizado, es mejorar la profesionalidad, la memorabilidad y la efectividad general de tu sitio web.
La clave es asegurarte de que se alinee con la identidad de tu marca y proporcione una experiencia positiva para tus visitantes.
El favicon no es solo un pequeño icono, es una poderosa herramienta que ayuda a tu sitio web a destacar en la salvaje jungla digital. Favicon y tu marca online: ¡Seguro vas a destacar!
