La petite icône à l’impact démesuré
Un favicon est la petite icône affichée dans les onglets du navigateur, les listes de favoris, l'historique du navigateur et, depuis 2019, dans les résultats de recherche mobile de Google. Ces petites images ont un poids de marque disproportionné. La recherche montre que les utilisateurs font la distinction entre les onglets ouverts principalement en utilisant la reconnaissance des favicon, et non le texte de l'onglet. Un favicon manquant ou générique rend votre site plus difficile à trouver parmi plusieurs onglets ouverts.
Tailles et formats des favicons
| Format | Taille | Requis pour |
|---|---|---|
| OIC | 16×16, 32×32 | Prise en charge des anciens onglets du navigateur |
| PNG | 192×192 | Icônes de l'écran d'accueil Android, PWA |
| PNG | 512×512 | Écrans de démarrage PWA, écrans haute résolution |
| Icône tactile Apple | 180×180 | iOS "Ajouter à l'écran d'accueil" |
| SVG | Évolutif | Navigateurs modernes : parfaitement nets, quelle que soit la taille |
La connexion à la recherche Google
Depuis 2019, Google affiche les favicons des sites Web à côté des URL dans les résultats de recherche mobile. Un favicon manquant affiche une icône de globe générique. Un favicon pixélisé ou de mauvaise qualité signale aux utilisateurs – et potentiellement aux signaux de qualité de Google – qu'un site peut être mal entretenu. Garder votre favicon net et à jour est une considération mineure mais réelle en matière de référencement.
Comment ajouter une favicon à votre site Web
- Créez d'abord votre favicon au format PNG 512 × 512
- Générer des ICO (multi-taille : 16, 32, 48) à l'aide d'un convertisseur
- Lieu
favicon.icodans le répertoire racine de votre site - Ajoutez à votre HTML
<tête>:<link rel="icon" href="/favicon.ico"> - Ajouter une icône Apple Touch :
<link rel="apple-touch-icon" href="/apple-touch-icon.png"> - Référencez les icônes 192px et 512px dans votre
manifeste.jsonpour la prise en charge des PWA
Pourquoi certains sites affichent-ils une favicon cassée ?
Les causes les plus courantes : chemin de fichier incorrect dans le HTML, le serveur renvoie un 404 pour favicon.ico ou des restrictions CORS bloquant les requêtes favicon inter-domaines. La plupart des navigateurs mettent en cache les demandes de favicon de manière agressive : effacez le cache de votre navigateur après avoir modifié les favicon.