Favicon animé et icône ICO statique de secours

Un favicon animé repose sur un comportement du site Web qu’il faut vérifier dans les navigateurs visés. ImgConvert permet de préparer une icône ICO statique de secours à partir de la première image d’un GIF. L’outil ne propose aucune option de conservation de l’animation et ne génère pas de fichier ICO animé.

Qu’est-ce qu’un favicon animé ?

Un favicon, abréviation de l’anglais « favorite icon » (icône de favori), est la petite icône qui s’affiche dans l’onglet du navigateur, les favoris et la barre d’adresse. Un favicon animé va plus loin en faisant défiler plusieurs images pour créer un effet de mouvement visible dans l’onglet.

Les usages courants comprennent :

• Indicateurs de notification — Une pulsation ou un clignotement signale de nouveaux messages
• Animations de chargement — Une icône tourne pendant le traitement d’un contenu
• Identité de marque — Une animation discrète du logo exprime la personnalité de la marque
• Événements saisonniers — Des icônes animées temporaires accompagnent les fêtes ou les promotions

Préparer une première image utile

Choisissez un symbole simple qui reste reconnaissable à 16×16 ou 32×32 pixels. Si le GIF commence par une image vide ou un fondu d’entrée, sélectionnez d’abord une meilleure image fixe dans un éditeur d’images. Le convertisseur ne permet pas de choisir une image dans l’animation.

Principes de conception de l’animation

Les conseils suivants constituent des points de départ pour concevoir une animation dans un éditeur distinct. Ils ne décrivent ni des limites ni des réglages du convertisseur ICO. Adaptez le rythme au mouvement réel et évitez les clignotements inutiles.

Rester simple

Les meilleurs favicons animés restent sobres. À une taille de 16×16 à 32×32 pixels, la complexité nuit à la lisibilité :

• 2 à 4 images maximum pour la plupart des effets
• Un mouvement simple — Pulsation, clignotement, rotation ou glissement
• Une silhouette nette à chaque image
• Un rythme lent — 500 ms ou plus par cycle d’images

Adapter le rythme au type d’animation

La règle de la première image

Le convertisseur utilise la première image pour produire le fichier ICO statique. Cette image doit se suffire à elle-même, que l’animation mise en place séparément fonctionne ou non :

• Un symbole de marque reconnaissable sans contexte
• Un rendu net à 16×16 comme à 32×32 pixels
• Un bon contraste avec les interfaces claires et sombres des navigateurs
• Aucun texte, illisible à la taille d’un favicon

Créer un favicon étape par étape

Les conseils suivants constituent des points de départ pour concevoir une animation dans un éditeur distinct. Ils ne décrivent ni des limites ni des réglages du convertisseur ICO. Adaptez le rythme au mouvement réel et évitez les clignotements inutiles.

Étape 1 : concevoir les images

Créez 2 à 4 images distinctes pour votre animation :

Pour une pulsation de notification :

• Image 1 : icône normale, dans son état de base
• Image 2 : icône légèrement lumineuse ou agrandie
• Image 3 : retour à l’état normal pour une boucle fluide

Pour une animation de chargement :

• Image 1 : icône en position 12 heures
• Image 2 : icône en position 3 heures
• Image 3 : icône en position 6 heures
• Image 4 : icône en position 9 heures

Étape 2 : exporter les images séparément

Exportez chaque image au format PNG en 32×32 pixels :

• Exportez le PNG avec un canal alpha si l’image doit être transparente.
• Conservez un fond transparent lorsque c’est nécessaire
• Visez moins de 5 Ko par image

Étape 3 : assembler le GIF

Réunissez les images dans un GIF animé :

Créer l’archive d’icônes ICO statiques

1. Ouvrez le convertisseur GIF en ICO et sélectionnez un GIF de 20 Mo maximum.
2. Sélectionnez les tailles nécessaires : 16, 32, 48, 64, 128 ou 256 px. Les tailles 32, 64 et 128 sont présélectionnées.
3. Lancez la conversion, téléchargez puis extrayez icons.zip.
4. Utilisez une icône individuelle ou le fichier favicon.ico inclus, qui contient toutes les tailles sélectionnées. Il s’agit de variantes de taille d’une seule image fixe, pas des images d’une animation.

Les images rectangulaires sont ajustées dans le carré avec des marges transparentes. Un fond opaque dans l’image source reste opaque. Pour obtenir un ensemble de fichiers pour site Web comprenant des icônes PNG et un manifeste, utilisez le générateur de favicon.

Installer l’icône de secours sur votre site

Après avoir déployé le fichier extrait à la racine de votre site, référencez-le dans l’en-tête de la page :

<link rel="icon" href="/favicon.ico">

Adaptez le chemin à votre déploiement. Le convertisseur n’installe pas de fichiers et ne modifie pas votre site. La référence MDN sur la valeur icon décrit la déclaration HTML.

Si le favicon doit être animé

