Qu'est-ce qu'une favicon et comment en créer une depuis votre logo (2026)
Une favicon est la petite icône qui représente votre site dans un onglet de navigateur, un signet ou un écran d'accueil de téléphone. Créez-la à partir du symbole de votre logo, simplifiez-la pour qu'elle se lise à 16-32 pixels, et livrez le jeu de fichiers minimal 2026 : un SVG, un ICO de secours, et une apple-touch-icon de 180×180.
Sur cette page
Qu'est-ce qu'une favicon ?
Une favicon (abréviation de « favorite icon ») est la petite image carrée qui représente un site web dans un onglet de navigateur, un signet, une entrée d'historique et un écran d'accueil de téléphone. C'est presque toujours une version simplifiée du logo d'une marque — plus précisément le symbole, puisqu'il n'y a pas de place pour le nom complet à cette taille.
Pourquoi une favicon compte-t-elle ?
Une favicon est un élément de branding petit mais constant. Avec une douzaine d'onglets ouverts, c'est souvent le seul moyen pour quelqu'un de repérer votre site en un coup d'œil, et une icône enregistrée sur l'écran d'accueil se place à côté d'icônes d'app soignées. Une favicon nette et fidèle à la marque paraît réfléchie ; une favicon manquante ou floue paraît inachevée.
Les tailles et formats de favicon dont vous avez besoin
Vous n'avez pas besoin de la douzaine d'icônes que listent les vieux tutoriels. En 2026, le jeu minimal et fiable est réduit :
| Fichier | Taille | Rôle |
|---|---|---|
favicon.svg | toute | navigateurs modernes ; peut s'adapter au mode sombre |
favicon.ico | 16 + 32 | secours hérité (navigateurs plus anciens) |
apple-touch-icon.png | 180×180 | écran d'accueil iOS |
| Icônes PWA (facultatif) | 192, 512 | applications web installables |
Les tailles comme 64×64, 96×96 et 128×128 que recommandent les vieux guides sont obsolètes —
laissez-les de côté. Le .ico est un secours, pas le fichier principal : les navigateurs qui
prennent en charge le SVG le préféreront.
Comment créer une favicon à partir de votre logo
- Partez du symbole, pas du logo complet — le nom ne se lira pas à la taille d'un onglet.
- Simplifiez pour les toutes petites tailles. Retirez les détails fins, les lignes minces et les dégradés subtils qui disparaissent à 16-32 pixels. Favorisez les formes franches et le fort contraste.
- Gardez-la carrée avec un peu de marge pour qu'elle ne soit pas à l'étroit contre les bords de l'onglet.
- Exportez le jeu — SVG, ICO et le PNG 180×180 — depuis le master vectoriel de votre logo.
Comme le SVG est le format master idéal, il vaut la peine de comprendre SVG ou PNG pour les logos avant d'exporter.
Lier une favicon dans votre HTML
Pointez vers les fichiers depuis le <head> de vos pages. Un jeu moderne et minimal ressemble à
ceci :
<link rel="icon" href="/favicon.ico" sizes="32x32" />
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
Les navigateurs qui prennent en charge le SVG l'utilisent ; les autres se rabattent sur l'ICO.
Bonus : une favicon qui s'adapte au mode sombre
Une favicon SVG peut porter son propre style de mode sombre. Intégrez une media query dans le SVG pour que le signe change de couleur avec le thème du navigateur :
<style>
path {
fill: #18231d;
}
@media (prefers-color-scheme: dark) {
path {
fill: #eef1ea;
}
}
</style>
Chrome, Firefox et Edge honorent ceci ; Safari pas encore, choisissez donc des couleurs qui restent lisibles sur les deux thèmes en secours.
Tester votre favicon
Vérifiez-la dans un vrai onglet de navigateur, en clair et en sombre, et sur un écran d'accueil de
téléphone. Comme les navigateurs mettent les favicons en cache de façon agressive, faites un
rechargement forcé après tout changement — ou cassez le cache en renommant le fichier ou en ajoutant
?v=2. Si elle paraît sale à la taille d'un onglet, simplifiez encore le symbole : la favicon est
le test honnête de la qualité de réduction d'un logo.
Si vous créez votre logo avec LogoSaga, l'export inclut déjà un favicon.svg aux côtés du SVG et du
PNG du logo, la favicon correspond donc toujours exactement au signe.
Questions fréquentes
Quelle taille doit faire une favicon ?
Fournissez un SVG scalable plus des tailles raster PNG : 32×32 est la norme moderne d'onglet, 16×16 la petite taille classique, et 180×180 l'icône Apple touch. Les PWA ont aussi besoin de 192×192 et 512×512.
Quel format pour une favicon — SVG, PNG ou ICO ?
Utilisez un SVG pour les navigateurs modernes, un ICO en secours hérité, et des PNG pour l'apple-touch-icon et les tailles PWA. Le SVG est scalable et peut même s'adapter au mode sombre ; l'ICO couvre les navigateurs plus anciens.
Une favicon peut-elle changer en mode sombre ?
Oui, avec une favicon SVG. Intégrez une media query prefers-color-scheme dans le SVG pour définir les couleurs claires et sombres. Safari ne l'honore pas encore, choisissez donc une couleur neutre qui se lit sur les deux.
Pourquoi ma favicon ne s'affiche ou ne se met pas à jour ?
Les navigateurs mettent les favicons en cache de façon agressive. Après un changement, forcez le rechargement, ou cassez le cache en renommant le fichier ou en ajoutant une chaîne de requête comme favicon.svg?v=2, et vérifiez que les balises link dans l'en-tête sont correctes.
Sources
- What's in the head? Web page metadata — MDN Web Docs