Favicons animados (GIF y JavaScript)
Un favicon animado suele ser un GIF animado usado como icono; Firefox y algunas compilaciones de Chromium lo reproducen en la pestaña, mientras que Safari y otros muestran solo el primer fotograma. Los sitios usan la animación principalmente para señalar actividad en vivo (un indicador de carga, un recuento de no leídos, un punto de grabación), a menudo intercambiando el icono desde JavaScript en vez de depender de un GIF. Para una marca, un icono estático es más claro y tiene mayor compatibilidad.
La compatibilidad es dispar, así que trátalo como una mejora
Un GIF animado referenciado como favicon se reproduce en Firefox y algunas compilaciones de Chromium, pero Safari y varios otros renderizan solo el primer fotograma. Así que la animación nunca puede ser esencial: lo que el icono necesite comunicar tiene que ser legible en ese primer fotograma por sí solo.
Por eso, la mayoría de los favicons "animados" que hay por ahí no son GIF en absoluto. Son un script que redibuja el icono desde un canvas e intercambia el href de la etiqueta link: un indicador mientras algo carga, un punto rojo mientras se graba, o un recuento de no leídos pintado sobre la marca. Eso da control preciso y funciona a través del mismo mecanismo de intercambio de enlaces en todas partes.
La vía de JavaScript para el estado en vivo
Para mostrar una insignia de no leídos o un punto de estado, dibuja cada estado en un canvas, expórtalo y establece el href del enlace del favicon en el resultado. El navegador actualiza el icono de la pestaña sobre la marcha. Así es como las apps de correo y de chat ponen un número en la pestaña, y degrada con elegancia a un icono estático donde el scripting está desactivado.
Preguntas frecuentes sobre el favicon animado
¿Funcionan los favicons animados en Chrome y Safari?
La compatibilidad es inconsistente. Firefox anima los favicons GIF, Chromium ha sido irregular, y Safari normalmente muestra solo el primer fotograma. Nunca confíes en que la animación se vea.
¿Cómo muestro un recuento de no leídos en el favicon?
Dibuja el icono más la insignia en un canvas con JavaScript, luego establece el href del enlace del favicon en la salida del canvas. Actualízalo cada vez que cambie el recuento. Es la misma técnica que usan las apps de correo y de chat.
¿Debería usar un favicon animado?
Para una marca, no. Un icono estático es más claro y tiene compatibilidad universal. Reserva la animación para el estado en vivo genuino, e impleméntalo con un intercambio de enlace en JavaScript en vez de un GIF.