Potencia tu marca y usabilidad con favicons

Los favicons son las imágenes pequeñas de 16x16 pí­xeles (en algunos casos pueden medir 32x32) que se utilizan como gráfico de identificación de marca en el lado izquierdo de las pestañas de URL de los navegadores. El nombre se deriva del concepto introducido por primera vez por Internet Explorer de Microsoft. Favicon es la abreviatura de 'favorito' e 'icono' y se ve en la barra de marcadores del navegador IE, conocida como la barra de favoritos.

Los favicons aparecen en los resultados de búsqueda móvil de Google para el fragmento de búsqueda de una página.

Los favicons también aparecen en las pestañas del navegador. Echa un vistazo al ejemplo del favicon de WooRank, que se muestra a continuación entre muchos otros:

Estos iconos también aparecen junto a una página en las secciones de marcadores de un navegador.

En el ejemplo que se muestra arriba, el navegador tiene numerosas 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. Los favicons también son visibles cuando marcas un sitio web en un navegador. Esta captura de pantalla fue tomada de Google Chrome, pero otros navegadores siguen la misma lógica.

Un favicon ayuda con las siguientes funciones:

• Marca.
• Fácil identificación por parte del usuario (función de usabilidad).
• Da un aspecto profesional al sitio.

Además de ser un elemento complejo de marca y 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, como se muestra a continuación:

En esta imagen, el sitio de muestra presenta 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 los usuarios identifican su sitio.

Este efecto es aún más pronunciado cuando el favicon predeterminado aparece en los resultados de búsqueda móvil de Google, donde se compara fácilmente con otras URL que muestran un favicon.

Sin un favicon, si tu etiqueta de tí­tulo no describe el contenido en dos o más palabras, los usuarios tendrán que hacer clic en él para ver a qué sitio que pertenece el marcador, lo cual se vuelve tedioso.

Este es un ejemplo de algo pequeño, como un favicon, que marca la diferencia para la marca y la usabilidad de un sitio.

Algunas de las imágenes tí­picas utilizadas como favicon son:

1. El logotipo o una parte del logotipo: WooRank.
2. La primera letra de la marca: Wikipedia.
3. Una imagen que representa gráficamente de qué trata el sitio en particular: Google Analytics.
4. Una mezcla de los puntos 2 y 3: Amazon.

Cuando se trata del diseño de un favicon, siempre debes recordar mantenerlo simple y apegarse a algo que se asocie fácilmente con su marca o color de su sitio web. Diseñar y agregar un favicon a tu sitio web solo toma unos minutos.

Sigue los pasos que se detallan a continuación para generar tu favicon y agregarlo a tu sitio web:

• Prepara una imagen cuadrada perfecta de tu logotipo o la primera letra de tu sitio (o cualquier otra imagen personalizada diseñada para este propósito).
• Utiliza generadores de favicon gratuitos en lí­nea como favicon.cc o favicon-generator.org.
• Genera una imagen de 16x16 pí­xeles (tamaño de archivo recomendado para todos los tipos de navegadores).
• Descarga el archivo favicon. El archivo estará en formato .ico, por ejemplo favicon.ico. Las imágenes de favicon también pueden ser tipos de archivo .gif, .png o .jpg, pero los navegadores como IE no aceptan archivos .png. El tipo de archivo favicon estándar recomendado es .ico.
• Necesitas acceso a tu directorio raí­z para agregar este archivo. Puedes hacerlo escribiendo lo siguiente en tu navegador:

ftp://usuario@tusitioweb.com

Ahora presiona enter y el navegador te pedirá un nombre de usuario y contraseña.

• Carga tu archivo favicon.ico en la carpeta raí­z.
• Después de cargar tu favicon, debes realizar una llamada en la sección <head> de los documentos (X)HTML de tu sitio web. Para hacer esto, agrega el siguiente código al HTML de tu sitio web abriendo la ventana FTP y buscando y descargando el archivo 'index.html' de tu servidor. Inserta el siguiente código en la sección <head> de tu archivo index.html:

<link rel="SHORTCUT ICON" href="http://www.example.com/favicon.ico"/>

• Carga el archivo de nuevo en tu servidor.

Una vez que hayas agregado un favicon a tu sitio web, pruébalo en todos los navegadores web. No hay razón para no tener un favicon, ya que son fáciles de implementar y son importantes para el reconocimiento del sitio, la marca y la usabilidad. Un sitio rico en experiencia de usuario suele ser uno que también obtiene un puntaje alto en SEO.