À propos : Générateur de favicon
Le favicon est la petite icône d’un site affichée dans l’onglet du navigateur, les favoris, les résultats de recherche et sur l’écran d’accueil des téléphones. Sans favicon, l’onglet affiche une icône vide qui donne une impression de site inachevé, et Google montre une icône générique en forme de globe.
À partir d’un logo ou d’une seule lettre ou emoji, cet outil génère un jeu de favicons à toutes les tailles nécessaires. Les très petites tailles comme 16 px sont dessinées directement à leur taille, au lieu de réduire une grande image, pour rester nettes. Tout se passe dans votre navigateur.
Mode d’emploi
- Choisissez Texte · emoji ou Image. Une ou deux lettres, ou un logo carré, donnent le meilleur résultat.
- Réglez le fond (ou aucun fond), l’arrondi et la marge intérieure. L’aperçu à droite (en dessous sur mobile) montre le rendu à la taille réelle d’un onglet.
- Touchez Tout télécharger (ZIP), décompressez l’archive et envoyez les fichiers à la racine de votre site.
- Copiez le code HTML ci-dessous et collez-le dans la balise
<head>de toutes vos pages.
Fichiers inclus dans le ZIP
| Fichier | Taille | Utilisation |
|---|---|---|
| favicon.ico | 16·32·48 | Tous les navigateurs, résultats Google |
| favicon-16x16.png | 16 | Onglet du navigateur |
| favicon-32x32.png | 32 | Onglet haute résolution, barre des tâches |
| favicon-48x48.png | 48 | Raccourcis Windows, résultats de recherche |
| apple-touch-icon.png | 180 | Écran d’accueil iPhone et iPad |
| android-chrome-192x192.png | 192 | Écran d’accueil Android |
| android-chrome-512x512.png | 512 | Écran de démarrage d’une PWA installée |
| site.webmanifest | - | Icônes et nom pour Android |
L’écran d’accueil de l’iPhone ne gère pas la transparence (le fond apparaît noir) : même sans fond, apple-touch-icon.png est enregistré sur fond blanc.
Un favicon lisible même en tout petit
- À 16 px, les traits fins et le petit texte deviennent illisibles. Un symbole ou une seule initiale se voit mieux que le logo complet.
- Prévoyez un fort contraste entre le fond et le texte. Pour rester visible dans les onglets en mode sombre, un fond coloré est plus sûr qu’un fond transparent.
- Si l’ancien favicon s’affiche encore après le changement, c’est le cache du navigateur : rechargez avec Ctrl+Maj+R ou ajoutez
?v=2après le nom du fichier.
Questions fréquentes
Un fichier ICO ne suffit-il pas ?
Pour les navigateurs de bureau, favicon.ico suffit. Mais pour l’ajout à l’écran d’accueil sur iPhone ou Android, il faut des PNG de 180, 192 et 512 px. Envoyez tous les fichiers du ZIP et ajoutez le code HTML pour couvrir tous les appareils.
Mon favicon n’apparaît pas dans les résultats Google.
Google recommande un favicon dont la taille est un multiple de 48 px, et la prise en compte peut prendre de quelques jours à quelques semaines. Vérifiez aussi que le fichier n’est pas bloqué par le robots.txt.
Puis-je l’utiliser avec WordPress, Wix ou Shopify ?
Oui. La plupart des créateurs de sites permettent d’importer un favicon dans leurs réglages. En général, un seul PNG de 512 px ou le favicon.ico suffit.
Mon logo est-il stocké sur un serveur ?
Non. Le favicon est créé dans votre navigateur et l’image n’est envoyée nulle part.