Mode d’emploi
- Choisissez « Texte / emoji » et tapez un à trois caractères, ou choisissez « Image » et importez votre logo (un SVG ou un PNG carré d’au moins 512 px donne les meilleurs résultats).
- Choisissez les couleurs et une forme — carré, arrondi ou cercle.
- Vérifiez l’aperçu en 16, 32, 64 et 128 px ; les petites tailles montrent si le dessin reste lisible.
- Téléchargez le ZIP, envoyez les fichiers à la racine de votre site et collez le HTML dans le head.
Explication des options
- favicon.ico
- Contient des versions 16, 32 et 48 px pour les navigateurs, les favoris et les raccourcis Windows.
- apple-touch-icon.png
- 180 × 180 px avec un fond plein, utilisée quand quelqu’un ajoute votre site à l’écran d’accueil d’un iPhone ou d’un iPad.
- icon-192.png / icon-512.png
- Référencées dans site.webmanifest pour l’écran d’accueil Android et les applications web installables.
- icon.svg
- Une icône vectorielle pour les navigateurs récents, incluse quand la source est un texte ou un fichier SVG.
Le code HTML
Après avoir envoyé les fichiers à la racine de votre site, ajoutez ceci dans le head de chaque page :
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Questions fréquentes
De quels fichiers ai-je vraiment besoin ?
Un favicon.ico à la racine du site suffit pour tous les navigateurs. Ajoutez apple-touch-icon.png pour iOS, et le manifeste avec les icônes 192/512 si vous voulez une vraie icône quand le site est installé ou épinglé sur Android.
Pourquoi mon favicon est-il flou en 16 px ?
Les détails fins disparaissent à 16 × 16 pixels. Utilisez une lettre bien épaisse ou un logo simplifié plutôt que le logo complet avec du texte.
J’ai changé le favicon mais je vois encore l’ancien.
Les navigateurs gardent les favicons en cache très longtemps. Forcez le rechargement de la page, ou ajoutez un paramètre de version comme /favicon.ico?v=2 dans les balises link.
Puis-je utiliser un emoji comme favicon ?
Oui. Les emoji sont dessinés avec la police emoji de votre système, le résultat correspond donc à ce que vous voyez dans l’aperçu.
Confidentialité
Cet outil fonctionne entièrement dans votre navigateur. Vos fichiers et vos textes sont traités sur votre appareil et ne sont jamais envoyés à nos serveurs.