Guide pratique pour le déploiement de favicon de site web : fichiers, déclarations et actualisation du cache

Un package de favicon standard contient 5 types de fichiers, qui s'adaptent à différents appareils et navigateurs. Le favicon.ico au format ICO est un format traditionnel, proposé principalement en tailles 16×16, 32×32 et 48×48. Placer ce fichier à la racine du site web permet sa reconnaissance automatique par les anciennes versions d'IE.

Les icônes multi-tailles au format PNG sont utilisées par les navigateurs modernes et les appareils mobiles, avec des tailles courantes incluant 16×16, 32×32 et 180×180. L'apple-touch-icon est conçu spécifiquement pour iOS Safari, pour afficher une icône nette quand l'utilisateur ajoute le site web à son écran d'accueil. Le fichier de manifeste Web fournit la configuration de l'icône pour les applications PWA, s'adaptant au scénario d'ajout à l'écran d'accueil sur les systèmes Android.

L'ordre de déclaration suit la règle de compatibilité descendante : déclarez d'abord les formats modernes à haute priorité, puis utilisez les formats traditionnels comme solution de secours. L'ordre spécifique est : déclarez d'abord l'icône au format PNG 32×32, puis l'apple-touch-icon, et enfin le favicon au format ICO.

Toutes les balises link doivent avoir un attribut rel et un attribut size corrects. Les icônes PNG nécessitent l'attribut sizes pour marquer la taille correspondante. L'apple-touch-icon a une taille par défaut de 180×180, donc un marquage de taille supplémentaire peut être omis. Le fichier manifeste nécessite l'attribut rel="manifest" pointant vers le chemin de fichier correspondant.

Lorsque vous utilisez App Router dans Next.js 13+, vous devez placer favicon.ico à la racine du répertoire app, et Next.js gérera automatiquement la sortie des routes. Les fichiers PNG multi-tailles, l'apple-touch-icon et le fichier manifeste peuvent être placés dans le répertoire app/public, et référencés avec un chemin racine absolu. Si vous utilisez Pages Router, vous pouvez placer tous les fichiers directement dans la racine du répertoire public.

Lors du déploiement d'un favicon pour un thème WordPress personnalisé, vous pouvez placer tous les fichiers de favicon dans le sous-dossier assets du répertoire du thème, ou les télécharger directement à la racine du site web, puis ajouter les déclarations de balises link correspondantes via le fichier functions.php du thème. Certaines versions de WordPress prennent en charge le téléchargement de favicon via le menu Apparence → Personnaliser dans l'administration, et le système génère automatiquement les déclarations et les chemins.

Les navigateurs mettent en place un cache fort à long terme pour les favicon des sites web, la plupart des navigateurs de bureau ayant une période de cache supérieure à 7 jours. Après modification du favicon, un simple rafraîchissement de la page ne déclenchera pas de nouvelle requête du navigateur pour obtenir le nouveau fichier, ce qui provoque l'affichage continu de l'ancienne icône.

La méthode de mise à jour la plus fiable consiste à ajouter un paramètre de requête de version à l'URL de la ressource favicon. Par exemple, changez href="/favicon.ico" en href="/favicon.ico?v=2". Après modification du paramètre, le navigateur le traite comme une nouvelle ressource et demande directement le dernier fichier, en contournant le cache d'origine. Vous pouvez également effacer le cache du navigateur et revoir la page, mais cette méthode n'est adaptée que pour le débogage local par les développeurs, et ne peut pas affecter le cache des utilisateurs finaux.

Après le déploiement, vous devez vérifier l'état d'affichage de l'icône dans plusieurs scénarios pour confirmer l'effet d'adaptation un par un. Vérifiez d'abord l'affichage de l'icône dans l'onglet du navigateur de bureau, et contrôlez que les tailles 16×16 et 32×32 sont nettes. Vérifiez ensuite l'affichage de l'icône dans la barre de signets du navigateur, et confirmez que l'adaptation de la taille est correcte.

Les appareils mobiles nécessitent la vérification de deux scénarios : l'affichage de l'icône après ajout du site web à l'écran d'accueil dans iOS Safari, et l'affichage de l'icône après ajout d'une PWA Android à l'écran d'accueil. Enfin, vérifiez le code source du site web pour confirmer que tous les chemins des balises link sont corrects, et qu'il n'y a pas d'erreur 404 causée par des chemins relatifs incorrects. Vous pouvez utiliser le panneau réseau dans les outils développeur du navigateur pour confirmer que tous les fichiers d'icône renvoient un code d'état 200.