Puede que no te suene el término Favicon pero has visto, e incluso conoces, cientos de ellos. El favicon es un pequeño icono que nos ayuda a identificar un sitio web en las pestañas de un navegador, en los favoritos o marcadores, en el historial o en cualquier otro tipo de listado de los sitios webs que visitas o has visitado.
Generalmente esta imagen estará directamente relacionada con la marca del sitio web, intentando comprimir a un tamaño muy pequeño toda la carga simbólica de tu empresa o identidad. En GIGA4 podrás ver que usamos una G negra y un 4 blanco contenido en un cuadrado cuyo fondo es el turquesa corporativo.
¿Para qué sirve un Favicon?
Es un símbolo que transmite la imagen corporativa aún y cuando el sitio web no está en el primer plano del navegador ya que también aparece cuando está en una pestaña. Por lo que el usuario podrá ver nuestra imagen de marca cada vez que fije su mirada en la cabecera de su navegador.
Además permitirá al sitio web ser fácilmente identificable cuando un usuario tiene abiertas varias pestañas en el navegador o en sus marcadores, ayudándole a volver al sitio de un vistazo.
¿Cómo ha de ser un Favicon?
Como antes he mencionado, el Favicon es una imagen muy pequeña, en un ordenador convencional se mostrará una imagen de 16 píxeles de ancho por otros 16 píxeles de alto, por lo que condensar ahí tu identidad puede ser una tarea realmente compleja.
Si bien existen dispositivos en los que ese favicon puede ser mucho más grande, hasta 512 x 512 píxeles.
Aquí te dejo algunos consejos para conseguir un icono que destaque:
- No uses un fondo transparente, por defecto el fondo de las pestañas sobre las que se mostrará el icono puede ser de distintos colores según la pestaña esté visualizándose o no, y dependiendo del navegador, el sistema y su configuración, por ello es muy recomendable usar un fondo, puede ser un fondo blanco, pero ha de ser algo que permita al favicon verse en el mayor número de casos posibles.
- No intentes poner texto, el tamaño con el que estás trabajando es muy pequeño por lo que un texto no cabe, así que nada de querer poner Galván e Hijos S.L. en esa imagen. Si tienes un símbolo distintivo úsalo, sino busca algo que te caracterice.
- No lo cargues de detalles. Volvemos a encontrarnos con el problema de su tamaño, a mayor detalle mayor será el icono que tengas que usar, pero a la hora de mostrarse siempre será de 16×16 con lo cual, al reescalar la imagen todos esos detalles se perderán, dando lugar a un batiburrillo de píxeles sin forma ni color definido.
Detalles, el desarrollo web está lleno de detalles.