Favicon : définition, utilité et tailles à connaître
Le favicon est la petite icône qui représente un site web. On le voit dans l’onglet du navigateur, dans les favoris et l’historique, sur l’écran d’accueil du téléphone et à côté du nom du site dans les résultats de Google.
D’où vient le mot « favicon » ?
C’est la contraction de l’anglais favorite icon, « icône des favoris ». Internet Explorer l’a introduit en 1999 pour afficher une icône à côté des sites enregistrés dans le menu « Favoris ». Le nom est resté, même si le favicon apparaît aujourd’hui presque partout.
Où s’affiche le favicon ?
- Les onglets du navigateur : c’est grâce à lui qu’on retrouve votre onglet parmi d’autres
- Les favoris et l’historique
- Les résultats de Google, à côté du nom du site, sur mobile comme sur ordinateur
- L’écran d’accueil de l’iPhone et d’Android quand on y ajoute votre site
- Les aperçus de liens dans certaines messageries et lecteurs RSS
À quoi sert un favicon ?
Sans favicon, le navigateur affiche une page blanche ou un globe. Le site paraît inachevé et l’onglet est plus difficile à repérer. Dans Google, un favicon clair aide à reconnaître votre site avant même le clic.
Un bon favicon, c’est quoi ?
Le favicon s’affiche parfois en 16×16 pixels seulement. Les meilleurs sont donc simples :
- une forme marquée ou une à trois lettres
- un fort contraste entre l’icône et le fond
- les couleurs de votre marque
Les petits détails, les traits fins et les mots longs disparaissent à cette taille.
Les tailles et fichiers à prévoir
| Fichier | Utilisation |
|---|---|
| favicon.ico (avec 16, 32, 48) | Presque tous les navigateurs |
| favicon-16x16.png, favicon-32x32.png | Onglets du navigateur |
| apple-touch-icon.png (180×180) | Écran d’accueil iPhone et iPad |
| android-chrome-192x192.png, 512x512.png | Android et PWA |
Comment créer un favicon gratuitement
Le plus simple est d’utiliser le générateur de favicon gratuit : choisissez votre logo et téléchargez tout le jeu de fichiers avec le code HTML. Sans logo, vous pouvez créer un favicon à partir d’une lettre ou d’un emoji. Pour qu’il apparaisse aussi dans Google, lisez « Favicon Google : comment l’afficher dans les résultats ».