Si te fijas en las pestañas de tu navegador web, verás que el título de las páginas va acompañado de un pequeño icono. Es el favicon y, como vamos a ver en este artículo, configurarlo es bastante sencillo y ayuda a dar un aspecto profesional a tu sitio web y a definir tu identidad visual.
Qué es un favicon
Un favicon es un icono en miniatura que identifica una marca en un navegador web. Se encuentra a la izquierda de la pestaña de navegación.
De esta forma, al tener abierta esta pestaña, el favicon con nuestro logo nos ayuda a recordar visualmente que la página web que tenemos abierta pertenece al sitio web de Webolto. Aparecerá en cualquier página de nuestro sitio web que el usuario tenga abierta: la página principal o home, pero también un artículo de blog como este, nuestro comparador de programas para crear un sitio web, etc.
La pestaña del navegador es la ubicación más visible de los favicons, pero no la única. Estos iconos en miniatura también ayudan a identificar las páginas web en las siguientes ubicaciones:
- La lista de marcadores o páginas favoritas del navegador. Los favicons se muestran a la izquierda del título de las páginas guardadas ayudan a identificar visualmente el sitio web al que pertenecen las distintas páginas web guardadas como «favoritas» en los marcadores del navegador. El título con el que una página se identifica en la lista de marcadores se puede editar, pero el favicon no.
- Las páginas de resultados de búsqueda (SERP) en la navegación móvil. Al realizar una búsqueda en Google desde el móvil, los favicons identifican los sitios web a los que pertenecen los distintos resultados. Por ejemplo, en el siguiente resultado para la búsqueda «peluquería Valladolid», el primer y tercer resultado incluyen un favicon, mientras que el segundo favicon es un icono del globo terráqueo, la imagen genérica que muestra Google cuando no se ha configurado ningún favicon específico.
Tener un favicon no es obligatorio cuando creas un sitio web. En el caso de carecer de él, Google Chrome lo sustituirá por el icono genérico de un globo terráqueo, mientras que Firefox lo omitirá mostrando únicamente el texto del título de la página.
Sin embargo, como veremos más adelante, crear un favicon es muy fácil y prescindir de él es una oportunidad perdida. A continuación, vamos a ver por qué.
Por qué tiene importancia el favicon
El favicon no mejora por sí solo el posicionamiento SEO de una página web. Por tanto, es posible que te preguntes si un simple icono en miniatura es tan importante para dedicarle un artículo entero e integrarlo como un elemento de la estrategia digital de la marca.
El favicon sí contribuye de forma considerable a algo importante: la imagen corporativa y su continuidad. Es importante que los mismos colores, formas, logos… se transmitan siempre la empresa se comunica con su audiencia. Tener un favicon que represente el logo de la empresa o una versión simplificada del mismo ayuda a extender la visibilidad de la marca y a identificarla de forma rápida y de un solo vistazo. Estos aspectos aparentemente tan sutiles son cruciales para que la marca se reconozca fácilmente en el mercado (brand awareness).
Además, en la navegación web y móvil, las imágenes sencillas como los favicons tienen una gran importancia para orientarnos, más allá de los textos. Un ejemplo común es el momento en el que tenemos muchas pestañas abiertas en el navegador.
En esta situación, los iconos de favicon resultan de gran utilidad para identificar con un solo golpe de vista dónde está cada pestaña: el correo, las redes sociales, Google Drive, los documentos de Google, el blog de Webolto, etc. Si nos tuviésemos que orientar solo por los textos, sería más difícil o como mínimo menos intuitivo, ¿verdad?
Cómo crear un favicon
El tamaño estándar de un favicon es de 16×16 píxeles y así es cómo lo vemos en el navegador. Es decir, es un tamaño verdaderamente pequeño. Para hacerte una idea, el tamaño estándar de un icono de escritorio es de 96×96 píxeles, y siguen siendo bastante pequeños.
Por ello, el favicon debe ser una versión extremadamente simplificada de tu logo. Normalmente, si el logo incluye una forma vectorial sencilla, se puede usar como favicon. Es lo que hacemos en Webolto, con el icono del cohete, una imagen sencilla y fácilmente identificable que identifica la marca y sus valores: ofrecer recursos a las empresas para ayudarlas a despegar en su estrategia digital.
Otras empresas conocidas que basan su favicon en formas geométricas con Airbnb, Brevo y —un ejemplo muy típico— Nike.
Pero no todas las marcas tienen una identidad gráfica que les permite recurrir a lo anterior. No es buena idea inventar una forma geométrica para el favicon si después no tiene continuidad en el sitio web. Si el logo completo está basado en el nombre de la marca, lo mejor es simplificarlo hasta dejarlo en una o pocas letras.
La letra utilizada suele ser la primera, pero no siempre es así. Por ejemplo, la empresa Swipcar de renting de vehículos emplea la “W”.
Aunque no seas un/a diseñador/a experto/a, tendrás que realizar un trabajo básico de edición de imágenes para crear tu favicon. Para ello, puedes usar una herramienta como Canva, tan sencilla como útil. El objetivo en este momento simplemente es crear una imagen cuadrada. En los generadores de favicons que veremos en el siguiente epígrafe, podrás darle el tamaño y el formato adecuados.
Debes tener en cuenta que esta imagen cuadrada con el logo simplificado no solo sirve para crear el favicon. Puede resultar útil, por ejemplo, como foto de avatar de tus perfiles en redes sociales.
Definir el logo y la identidad corporativa de tu marca son dos pasos previos a la creación del favicon. Si estás en esa fase, no te pierdas nuestros recursos para ayudarte:
Generadores de favicons
Un favicon es un archivo especial de imagen de 16×16 píxeles con la extensión .ico. Los generadores de favicons en línea son la opción más sencilla para dar el formato adecuado la imagen cuadrada que has creado siguiendo las indicaciones del epígrafe anterior.
Hay muchos generadores de favincons en el mercado, la mayoría gratuitos. Estos son algunos de los más destacados:
Favicon Generator
Un generador de favicon sencillo que convierte las imágenes en formato JPG, GIF o PNG en formato .ico. Es necesario que la imagen introducida sea perfectamente cuadrada y no ofrece muchas opciones adicionales, pero cumple su función principal.
Favico
Es otra herramienta sencilla y grsatuita para convertir las imágenes en formato .ico. Su generador de favicon crea rápidamente archivos de 16×16 o 32×32.
Favicon.io
Generador de favicons bastante práctico que, además, ofrece algunas posibilidad adicionales si andas mal de tiempo o necesitas un favicon provisional: crear un favicon directamente a partir de un texto (recuerda, una o dos letras como máximo) o usar un emoticono como favicon.
Favicon.cc
Favicon.cc también ofrece el servicio clásico de conversión de una imagen PNG, GIF o JPG en formato ICO. Además, ofrece la posibilidad de crear el favicon directamente en su interfaz, útil si el tiempo juega en tu contra.
Prodraw
Prodaw es una herramienta de edición sencilla de imágenes en línea que, además de la conversión en formato ICO, también ofrece otros servicios útiles como el redimensionamiento de imágenes, la generación de imágenes para Google Maps y la descarga de botones web, entre otros.
En el momento de escritura de este artículo, no dispone de certificado SSL actualizado, por lo que la confidencialidad de las imágenes podría no estar asegurada.
Faviconer
Faviconer es una herramienta que permite tanto importar un archivo de imagen y convertirlo en ICO como diseñar el Favicon desde cero en su interfaz (con opciones limitadas, como es habitual).
En el momento de escritura de este artículo, no dispone de certificado SSL actualizado, por lo que la confidencialidad de las imágenes podría no estar asegurada.
Genfavicon
Genfavicon es una herramienta gratuita en línea que te permite convertir una imagen en cualquier formato en un favicon funcional para tu sitio web. También ofrece la posibilidad de recortar directamente una imagen para quedarse con una parte, lo que —nuevamente— puede venir bien como solución provisional o socorrida.
Real Favicon Generator
Además de los formatos clásicos (PNG, JPG, etc.), Real Favicon Generator admite imágenes en formato SVG para convertirlas en formato ICO. Esta herramienta gratuita también ofrece la posibilidad de analizar el favicon de tu sitio web, si ya tienes uno. Comprueba la compatibilidad con distintos sistemas operativos y navegadores.
Logaster
Logaster es un servicio de imagen corporativa más íntegro que no solo incluye el favicon. También ofrece, por ejemplo, el logo en alta resolución sobre fondo blanco a un precio de 19,99 euros.
DesignEvo
DesignEvo es otra plataforma que ofrece un servicio de diseño íntegro que no solo abarca el favicon. Esta plataforma también permite diseñar un logo gratis con su interfaz de creación asistida.
Como añadir un favicon a un sitio web: HTML y WordPress
Añadir un favicon en HTML
Ahora que ya dispones del archivo de extensión .ico, debes integrarlo en el código fuente del sitio web. El favicon tiene que ir en la sección <head> con el siguiente código:
<link rel=’icon’ href=’imagenes/favicon.png’ type=’ico’ />
- El atributo rel siempre tiene el valor «icon»
- El atributo type depende de la extensión de la imagen que quieras utilizar, normalmente será «ico»
- El atributo href es la ruta del archivo de imagen en el sitio web
Añadir un favicon en WordPress
WordPress, el CMS más popular del mundo con el que están creados la mitad de los sitios web, permite integrar un favicon de forma bastante intuitiva. A diferencia de otros métidos, el tamaño óptimo para un favicon en WordPress es de 512 x 512 píxeles, para que la imagen mantenga su calidad y definición, a pesar de que posteriormente se comprime hasta alcanzar el tamaño estándar de 16×16 píxeles, el más común en las pestañas de los navegadores. Existen dos métodos principales para añadir un favicon en WordPress:
A través del área de administrador de WordPress
Este método es directo y no requiere de plugins adicionales. Para empezar, debes acceder al Panel de administración de tu sitio WordPress. Una vez allí, coloca el cursor sobre la opción “Apariencia” y luego selecciona “Personalizar”. Dentro de este menú, encontrarás una sección denominada “Identidad del sitio”, donde podrás realizar los cambios que desees en el favicon.
En la sección “Icono del sitio”, verás un botón que dice “Seleccionar imagen”. Aquí podrás subir el favicon que has preparado previamente, teniendo en cuenta el tamaño recomendado. Una vez subida la imagen, simplemente debes hacer clic en “Publicar” para guardar los cambios.
Configuración del favicon de Webolto en el área de administrador de WordPress
Usar un plugin
Algunos plugins ofrecen de WordPress la posibilidad de realizar pruebas para asegurarte de que el favicon se vea correctamente en distintos dispositivos y navegadores, garantizando así una mayor compatibilidad. El más popular es Favicon by RealFaviconGenerator. Si lo deseas usar, debes descargarlo y seguir las instrucciones del plugin.
Con estos pasos relativamente sencillos, ya tienes un favicon que identificará tu sitio web y tu marca en los navegadores web o móvil. Puede parecer una incorporación sin mucha trascendencia, pero no: en la comunicación digital nunca desdeñaremos lo sutil.
Webolto ES
Deja una respuesta