Comment créer un favicon
- Choisissez une image (votre logo) ou créez une icône à partir d’une lettre ou d’un emoji.
- Réglez le fond, la forme et la marge en regardant l’aperçu en taille réelle, notamment à 16 pixels.
- Téléchargez le pack ZIP et envoyez tous les fichiers à la racine de votre site.
- Copiez le code HTML dans la partie
<head>de vos pages.
Contenu du pack
| Fichier | Taille | Utilisé par |
|---|---|---|
| favicon.ico | 16, 32 et 48 px | Tous les navigateurs, y compris anciens |
| favicon-16x16.png, favicon-32x32.png | 16 et 32 px | Onglets et favoris |
| apple-touch-icon.png | 180 px | Écran d’accueil iPhone et iPad |
| android-chrome-192x192.png, android-chrome-512x512.png | 192 et 512 px | Écran d’accueil Android |
| site.webmanifest | – | Nom et couleurs pour Android |
| favicon.svg | Vectoriel | Navigateurs récents (mode « lettre » ou image SVG) |
Conseils pour un favicon lisible
- Restez simple : une lettre, un symbole ou la partie la plus reconnaissable de votre logo.
- Choisissez un fort contraste entre le motif et le fond.
- Vérifiez l’aperçu à 16 pixels : c’est la taille affichée dans les onglets.
Pour convertir une image en .ico sans le reste du pack, utilisez le convertisseur d’images.
Questions fréquentes
Quelle image utiliser pour un favicon ?
Une image carrée, simple et contrastée, d’au moins 512 × 512 pixels. Les détails fins disparaissent à 16 pixels : un logo simplifié ou une initiale donne souvent un meilleur résultat qu’un logo complet.
Où placer les fichiers sur mon site ?
Envoyez tous les fichiers de l’archive à la racine de votre site (au même niveau que la page d’accueil), puis collez le code HTML dans la balise <head> de vos pages.
Mon nouveau favicon ne s’affiche pas, pourquoi ?
Les navigateurs gardent longtemps le favicon en mémoire. Videz le cache ou ouvrez le site dans une fenêtre de navigation privée pour voir le nouveau.
Le fichier favicon.ico est-il encore utile ?
Oui : certains navigateurs, lecteurs de flux et outils le demandent toujours à l’adresse /favicon.ico. Il contient ici les tailles 16, 32 et 48 pixels.
Pourquoi l’icône Apple a-t-elle un fond ?
iOS n’accepte pas la transparence pour les icônes ajoutées à l’écran d’accueil : il remplirait les zones transparentes en noir. L’outil applique donc la couleur de fond choisie à cette icône.