Générateur de Favicon - toutes les tailles et le HTML
Générateur de favicon
Tailles
HTML pour votre head
Placez les fichiers à la racine du site, puis collez ceci dans head.
Ce que fait cet outil
Le favicon a cessé d’être un unique carré de 16 pixels il y a des années. Un site réclame aujourd’hui une poignée de tailles pour les onglets, les raccourcis Windows, les écrans d’accueil iPhone et les invites d’installation Android, plus le balisage qui y renvoie. Cette page fabrique le tout à partir d’une image, dans votre navigateur.
Comment l’utiliser
- 1 Déposez une image carrée, idéalement 512 px ou plus.
- 2 Vérifiez chaque taille dans l’aperçu et choisissez un fond si votre image est transparente.
- 3 Téléchargez le zip, décompressez-le à la racine du site et collez le HTML.
Concevoir pour 16 pixels, pas pour le logo
À la taille d’un onglet, un favicon fait à peu près la largeur d’un point de cette page. Les logotypes deviennent des taches grises et les traits fins disparaissent complètement. Une seule lettre, une forme simple ou le fragment le plus reconnaissable du logo survit à cette échelle ; le logo entier, presque jamais.
| Taille | Où c’est utilisé |
|---|---|
| 16×16 | Onglet du navigateur, barre de favoris |
| 32×32 | Onglet sur écrans à haute densité, barre des tâches |
| 48×48 | Raccourcis Windows et tuiles de site |
| 180×180 | Écran d’accueil iPhone et iPad |
| 192×192 | Écran d’accueil Android et sélecteur d’applis |
| 512×512 | Invite d’installation et écran de lancement |
Le PNG suffit ; l’ICO est un vestige
Tous les navigateurs en usage aujourd’hui lisent les favicons PNG : une pile de fichiers PNG et les bonnes balises link couvrent le web. Le conteneur .ico existe parce qu’Internet Explorer le cherchait à la racine du site ; sauf obligation de gérer de l’antique, vous pouvez vous en passer.
La transparence se comporte autrement sur un téléphone
Dans un onglet, une icône transparente se pose bien sur ce que le thème fournit. Sur l’écran d’accueil d’un iPhone, le même fichier reçoit un carré noir opaque derrière lui, car iOS n’y compose pas la transparence. Choisissez une couleur de fond, et l’icône paraît voulue dans les deux cas.
Pourquoi le navigateur affiche encore l’ancien
Les favicons sont mis en cache durement et longtemps, parfois au-delà d’un rechargement normal. Ouvrez le fichier d’icône directement pour vérifier que le nouveau est bien là, puis contrôlez dans une fenêtre privée. Changer le nom du fichier, ou lui ajouter une version, est la façon fiable de forcer la mise à jour.