El favicon dinámico: el pequeño ícono de la pestaña que puede contar cosas

Mirá tus pestañas abiertas: cada una tiene un ícono chiquito al lado del título. Se llama favicon y, aunque mide apenas 16 píxeles, es lo que más vemos de un sitio cuando tenemos veinte pestañas abiertas. Casi todos los sitios lo usan como un logo quieto. Pero también puede moverse y cambiar.

Qué es un favicon dinámico

Es un favicon que cambia según lo que pasa en la página. El ejemplo más conocido es el del correo: cuando llega un mensaje nuevo, el ícono muestra un numerito con los no leídos. Así te enterás sin cambiar de pestaña.

Ideas de uso

• Notificaciones: un punto rojo cuando hay un mensaje nuevo en el chat de soporte.
• Estados: un ícono verde cuando un proceso terminó y uno amarillo mientras está en curso, por ejemplo al subir un archivo o generar un reporte.
• Temporizadores: un reloj que avanza en la pestaña de una herramienta de productividad.
• Personalidad: un ícono que guiña un ojo cuando volvés a la pestaña, o que cambia según el modo claro u oscuro.

Cómo funciona, sin tecnicismos

El navegador busca el favicon en una etiqueta del código de la página. Si con JavaScript reemplazamos esa imagen por otra, la pestaña se actualiza al instante. La imagen nueva se puede dibujar en el momento, por ejemplo el logo con un número encima, o elegir entre varias ya preparadas.

No te olvides de lo básico

Antes de pensar en animaciones, el favicon tiene que estar bien hecho: en todos los tamaños que piden los distintos dispositivos (la pestaña, el acceso directo del celular, el ícono de la app). Para eso armé un generador de favicons dentro de las herramientas de mi portfolio, que crea todos los tamaños a partir de una sola imagen.

Con moderación

Un favicon que parpadea todo el tiempo cansa. La clave es usar el cambio solo cuando aporta información. Bien usado, es una de las formas más discretas y efectivas de mantener a alguien al tanto.