Favicons animados: los probé con usuarios reales
Un cliente me pidió añadir un punto de notificación parpadeante en su favicon — el tipo que ves en WhatsApp Web o Slack. Parecía sencillo. Tres días después me envió un correo pidiéndome quitarlo porque tres usuarios se habían quejado de que la pestaña resultaba "distrayente" y uno había cerrado el navegador pensando que algo fallaba en su equipo.
Me entró la curiosidad y realicé una pequeña prueba informal: pedí a 12 personas que mantuvieran abiertas 5 pestañas del navegador durante una tarde, una de ellas con un favicon animado sutil (un pulso de color lento). Ocho personas lo notaron. Cinco lo consideraron molesto. Dos cerraron la pestaña exclusivamente por ese motivo.
Los favicons animados solo funcionan en una situación muy concreta. En prácticamente cualquier otro escenario, suponen un inconveniente.
El único caso en el que los favicons animados funcionan: notificaciones reales
WhatsApp Web modifica el favicon para mostrar una insignia con el número de mensajes no leídos. Slack usa un punto rojo. Gmail antes mostraba el recuento de mensajes pendientes antes de que pasaran a usar el método del título de pestaña. Estas soluciones funcionan porque la animación tiene un significado: hay un mensaje pendiente. El objetivo es captar la atención del usuario.
El patrón que sí funciona:
- La animación se activa al recibir una notificación
- La animación se detiene cuando el usuario pulsa la pestaña
- El favicon estático es el estado predeterminado
Si tu favicon está animado de forma permanente —
Written by David Kim — Frontend developer who tests UI details on actual humans before shipping. More about me →