Vérification du favicon
Une petite image représente votre site dans les onglets, les favoris, les écrans d’accueil des téléphones et les résultats de recherche et chacun veut un fichier différent. Cette vérification télécharge chaque icône que vous publiez et la mesure.
Un logo, quatre demandes différentes
Le mot « favicon » remonte à 1999, quand Internet Explorer 5 s’est mis à chercher un fichier nommé favicon.ico pour décorer le menu Favoris. Ce carré de 16 pixels est encore demandé aujourd’hui, mais il n’est plus seul. Le fichier récupéré dépend de l’appareil du visiteur :
| Où il apparaît | Fichier utilisé | Taille |
|---|---|---|
| Onglet du navigateur, favoris, historique | favicon.ico, ou un PNG ou SVG déclaré avec rel="icon" | 16 à 48 px, ou vectoriel |
| Écran d’accueil de l’iPhone et de l’iPad | rel="apple-touch-icon" | 180 × 180 px |
| Écran d’accueil d’Android, application web installée | Icônes listées dans le manifeste web | 192 et 512 px |
| Résultats Google sur téléphone | Le fichier rel="icon" | Un multiple de 48 px, ou vectoriel |
Quand le bon fichier manque, chaque système se rabat sur pire. Vous obtenez un symbole de page blanche dans l’onglet, une minuscule capture de votre page sur iOS, une lettre dans un cercle gris sur Android, un globe dans Google.
Ce qui est téléchargé et mesuré
La vérification lit le HTML de la page indiquée et recueille chaque <link> dont le rel est icon, apple-touch-icon ou mask-icon, plus le lien manifest et les icônes que ce fichier liste. Puis elle ajoute deux adresses que les navigateurs essaient sans qu’on le leur dise : /favicon.ico et /apple-touch-icon.png.
Jusqu’à 16 fichiers sont récupérés. Nous ne croyons pas l’attribut sizes déclaré sur parole. Un fichier ICO est ouvert pour lister les tailles qu’il contient, un SVG est lu pour son viewBox et les fichiers PNG ou JPEG sont mesurés en pixels. Pour l’icône Apple, les coins sont échantillonnés pour détecter la transparence. Un fichier qui se révèle être une page d’erreur HTML est signalé comme tel et avec /favicon.ico cette surprise est fréquente.
Lire la liste de contrôle
- Favicon classique
- Réussi avec un fichier ICO, ou un PNG de 16, 32 ou 48 px. Échec quand rien de tel n’existe et avertissement quand un SVG est la seule icône, puisque les lecteurs de flux, les anciens navigateurs et beaucoup d’outils demandent
/favicon.icoet rien d’autre. - Icône SVG
- Facultative. Un fichier vectoriel reste net à toute taille et peut changer ses couleurs en mode sombre.
- Icône Apple
- Échec si elle est absente. Avertissements : plus petite que 180 px, fond transparent (iOS le peint en noir), ou fichier présent à l’adresse par défaut sans balise dans la page.
- Manifeste
- Avertissement quand la page n’en référence aucun. S’il en référence un qui ne se charge pas ou n’est pas du JSON valide, c’est un échec. À l’intérieur, une icône de 192 px manquante est un échec, une icône de 512 px manquante un avertissement et une icône « maskable » manquante une simple note.
- Couleur du thème
- Facultative.
<meta name="theme-color">teinte la barre du navigateur sur Android. - Taille acceptée par Google
- Avertissement, sauf si une icône carrée mesure un multiple de 48 px (48, 96, 144, 192) ou est un SVG.
Un échec donne le verdict « Incomplet », un avertissement « Presque ». Les maquettes au-dessus de la liste montrent l’icône que chaque système choisirait parmi ce que vous publiez.
Un jeu complet à partir d’un seul dessin
Partez d’une version carrée de votre logo, simplifiée jusqu’à ce qu’on le reconnaisse encore à 16 pixels. Exportez ces fichiers :
favicon.icoavec des images de 16, 32 et 48 px à l’intérieur, placé à la racine du site.icon.svg, si votre logo existe en vectoriel.apple-touch-icon.png, 180 × 180, sur fond uni avec une marge d’environ 20 px. iOS arrondit les coins lui-même.icon-192.pngeticon-512.pngpour le manifeste.icon-maskable-512.png, avec le logo dans les 80 % centraux du carré, car Android peut rogner l’image en cercle.
Puis déclarez-les :
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Les résultats incluent ce bloc et un site.webmanifest correspondant avec le nom de votre site déjà rempli.
La vérification vous dit que les fichiers existent et ont les bonnes dimensions. Elle ne peut pas dire si le dessin est lisible à 16 px ou s’il rend bien sur une barre d’onglets sombre. Regardez les maquettes, puis un vrai téléphone.
Questions fréquentes
Quelle taille doit avoir un favicon ?
Il en faut plusieurs. Fournissez un favicon.ico contenant 16, 32 et 48 px, un PNG de 180 px pour les appareils Apple et des PNG de 192 et 512 px dans un manifeste web. Une icône SVG peut couvrir toutes les tailles d’onglet à la fois dans les navigateurs actuels.
Pourquoi Google affiche-t-il un globe au lieu de mon favicon ?
Google veut une icône carrée multiple de 48 px ou un SVG, déclarée avec rel="icon" sur la page d’accueil et accessible à Googlebot (non bloquée dans robots.txt). Une fois corrigée, la nouvelle icône apparaît quand la page d’accueil est explorée de nouveau, ce qui peut prendre des jours ou quelques semaines.
Ai-je encore besoin d’un fichier favicon.ico ?
Oui. Les navigateurs acceptent le PNG et le SVG, mais beaucoup d’autres programmes demandent directement /favicon.ico : lecteurs de flux, services d’aperçu de lien, certains gestionnaires de mots de passe et anciens navigateurs. Sans lui, votre serveur consigne aussi une erreur 404 pour chacune de ces requêtes.
Pourquoi mon icône a-t-elle un fond noir sur iPhone ?
L’apple-touch-icon a des zones transparentes et iOS remplit la transparence de noir. Exportez le PNG sur un fond opaque de la couleur de votre marque.
J’ai changé mon favicon. Pourquoi vois-je toujours l’ancien ?
Les navigateurs gardent les favicons dans leur cache plus longtemps que presque tout autre fichier. Ouvrez directement l’adresse de l’icône et rechargez-la, ou ajoutez une version au lien, par exemple href="/favicon.ico?v=2". Les moteurs de recherche se mettent à jour à leur propre rythme.
Qu’est-ce qu’une icône maskable ?
Une icône dessinée avec une marge supplémentaire pour qu’Android puisse la rogner en cercle, en carré arrondi ou en toute autre forme sans entamer le logo. Vous la déclarez dans le manifeste avec "purpose": "maskable". Sans elle, Android réduit votre icône normale et la place sur un disque blanc.