Bonjour,
Dans un précédent post je demandais pourquoi mon favicon animé n'était plus animé. En fait, ce sont les navigateurs modernes qui n'implémentent plus les gif animés pour les favicons.
Il y a cependant une solution pour ceux qui veulent toujours avoir un favicon animé. La première chose est d'avoir les images de l'animation en png. Dans l'exemple qui va suivre, il y a 4 images.
Ensuite, créez un champ script que vous pouvez laisser vide, mais par contre il faudra rajouter les images de l'animation en tant que fichiers additionels. Cela aura pour effet de les copier dans le dossier _fields. De cette manière, elles seront stockées dans la sauvegarde du site.
Ensuite entrez le script qui suit dans le champ Head de vos pages. Le voici:
<link id="dynamic-favicon" rel="icon" type="image/png" href="_fields/frame1.png">
<script>
const frames = ["_fields/frame1.png", "_fields/frame2.png", "_fields/frame3.png", "_fields/frame4.png"];
let index = 0;
setInterval(() => {
index = (index + 1) % frames.length;
document.getElementById("dynamic-favicon").href = frames[index];
}, 200); // vitesse en millisecondes
</script>
Ensuite il vous faudra enlever le favicon si vous en avez un. Si vous ne le faites pas, alors l'animation ne se verra qu'avec Firefox et les autres navigateurs afficheront le favicon fixe que vous n'avez pas enlevé.
L'inconvénient de ce favicon animé, c'est qu'il est stocké sur les moteurs de recherches dans l'état de l'image courante au moment de l'indexation. Pour l'ajout dans les favoris c'est la même chose. À part ça, le problème du favicon animé est résolu. Ça peut peut-être intéresser quelqu'un?