Favicons animés (GIF et JavaScript)
Un favicon animé est généralement un GIF animé utilisé comme icône ; Firefox et certaines versions de Chromium le jouent dans l'onglet, tandis que Safari et d'autres n'affichent que la première image. Les sites utilisent surtout l'animation pour signaler une activité en direct (un indicateur de chargement, un nombre de non-lus, un point d'enregistrement), souvent en permutant l'icône depuis JavaScript plutôt qu'en s'appuyant sur un GIF. Pour une marque, une icône statique est plus claire et plus largement prise en charge.
La prise en charge est inégale, alors traitez-le comme une amélioration
Un GIF animé référencé comme favicon se joue dans Firefox et certaines versions de Chromium, mais Safari et plusieurs autres n'affichent que la première image. L'animation ne peut donc jamais être porteuse de sens : tout ce que l'icône doit dire doit être lisible dans cette seule première image.
De ce fait, la plupart des favicons « animés » dans la nature ne sont pas du tout des GIF. C'est un script qui redessine l'icône depuis un canvas et permute le href de la balise link : un indicateur pendant un chargement, un point rouge pendant un enregistrement, ou un nombre de non-lus peint par-dessus la marque. Cela donne un contrôle précis et fonctionne partout via le même mécanisme de permutation de lien.
La voie JavaScript pour l'état en direct
Pour afficher un badge de non-lus ou un point d'état, dessinez chaque état sur un canvas, exportez-le, et définissez le href du lien de favicon sur le résultat. Le navigateur met à jour l'icône de l'onglet à la volée. C'est ainsi que les applications de messagerie et de chat mettent un nombre dans l'onglet, et cela se dégrade proprement en une icône statique là où le scripting est désactivé.
FAQ sur le favicon animé
Les favicons animés fonctionnent-ils dans Chrome et Safari ?
La prise en charge est inconstante. Firefox anime les favicons GIF, Chromium est aléatoire, et Safari n'affiche généralement que la première image. Ne comptez jamais sur le fait que l'animation soit vue.
Comment afficher un nombre de non-lus dans le favicon ?
Dessinez l'icône plus le badge sur un canvas en JavaScript, puis définissez le href du lien de favicon sur la sortie du canvas. Mettez-le à jour chaque fois que le nombre change. C'est la même technique qu'utilisent les applications de messagerie et de chat.
Devrais-je utiliser un favicon animé ?
Pour une marque, non. Une icône statique est plus claire et universellement prise en charge. Réservez l'animation à un véritable état en direct, et implémentez-la avec une permutation de lien en JavaScript plutôt qu'avec un GIF.