# Créer un favicon : une icône minuscule qui vous ressemble
[Canonical HTML page](https://gradiently.design/fr/guide/favicon-design)
Votre favicon est l’élément le plus répété de votre marque, et le plus petit. Il doit tenir à 16 pixels, sur des onglets clairs et sombres, à côté de cinquante autres sites. Voici comment le rendre solide.
## The short version
- Un favicon est la petite icône qui représente un site web dans les onglets du navigateur, les favoris, l’historique, les écrans d’accueil et les résultats de recherche.
- Un ensemble minimal moderne comprend un favicon.ico en 32×32, une icône SVG, une Apple touch icon en 180×180, et des PNG en 192×192 et 512×512 dans un manifeste d’application web.
- Google Search affiche le favicon d’un site à côté des résultats et demande une icône carrée, idéalement plus grande que 48×48 pixels.
- Un favicon fonctionne mieux avec une seule forme ou lettre affirmée et un fort contraste, car le détail disparaît à 16 pixels.
- Un favicon SVG peut changer de couleurs en mode sombre grâce à une media query placée dans le fichier.
Un **favicon** est la petite icône carrée qui représente votre site dans les onglets du navigateur, les favoris, l’historique, les écrans d’accueil des téléphones et les résultats Google. Il s’affiche souvent à 16 ou 32 pixels seulement, donc créer un bon favicon exige d’être impitoyable : une seule forme ou lettre affirmée, un contraste élevé, aucun détail fin. Techniquement, il ne faut qu’une poignée de fichiers, un ICO en 32×32, un SVG, une Apple touch icon en 180×180 et deux PNG pour le manifeste, plus quelques lignes de HTML.
## Les tailles de favicon et les fichiers vraiment utiles
Les anciens guides listent vingt tailles. Les navigateurs modernes redimensionnent bien, alors un ensemble court couvre tous les endroits où un favicon apparaît. Cette approche suit celle recommandée par [web.dev](https://web.dev/articles/add-manifest) pour les manifestes et le comportement actuel des navigateurs pour le reste.
| Fichier | Taille | Utilisé par |
| --- | --- | --- |
| `favicon.ico` | 32×32 | Les anciens navigateurs, et tout ce qui demande directement `/favicon.ico` |
| `icon.svg` | Vectoriel | Les navigateurs actuels qui gèrent les favicons SVG ; peut s’adapter au mode sombre |
| `apple-touch-icon.png` | 180×180 | Les écrans d’accueil d’iPhone et d’iPad et les favoris Safari |
| `icon-192.png` | 192×192 | L’écran d’accueil Android, via le manifeste d’application web |
| `icon-512.png` | 512×512 | Les écrans de démarrage Android et l’installation d’app, via le manifeste |
Cinq fichiers. Placez-les à la racine du site, ou ailleurs, tant que le HTML pointe vers eux.
Google Search affiche aussi les favicons à côté des résultats. Ses [consignes sur les favicons](https://support.google.com/webmasters/answer/9290858) demandent une icône carrée, en recommandent une plus grande que 48×48 pixels et précisent qu’elle doit représenter votre marque. Les PNG en 192 et 512 conviennent tous les deux ; relisez cette page avant le lancement, car Google la met à jour.
## Comment ajouter un favicon à votre site
```html
```
À placer dans le `head` de chaque page. Les navigateurs qui comprennent le SVG le préfèrent ; les autres se rabattent sur l’ICO.
```json
{
"name": "Studio Nine",
"icons": [
{ "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
{ "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" },
{ "src": "/icon-mask.png", "type": "image/png", "sizes": "512x512", "purpose": "maskable" }
]
}
```
Un `manifest.webmanifest` minimal. L’icône maskable est facultative et permet à Android de la recadrer dans ses propres formes.
> **Une icône maskable a besoin de marges** Android peut recadrer une icône maskable en cercle, en squircle ou en carré arrondi. Gardez l’essentiel dans le cercle central, environ 80 % de la largeur, et remplissez le reste avec la couleur de fond.
## Dessiner un favicon lisible à 16 pixels
À 16 pixels, vous disposez de 256 points. Un logotype complet devient une tache grise, les traits fins disparaissent et deux couleurs proches se confondent. Les favicons que l’on reconnaît instantanément sont presque toujours l’une de ces trois choses : une seule lettre, un symbole simple ou une forme pleine dans une couleur distinctive.
Une icône d’app carrée avec une seule lettre N en gras sur un fond en dégradé
Une lettre épaisse sur un fond affirmé. Elle reste lisible quand le navigateur la réduit à 16 pixels.
Une icône carrée avec le nom d’un studio en trois mots, trop détaillée pour servir de favicon
Le nom complet passe bien à 512 pixels et devient une texture illisible à 16. Gardez-le pour la page elle-même.
### À éviter
- Le logo complet avec son logotype
- Des traits très fins et de petites contreformes
- Deux couleurs proches qui se fondent
- Du détail qui court jusqu’aux bords
- Une icône transparente qui disparaît sur les onglets sombres
### À faire
- Une lettre, un monogramme ou un symbole
- Des traits d’au moins 2 pixels en 32×32
- Un fort contraste entre la forme et le fond
- Remplir l’essentiel du carré, avec une petite marge
- Tester sur les thèmes clair et sombre du navigateur
## Couleur et dégradés dans une toute petite icône
À cette taille, la couleur travaille plus que la forme, car c’est elle que l’on cherche des yeux dans une rangée d’onglets. Une couleur de marque reconnaissable bat un symbole astucieux. Un dégradé peut fonctionner s’il est franc et court : deux arrêts avec une nette différence de luminosité se lisent comme une surface éclairée, alors qu’un mélange subtil à plusieurs arrêts paraît simplement boueux à 16 pixels.
- Indigo vers rose : lisible: `linear-gradient(135deg, #4338ca 0%, #db2777 100%)`
- Sarcelle vers citron vert : lisible: `linear-gradient(135deg, #0f766e 0%, #a3e635 100%)`
- Gris pâles : invisible: `linear-gradient(135deg, #e5e7eb 0%, #d1d5db 50%, #e5e7eb 100%)`
Le fond d’un favicon a besoin d’un net écart de luminosité et d’une teinte assumée. Le dernier disparaît sur une barre d’onglets claire.
Si votre marque a déjà un fond signature, un recadrage peut donner une tuile de favicon distinctive. Les Marks de Gradiently sont utiles ici : le même look qui habille vos publications peut se placer derrière une seule lettre en 512×512, si bien que l’onglet et le fil d’actualité semblent appartenir à la même marque. Vérifiez que la lettre garde un fort contraste avec la tuile, comme l’explique [logo sur fond en dégradé](https://gradiently.design/fr/guide/logo-on-gradient-background).
## Des favicons pour le mode sombre avec le SVG
Une icône noire disparaît sur une barre d’onglets sombre, et une blanche sur une barre claire. Comme un favicon SVG est un petit document, il peut contenir sa propre media query et changer de couleurs selon le thème du navigateur.
```html
```
À enregistrer sous `icon.svg`. Une tuile arrondie avec une lettre N qui inverse ses couleurs en mode sombre.
Une tuile pleine derrière le symbole est l’assurance la plus simple : elle reste lisible sur tous les fonds, clairs ou sombres, sans dépendre de la media query. [SVG ou PNG](https://gradiently.design/fr/guide/svg-vs-png) explique pourquoi le fichier vectoriel est celui à conserver.
## Une checklist rapide pour votre favicon
1. **Partez de la partie la plus simple du logo** Un monogramme, la première lettre ou le symbole seul. [Les déclinaisons de logo](https://gradiently.design/fr/guide/logo-variations) expliquent comment concevoir volontairement une petite version.
2. **Dessinez-le d’abord en 32×32** Travaillez sur la petite grille puis agrandissez, pas l’inverse. Traits épais, espaces généreux.
3. **Exportez les cinq fichiers** ICO en 32×32, SVG, Apple touch icon en 180×180, PNG en 192 et 512 pour le manifeste.
4. **Testez dans de vrais onglets** Ouvrez votre site à côté de dix autres, en thème clair et sombre. Si vous ne trouvez pas votre onglet en une seconde, simplifiez.
Le favicon rejoint votre [image Open Graph](https://gradiently.design/fr/guide/open-graph-image-size) et vos photos de profil sur les réseaux parmi les petits signaux constants d’une marque. Gardez-les cohérents, et consultez [tailles de logo](https://gradiently.design/fr/guide/logo-sizes) pour le kit complet.
## FAQ
### Quelle taille doit faire un favicon ?
Fournissez un favicon.ico en 32×32, un SVG, une Apple touch icon en 180×180, et des PNG en 192×192 et 512×512 dans un manifeste. Les navigateurs choisissent et redimensionnent à partir de ces fichiers.
### Comment ajouter un favicon à mon site ?
Mettez en ligne les fichiers d’icône et ajoutez les balises `link rel="icon"` et `link rel="apple-touch-icon"` dans le `head` de chaque page, plus un lien vers le manifeste pour Android.
### Pourquoi mon favicon ne s’affiche-t-il pas dans Google ?
Google a besoin d’un favicon carré, idéalement plus grand que 48×48 pixels, lié depuis votre page d’accueil et explorable. La mise à jour peut prendre un certain temps après un changement.
### Un favicon peut-il être un SVG ?
Oui, les navigateurs actuels qui gèrent les favicons SVG l’utiliseront, et il reste net à toutes les tailles. Gardez un favicon.ico en solution de repli.
### Mon favicon doit-il être mon logo complet ?
En général, non. Utilisez une lettre, un monogramme ou le symbole du logo, car un logotype complet est illisible à 16 pixels.