Un favicon es el pequeño icono que aparece en la pestaña del navegador, en los marcadores y en los resultados de búsqueda junto al nombre de tu sitio web. Es pequeño, a menudo de solo dieciséis píxeles de ancho, pero hace un gran trabajo: ayuda a los visitantes a reconocer tu sitio de un vistazo entre veinte pestañas abiertas. Los sitios sin favicon muestran un icono genérico de página en blanco, que parece inacabado y hace que el sitio sea más difícil de encontrar de nuevo. Un favicon claro y sencillo convierte una pestaña anónima en una marca reconocible, y no cuesta nada añadirlo una vez que tienes el archivo adecuado.
Esta herramienta convierte cualquier imagen en un favicon real. Sube un logotipo o un gráfico sencillo, y recorta la imagen a un cuadrado, luego la representa a dieciséis, treinta y dos, cuarenta y ocho y sesenta y cuatro píxeles para que puedas ver cómo se ve en cada tamaño. Después construye un archivo .ico genuino de varios tamaños, el formato que esperan los navegadores, que contiene las versiones de dieciséis, treinta y dos y cuarenta y ocho píxeles en un solo archivo. También puedes descargar una versión PNG de quinientos doce píxeles, que los navegadores modernos y los teléfonos usan para iconos de pantalla de inicio y pestañas de alta resolución.
El diseño importa más en tamaño favicon que en ningún otro lugar, porque los detalles desaparecen rápido. Un logotipo completo de empresa con texto pequeño se convierte en una mancha ilegible a dieciséis píxeles. Los mejores favicons usan una forma atrevida, uno o dos colores fuertes y ningún texto, o como mucho una letra grande. Piensa en los sitios más reconocibles que visitas: sus iconos de pestaña son marcas sencillas que podrías dibujar de memoria. Antes de generar, simplifica tu imagen si hace falta: recorta bien el símbolo principal, aumenta el contraste y pruébalo a dieciséis píxeles antes de decidir.
El recorte cuadrado merece una explicación. La mayoría de los logotipos son rectángulos anchos, pero los favicons deben ser cuadrados, así que esta herramienta recorta el cuadrado central de tu imagen. Si tu logotipo tiene detalles importantes cerca de los bordes, esos detalles pueden cortarse, así que prepara primero una versión cuadrada de tu logotipo, con el símbolo centrado y aire alrededor. Un logotipo con fondo transparente también funciona bien, porque el fondo de la pestaña del navegador se ve a través, pero un color de fondo sólido a menudo se lee mejor en tamaños diminutos, ya que da al contorno un límite claro.
Instalar el favicon es sencillo una vez que tienes el archivo. Coloca favicon.ico en la carpeta raíz de tu sitio web, la misma carpeta que tu página de inicio, porque los navegadores buscan allí de forma automática. Para un control total, añade también una etiqueta de enlace en la sección head de tus páginas que apunte al archivo, lo que indica a todos los navegadores exactamente dónde encontrarlo. Limpia la caché de tu navegador después de instalarlo, porque los navegadores guardan los favicons con insistencia, y de lo contrario podrías seguir viendo el icono viejo, o ningún icono, durante días después de que el archivo nuevo esté publicado.
Hay algunos límites honestos. Esta herramienta construye un archivo .ico estándar y un PNG, pero no genera el conjunto completo de iconos táctiles de Apple, iconos de manifiesto de Android e iconos adaptables que una aplicación grande podría querer, y esos necesitan archivos y código extra. Para la mayoría de blogs, tiendas y sitios de pequeñas empresas, sin embargo, el .ico más un PNG grande cubre bien navegadores, pestañas, marcadores y accesos directos de teléfono. Si tu sitio crece hasta convertirse en una aplicación, puedes ampliar el conjunto más adelante, empezando por el mismo logotipo cuadrado.
Una buena rutina es diseñar una vez y reutilizar en todas partes. Crea un logotipo cuadrado, genera el favicon a partir de él, y usa la misma marca para tus avatares de redes sociales, tu firma de correo y el encabezado de tu sitio. La constancia construye reconocimiento más rápido que cualquier icono aislado, porque los visitantes encuentran la misma marca en cada lugar. Comprueba tu icono de pestaña después de publicar, tanto en un tema de navegador claro como en uno oscuro, y ajusta los colores si desaparece en uno de ellos. Un favicon es diminuto, pero es la cara de tu sitio en el lugar más concurrido de la web: la barra de pestañas.