Mode d’emploi
- 1.Déposez votre logo sur la page, collez-le ou cliquez sur « Choisir une image ». Un PNG ou un SVG carré d’au moins 512 × 512 pixels donne le meilleur résultat.
- 2.Réglez la marge intérieure, et choisissez une couleur de fond et des coins arrondis si votre logo a besoin d’une forme pleine derrière lui.
- 3.Vérifiez l’aperçu : les onglets de navigateur montrent le rendu de l’icône à 16 pixels, en thème clair et en thème sombre.
- 4.Cliquez sur « Télécharger favicon.zip », envoyez les fichiers à la racine de votre site, puis collez le code HTML dans la section head de vos pages.
Les fichiers favicon dont un site a besoin
Un petit ensemble de fichiers suffit aujourd’hui pour tous les navigateurs et appareils. favicon.ico est le fichier classique que les navigateurs, les lecteurs de flux et d’autres outils demandent à l’adresse /favicon.ico, même quand la page ne le mentionne pas ; il contient des versions de 16, 32 et 48 pixels. Les navigateurs modernes préfèrent une icône SVG (icon.svg), qui reste nette à toutes les tailles et peut même changer de couleurs en mode sombre grâce à une media query prefers-color-scheme placée dans le SVG.
apple-touch-icon.png (180 × 180) est l’icône qu’utilisent les iPhone et les iPad quand quelqu’un ajoute votre site à l’écran d’accueil. Android et les applications web installées prennent les PNG de 192 et 512 pixels listés dans site.webmanifest. Les anciens guides énumèrent des dizaines de tailles ; les navigateurs mettent ces quelques fichiers à l’échelle pour tout le reste.
Où placer les fichiers
Envoyez les fichiers à la racine de votre site, pour qu’ils se chargent depuis des adresses comme https://example.com/favicon.ico, et ajoutez les lignes HTML dans le <head> de chaque page. Remplacez le nom indiqué dans site.webmanifest par celui de votre site.
Les frameworks ont souvent leur propre méthode. Avec l’App Router de Next.js, placez favicon.ico, icon.svg (ou icon.png) et apple-icon.png dans le dossier app : les balises sont ajoutées automatiquement. Dans WordPress, envoyez une image carrée dans Apparence → Personnaliser → Identité du site → Icône du site. Les créateurs de sites hébergés comme Shopify, Wix et Squarespace proposent un champ favicon dans les paramètres du site.
Concevoir une icône lisible à 16 pixels
Un onglet de navigateur affiche votre icône en 16 × 16 pixels (32 sur les écrans haute résolution). À cette taille, les textes fins, les traits minces et les logos détaillés deviennent flous. Utilisez un symbole simple, l’initiale de votre nom ou un élément marquant de votre logo, avec un fort contraste.
Vérifiez les deux aperçus d’onglet : un logo foncé sur fond transparent peut disparaître avec un thème de navigateur sombre. Dans ce cas, donnez une couleur de fond à l’icône ou ajoutez un contour clair au logo.
Questions fréquentes
Mon logo est-il envoyé quelque part ?
Non. Les icônes sont dessinées et réunies dans le fichier ZIP par votre navigateur, sur votre appareil. Rien n’est envoyé à nestoo ni à qui que ce soit.
Quelle taille doit faire un favicon ?
Les onglets de navigateur utilisent 16 × 16 et 32 × 32 pixels, ce que contient favicon.ico (avec en plus 48 × 48 pour les raccourcis Windows). Les téléphones et les applications web ont besoin d’icônes plus grandes : 180 × 180 pour l’icône Apple touch, ainsi que 192 × 192 et 512 × 512 pour Android. Partez d’une image d’au moins 512 × 512 pixels, ou d’un SVG.
Pourquoi mon nouveau favicon ne s’affiche-t-il pas ?
Les navigateurs gardent les favicons longtemps en cache, parfois même après un rechargement forcé. Ouvrez directement le fichier de l’icône (/favicon.ico) et rechargez-le, essayez une fenêtre de navigation privée, ou ajoutez un numéro de version aux liens de votre HTML, comme href="/favicon.ico?v=2", pour que les navigateurs récupèrent le nouveau fichier.
Faut-il utiliser ICO ou PNG ?
Les deux. Gardez favicon.ico à la racine du site, car certains navigateurs et outils ne cherchent que ce fichier. Les navigateurs modernes utilisent les icônes PNG ou SVG déclarées dans votre HTML. Le fichier ICO créé ici contient des images PNG, ce qui le garde léger.
Puis-je créer un favicon à partir d’un emoji ou d’un texte ?
Pas directement avec cet outil, mais c’est facile en SVG : enregistrez <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text y=".9em" font-size="90">🦊</text></svg> sous le nom icon.svg et déposez-le ici. Les emoji s’affichent différemment selon le système d’exploitation : les fichiers PNG et ICO générés montrent donc l’emoji tel que votre ordinateur le dessine.