Tailles, formats et balises HTML des favicons
Un favicon est un petit fichier, mais les navigateurs, les téléphones et les applications web installées recherchent chacun des tailles différentes. Ce guide explique de quels fichiers un site web a besoin, comment les déclarer en HTML et comment concevoir une icône qui reste lisible à 16 pixels.
Qu’est-ce qu’un favicon ?
Un favicon (abréviation de l’anglais « favourites icon », icône des favoris) est la petite image qui identifie un site web dans les onglets, les favoris et l’historique. Les téléphones en utilisent une version plus grande lorsque le site est ajouté à l’écran d’accueil, les applications web installées utilisent les icônes de leur manifeste, et certains moteurs de recherche affichent le favicon à côté des résultats. Comme ces emplacements utilisent des tailles différentes, un site web fournit généralement un petit ensemble de fichiers.
Favicons ICO, PNG et SVG
| Format | Contenu | À savoir |
|---|---|---|
ICO (favicon.ico) | Plusieurs tailles dans un seul fichier, souvent 16, 32 et 48 pixels | Le format le plus ancien. De nombreux navigateurs demandent /favicon.ico à la racine du site même lorsque la page n’y fait pas référence : c’est donc une solution de secours utile. |
| PNG | Une taille par fichier, avec transparence | Déclaré avec un attribut sizes pour que le navigateur puisse choisir un fichier adapté. Également utilisé pour l’icône Apple Touch et les icônes du manifeste. |
| SVG | Un dessin vectoriel qui s’adapte à toutes les tailles | Pris en charge par la plupart des navigateurs de bureau actuels, mais pas par tous : conservez donc aussi des fichiers ICO ou PNG. Un favicon SVG peut s’adapter à un thème sombre grâce au CSS. |
Un fichier ICO est un petit conteneur : un en-tête répertorie chaque image avec sa taille et sa position, et les images peuvent être stockées sous forme de données PNG. Le Générateur de favicon de LeedyBox crée un favicon.ico contenant des images PNG de 16, 32 et 48 pixels, ainsi que des fichiers PNG pour les autres tailles.
Tailles courantes et leurs usages
| Taille (pixels) | Fichier typique | Usage typique |
|---|---|---|
| 16 × 16 | favicon-16x16.png, dans favicon.ico | Onglets et favoris sur les écrans standard |
| 32 × 32 | favicon-32x32.png, dans favicon.ico | Onglets sur les écrans haute densité, certains raccourcis |
| 48 × 48 | dans favicon.ico | Raccourcis plus grands et icônes du bureau sur certains systèmes |
| 180 × 180 | apple-touch-icon.png | Icône d’écran d’accueil sur iPhone et iPad |
| 192 × 192 | android-chrome-192x192.png | Icône d’écran d’accueil sur Android, déclarée dans le manifeste |
| 512 × 512 | android-chrome-512x512.png | Boîtes de dialogue d’installation et écrans de démarrage des applications web |
Partez d’une image source carrée d’au moins 512 × 512 pixels, ou d’un fichier SVG. Une petite image source doit être agrandie pour les plus grandes icônes et paraît alors floue. Un logo qui n’est pas carré doit être entouré d’espace supplémentaire ou recadré.
L’icône Apple Touch ne doit pas être transparente : certains appareils Apple affichent les zones transparentes en noir. Remplissez plutôt le fond avec une couleur. L’iPhone et l’iPad arrondissent eux-mêmes les coins : le fichier peut donc être un simple carré. Pour en savoir plus sur les canaux alpha, voir comment fonctionne la transparence en PNG et en JPG.
Les balises HTML et le manifeste d’application web
Placez les fichiers dans le dossier racine du site web et ajoutez ces balises dans le <head> de chaque page :
<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#ffffff">Si vous avez aussi un favicon SVG, ajoutez <link rel="icon" href="/favicon.svg" type="image/svg+xml">. Le manifeste (site.webmanifest) est un petit fichier JSON qui contient le nom du site, un nom court, les icônes de 192 et 512 pixels, une couleur de thème, une couleur de fond et un mode d’affichage, par exemple standalone. Si les fichiers se trouvent dans un autre dossier, modifiez chaque chemin dans les balises et dans le manifeste.
Concevoir pour de très petites tailles
- Restez simple. À 16 pixels, les traits fins, le petit texte et les détails deviennent flous. Un symbole simplifié, une forme unique ou une ou deux lettres fonctionnent mieux qu’un logo complet avec slogan.
- Misez sur un fort contraste. Une nette différence de luminosité entre l’icône et son fond compte davantage que le respect exact des couleurs de la marque.
- Limitez les marges. L’espace vide réduit la partie visible de l’icône. Une petite marge peut convenir aux grandes icônes, mais les petits favicons sont plus faciles à reconnaître lorsqu’ils occupent la majeure partie du carré.
- Vérifiez la taille réelle. Regardez l’icône à 100 % dans un onglet, pas seulement sous forme d’aperçu agrandi.
Thèmes sombres des navigateurs
Beaucoup de gens utilisent une barre d’onglets sombre. Un logo foncé sur fond transparent peut presque y disparaître, et un logo blanc peut devenir invisible dans un thème clair. Les solutions courantes sont une forme de fond pleine ou arrondie derrière le logo, un contour clair, ou un favicon SVG qui change de couleurs grâce à une requête média prefers-color-scheme (là où les favicons SVG sont pris en charge). Le générateur de LeedyBox affiche une barre d’onglets claire et une sombre pour que vous puissiez comparer les deux.
Mise à jour d’un favicon et cache du navigateur
Les navigateurs gardent les favicons en cache, parfois longtemps : une nouvelle icône peut donc ne pas apparaître juste après sa mise en ligne. Une actualisation forcée ou une fenêtre de navigation privée peut afficher la nouvelle version. Pour que les visiteurs qui reviennent la récupèrent plus tôt, changez le nom du fichier ou ajoutez un numéro de version à l’URL dans vos balises, par exemple /favicon-32x32.png?v=2. Les icônes des favoris et des résultats de recherche peuvent mettre plus de temps à se mettre à jour. Après chaque modification, testez le résultat dans les navigateurs et sur les appareils qui comptent pour vous.
Questions fréquentes
Le fichier favicon.ico est-il encore nécessaire ?
Il n’est pas obligatoire, mais c’est une solution de secours simple : de nombreux navigateurs et autres outils cherchent /favicon.ico dans le dossier racine d’un site. Il ne pèse que quelques kilo-octets.
Puis-je utiliser un JPG comme favicon ?
Les navigateurs peuvent généralement l’afficher, mais le JPG ne gère pas la transparence et sa compression peut brouiller les petits détails. Les fichiers PNG, ICO ou SVG conviennent mieux aux icônes.
Pourquoi mon nouveau favicon ne s’affiche-t-il pas ?
Le plus souvent, l’ancienne icône est encore en cache, ou les chemins indiqués dans les balises HTML ne correspondent pas à l’emplacement où les fichiers ont été mis en ligne. Ouvrez directement l’URL de chaque fichier dans le navigateur pour vérifier qu’il se charge.