Conservez l’animation d’origine. Utiliser une image animée comme favicon ou changer les images de l’icône avec du JavaScript sur le site constitue une mise en œuvre distincte. Ne supposez pas qu’un fichier animé dans une visionneuse d’images le sera aussi dans un onglet, un favori ou un raccourci. Testez chaque navigateur requis et prévoyez une icône statique de secours lisible.

Exemple JavaScript pour un site Web

La personne qui développe le site peut essayer de modifier l’URL d’un lien de favicon existant. Ce code appartient au site Web : importer un GIF ici ne l’ajoute pas à un site et n’y installe pas d’animation. Conservez des fichiers statiques pour chaque image et partez d’une icône statique exploitable.

L’exemple ci-dessous alterne entre deux URL de PNG toutes les 500 ms lorsque la page est visible. Il s’arrête lorsque la page est masquée ou que la réduction des animations est demandée. Il illustre le mécanisme de mise à jour, sans garantir que l’animation fonctionnera dans tous les onglets, favoris ou raccourcis du système d’exploitation. Testez le contexte réel d’utilisation avant de vous y fier.

<link id="favicon-demo" rel="icon" type="image/png" href="/icon-1.png">
<script>
  const icon = document.getElementById('favicon-demo');
  const frames = ['/icon-1.png', '/icon-2.png'];
  const motion = window.matchMedia('(prefers-reduced-motion: reduce)');
  let timer = null;
  let frameIndex = 0;

  function stopAnimation() {
    if (timer !== null) window.clearInterval(timer);
    timer = null;
    frameIndex = 0;
    icon.href = frames[0];
  }

  function syncAnimation() {
    stopAnimation();
    if (document.hidden || motion.matches) return;
    timer = window.setInterval(() => {
      frameIndex = (frameIndex + 1) % frames.length;
      icon.href = frames[frameIndex];
    }, 500);
  }

  document.addEventListener('visibilitychange', syncAnimation);
  motion.addEventListener('change', syncAnimation);
  syncAnimation();
</script>

Quand utiliser un favicon animé, et quand l’éviter

Usages adaptés

Usages peu adaptés

Optimiser les performances

Limitez le nombre d’images, arrêtez l’animation lorsque sa notification n’est plus pertinente et testez la page avec et sans animation. Un intervalle plus court ne produit pas forcément un meilleur favicon. Évitez de lancer plusieurs minuteurs pour la même icône. Si vous intégrez ce code dans un composant, retirez les écouteurs d’événements et arrêtez le minuteur lorsque le composant est détruit. L’exemple présenté est un code de page autonome.

Le guide MDN de l’API Page Visibility explique le signal de visibilité utilisé ici. L’animation visuelle doit compléter un message d’état accessible dans la page, car une icône seule risque de ne pas être vue ou annoncée.

Vérifier le résultat

• Ouvrez l’URL de l’icône déployée et vérifiez les petites tailles.
• Si l’ancienne icône reste affichée, vérifiez les déclarations d’icônes existantes et le cache du navigateur.
• Testez l’animation séparément du téléchargement de l’ICO statique.

Vérifiez chaque navigateur et appareil que vous prenez réellement en charge, avec une nouvelle session et une session utilisant le cache. Testez la première image, les mouvements mis en place séparément, la préférence de réduction des animations et le retour depuis un onglet masqué. Examinez le symbole à 16×16 et 32×32 pixels sur les interfaces claires et sombres des navigateurs. Si l’animation manque de fiabilité, conservez l’icône statique de secours. Les objectifs de taille de fichier sont des budgets propres au projet, pas des limites universelles des navigateurs.

Questions fréquentes

Sélectionner plusieurs tailles ICO conserve-t-il l’animation du GIF ?

Non. Toutes les tailles proviennent de la première image. Il n’existe pas d’option pour conserver l’animation.

Puis-je choisir une autre image de l’animation ici ?

Non. Préparez l’image fixe souhaitée dans un autre outil, puis utilisez le convertisseur PNG en ICO si vous l’avez enregistrée en PNG.

Pourquoi l’ancien favicon apparaît-il encore ?

Vérifiez que l’URL du fichier déployé se charge, recherchez d’éventuelles déclarations d’icônes concurrentes et comparez une nouvelle session de navigateur à une session utilisant le cache. Les icônes d’onglets, les favoris et les raccourcis installés peuvent utiliser des fichiers ou des caches différents. Modifier un lien sur une page ne remplace pas toutes les icônes enregistrées.

Le CSS seul peut-il animer l’icône d’un onglet ?

L’animation CSS d’une image dans une page Web n’anime pas l’icône de l’onglet du navigateur. Un fichier animé référencé directement ou un essai de changement d’URL par JavaScript constituent des mises en œuvre distinctes : testez le comportement attendu dans les navigateurs requis.

Quelle quantité de mouvement utiliser ?

Utilisez seulement le mouvement nécessaire pour communiquer l’état voulu. Un badge statique peut parfois être plus clair. Évitez les clignotements rapides, conservez une image fixe reconnaissable et vérifiez le comportement lorsque la réduction des animations est activée. Évaluez le rythme à la petite taille d’affichage réelle plutôt que sur un grand aperçu.