La réponse courte
Vous n'avez plus besoin de dizaines de fichiers d'icônes. Les anciens guides listent des tailles pour les vignettes Windows, chaque modèle d'iPad et des navigateurs disparus depuis longtemps ; aujourd'hui, presque tout lit l'un de quelques fichiers. Placez-les dans le dossier racine de votre site, à côté de la page d'accueil, et ajoutez les lignes correspondantes dans la section head de chaque page.
Le navigateur demande /favicon.ico de lui-même, même sans aucun code HTML : c'est pourquoi ce fichier doit toujours exister. Tout le reste est trouvé grâce aux balises link et au manifeste.
| Fichier | Taille en pixels | Utilisé par |
|---|---|---|
| favicon.ico | 16, 32 et 48 dans un seul fichier | Tous les navigateurs, raccourcis Windows, outils qui ne regardent que la racine |
| favicon-32x32.png et favicon-16x16.png | 32 et 16 | Onglets et favoris du navigateur, sur écrans normaux et haute densité |
| apple-touch-icon.png | 180 | Écran d'accueil de l'iPhone et de l'iPad, favoris Safari |
| android-chrome-192x192.png | 192 | Écran d'accueil Android, application web installée |
| android-chrome-512x512.png | 512 | Écran de démarrage des applications web installées, boutiques d'applications web |
| icon.svg (facultatif) | Toutes, c'est du vectoriel | Navigateurs de bureau récents qui acceptent les favicons SVG |
Essayez ici : Générateur de favicon
Ouvrir la page complète de l'outilPourquoi autant de tailles
Un favicon apparaît dans des endroits très différents. Un onglet de navigateur l'affiche en 16 sur 16 pixels CSS, soit 32 pixels réels sur l'écran haute densité d'un portable, et parfois davantage. Windows utilise 48 pixels pour les raccourcis sur le bureau. Google affiche l'icône du site à côté des résultats de recherche et demande une image carrée ; il recommande une taille supérieure à 48 pixels, et l'image de 48 pixels du favicon.ico, avec les PNG plus grands, couvre ce besoin.
Les téléphones fonctionnent autrement. Quand quelqu'un ajoute votre site à l'écran d'accueil, iOS cherche l'apple-touch-icon et Android lit les icônes du manifeste web. Ces icônes s'affichent à côté de vraies applications : elles doivent donc être grandes et nettes. Si elles manquent, le téléphone prend une capture de la page ou affiche une lettre à la place.
Réduire une seule grande image n'est pas idéal pour les plus petites tailles : un logo de 512 pixels ramené à 16 pixels transforme les traits fins en flou gris. C'est pourquoi le générateur dessine séparément les petites tailles PNG à partir de votre source et vous laisse vérifier le résultat en 16, 32, 48 et 180 pixels avant le téléchargement.
Les balises HTML à ajouter
Après avoir téléchargé le paquet, collez ces lignes dans la section head de vos pages (l'outil les affiche sous Code HTML, avec un bouton Copier le code, et le ZIP les contient dans favicon-html.txt) :
- <link rel="icon" href="/favicon.ico" sizes="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"> avec votre couleur de fond, qui teinte la barre du navigateur sur certains téléphones
Détails pour Apple, Android et SVG
L'icône Apple doit être un carré sans transparence. iOS arrondit lui-même les coins et remplit les zones transparentes en noir, si bien qu'un logo transparent peut finir sur une tuile noire. Le générateur donne toujours à ce fichier un fond plein (votre couleur de fond, ou du blanc si vous l'avez désactivée) et le garde carré.
Le fichier site.webmanifest liste les icônes de 192 et 512 pixels avec le nom et les couleurs du site. Android s'en sert pour l'icône de l'écran d'accueil et les applications web installées. Android peut aussi découper les icônes en cercle ou dans une autre forme ; si votre logo touche les bords, ajoutez une marge pour que rien d'important ne soit coupé. Certains sites ajoutent une icône maskable séparée, avec plus d'espace autour du logo, précisément pour cela.
Un favicon SVG reste net à toutes les tailles et peut même changer de couleur en mode sombre grâce à une media query CSS dans le fichier. Il est bien pris en charge par les navigateurs de bureau actuels, mais pas partout ; considérez-le donc comme un ajout : gardez favicon.ico et les PNG, et si vous avez un logo SVG propre, ajoutez vous-même une ligne comme <link rel="icon" type="image/svg+xml" href="/icon.svg">. Le générateur accepte aussi un SVG comme image source et le rend net à chaque taille.
Dessiner une icône lisible en 16 pixels
En 16 sur 16, il n'y a que 256 pixels : un logo complet avec le nom de l'entreprise devient illisible. Les favicons réussis utilisent une seule forme forte ou une ou deux lettres.
- Utilisez le symbole de votre logo sans le nom de l'entreprise, ou vos initiales. L'option Texte du générateur crée une icône propre à partir d'une à trois lettres.
- Gardez des traits épais. Tout ce qui est plus fin qu'environ un douzième de l'icône disparaît en 16 pixels.
- Prévoyez un fort contraste entre le symbole et le fond. Vérifiez l'aperçu de l'onglet en version claire et en version sombre, car beaucoup de gens utilisent un thème de navigateur sombre.
- Occupez l'espace. Une grande marge rend l'icône minuscule à côté des autres onglets ; entre 0 et 10 % donne en général un bon résultat, un peu plus pour la forme ronde.
- Un fond coloré avec la forme Arrondi ou Rond donne une tuile reconnaissable ; un fond transparent convient si le symbole est assez contrasté sur les onglets clairs comme sur les sombres.
Problèmes fréquents et solutions
- L'ancienne icône s'affiche encore : les navigateurs gardent les favicons en cache longtemps. Ouvrez le fichier directement, rechargez avec Ctrl+F5, ou ajoutez une version à l'adresse, par exemple favicon.ico?v=2.
- Google affiche un globe générique : vérifiez que le favicon est accessible sans connexion, qu'il n'est pas bloqué dans robots.txt et qu'il est carré. La mise à jour des résultats de recherche peut prendre des jours, voire des semaines.
- L'icône sur l'écran d'accueil de l'iPhone a des bords noirs : l'icône Apple avait de la transparence. Utilisez le fichier du générateur, qui a un fond plein.
- L'icône est floue : l'image source était petite. Utilisez une image d'au moins 512 pixels ou un SVG.
- L'icône manque sur certaines pages : les balises ne sont que dans le modèle de certaines pages, ou les chemins sont relatifs. Utilisez des chemins qui commencent par une barre oblique, comme dans le code généré.