¿Qué es un favicón? Definición y ejemplos

Los faviconos no solo son importantes para las páginas web desde el punto de vista del diseño. Entre otros aspectos, este icono de imagen facilita a los usuarios la navegación en Internet y el uso de dispositivos e influye en el posicionamiento de la web en los buscadores.

¿Qué significa favicón?

Se trata de un pequeño icono de imagen con un importante impacto. Puede estar situado, por ejemplo, en la parte izquierda de una pestaña del navegador y permite, en este caso, que el usuario mantenga en todo momento la vista general de todas las páginas abiertas. Los faviconos suelen mostrar un logo simplificado o una imagen que se relaciona fácilmente con la página web correspondiente. Es decir, la importancia del favicón reside en su capacidad para orientar al usuario cuando está navegando en Internet o usando un dispositivo. Además, permite fortalecer la presencia de una web.

No hay un favicón ideal: su diseño varía según las características de una marca. No obstante, teniendo en cuenta que el propio icono solo cuenta con unos pocos píxeles, es mejor no optar por logos sofisticados cargados de detalles. En estos casos, se recomienda usar como favicón una versión más sencilla del logo original.

La importancia del favicón se puede adivinar si se presta atención a los términos que componen esta palabra: por una parte, se encuentra el término inglés “favourite” y, por otra, “icon”. Es decir, con favicón se hace referencia al “icono para favoritos”. Estas imágenes pequeñas aparecen en las pestañas del navegador, pero también en los marcadores de páginas web. Además, en la actualidad los faviconos se pueden encontrar como iconos de aplicaciones, en los menús de búsqueda, en los resultados de búsqueda de algún navegador y en los historiales de navegación.

Consejo

El favicón perfecto en pocos clics: con IONOS puedes crear el favicón perfecto para tu página web y sin coste alguno. Por supuesto, es compatible con todos los navegadores.

¿Qué importancia tiene un favicón?

Hay varias razones que explican por qué un favicón tiene tanta importancia para una página web:

  • Profesionalidad: toda página web profesional dispone de un favicón. Al incluir uno en tu proyecto web, puedes reforzar la confianza de los visitantes en tu marca y demostrar que prestas atención también a los detalles más pequeños. Aunque la mayoría de los usuarios de Internet no sepan qué es un favicón, se darían cuenta inmediatamente de su ausencia.
  • Identificación: el uso de un favicón también responde a razones prácticas. Los usuarios podrán encontrar tu página web con mayor rapidez gracias a este pequeño símbolo, incluso si tienes varias pestañas abiertas al mismo tiempo. El icono también permite a los usuarios identificar tu marca en las listas de aplicaciones o en los motores de búsqueda.
  • Reforzar la marca: una buena imagen de marca facilita que los usuarios puedan reconocerla rápidamente, lo que puede desempeñar un papel importante en su toma de decisiones. Tan importante como la creación del logo, resulta la de un favicón apropiado.

¿Qué efecto tienen los faviconos en el SEO?

Al menos de forma indirecta, el favicón también cuenta con gran importancia en el SEO. Aunque los pequeños iconos no tienen una influencia directa en el posicionamiento en buscadores, hay razones que explican por sí solas por qué resultan importantes:

¿Qué hay que tener en cuenta a la hora de crear un favicón?

Es difícil establecer de forma única qué constituye un buen favicón. Por supuesto, la marca y su línea de diseño van a influir a la hora de crearlo. Aunque muchas empresas utilizan su logotipo como favicón, realmente no siempre puede ser así. Todo depende de si el logo sigue resultando atractivo cuando se reduce su tamaño y su resolución. Es importante conocer algunas de las reglas básicas para crear un favicón adecuado:

  • Identidad corporativa: los ejemplos de faviconos que tienen éxito siempre se ajustan a la identidad corporativa de una empresa. En los casos en los que no puedas usar tu logotipo como favicón, el icono de imagen elegido debe coincidir a primera vista con el resto del diseño. Solo así es posible conservar el carácter distintivo de la marca.
  • Menos es más: dado el reducido tamaño de los faviconos, no es una buena idea incluir en ellos detalles ni diseños sofisticados, sobre todo si se van a mostrar en smartphones. Una buena propuesta de favicón puede incluir únicamente las iniciales de una marca. De hecho, es muy poco común que en un favicón se pueda presentar el nombre completo de una marca. Por ello, tiene más sentido recurrir a la letra inicial o a un icono sencillo pero significativo.
  • Colores adecuados: los colores usados en el favicón también deben respetar la identidad corporativa. Si puedes hacerlo, usar colores que contrasten es una buena idea, pues de este modo se consigue captar la atención con mayor rapidez. No obstante, ten en cuenta que cada navegador puede mostrar el favicón de forma diferente. Por ejemplo, pueden mostrarse sobre un fondo blanco o gris, lo que puede cambiar ligeramente el impacto del contraste cromático.

¿Con qué tamaño deben cumplir los favicons?

Si deseas incluir un favicón en tu página web, debes respetar el tamaño del favicón. Aunque normalmente las medias son de 16 x 16 píxeles, 32 x 32 píxeles o 48 x 48 píxeles, hay algunos navegadores que no respetan esta norma. Descubre las excepciones:

Navegador o dispositivo Tamaño
Chrome Web Store 128 x 128 píxeles
Google TV 96 x 96 píxeles
Internet Explorer 9 24 x 24 píxeles
iPad Pantalla de inicio 72 x 72 píxeles
iPhone (modelos antiguos) y iPad Touch 57 x 57 píxeles
iPhone 4 Pantalla de inicio 114 x 114 píxeles
Marcador rápido Opera 195 x 195 píxeles
Consejo

Para poner un favicón con html, accede a nuestro artículo.

¿Qué formatos son compatibles?

Los faviconos pueden crearse en diferentes formatos. El más común es .ico, un formato de archivo que permite diferentes profundidades de bits y resoluciones. Además, es compatible con la mayoría de los navegadores. No obstante, en la creación de estos iconos de imagen también se puede usar .png, .gif o .svg., si bien estos formatos no son siempre compatibles con todos los navegadores. El formato .jpg tiene una resolución menor.

Ejemplos de faviconos

Para que te hagas una idea de lo versátiles que pueden ser estos iconos diminutos, te mostramos tres ejemplos conocidos de faviconos.

Google solo incluye su letra inicial en un favicón que destaca por la combinación de colores. De hecho, es el diseño de arco iris lo que diferencia al buscador de la mayoría de los faviconos.

LinkedIn adopta un enfoque diferente y sirve como prueba de que no es necesario que en el favicón se incluya siempre la primera letra del nombre. El “in” blanco sobre fondo azul cuenta con gran alcance y es bien conocido.

YouTube muestra cómo un buen favicón también puede funcionar sin incluir letras. El botón de reproducción, que también pertenece al logo de la empresa, es inconfundible y destaca en cualquier navegador.

En la Digital Guide puedes encontrar numerosos artículos que te resultarán de gran ayuda para tu proyecto online. Además de la guía de estilo perfecta para páginas web, puedes encontrar información sobre cómo añadir un favicón a WordPress, el tamaño de los logos y su formato, así como otros consejos y trucos para la creación de un logo.