Générateur de favicon
Déposez un logo, voyez-le à chaque taille réelle, et repartez avec favicon.ico, le jeu PNG et le HTML.
PNG / JPEG / WebP / GIF / SVG — ou déposez-en une sur cette carte
Jusqu’à 2 caractères ; un caractère chinois/japonais/coréen ou un emoji est dessiné seul.
Ajoutez une image (ou passez aux lettres) et chaque taille apparaît ici — aucun bouton « générer ».favicon.ico 16/32/48 · PNG 16 · 32 · 48 · 180 · 192 · 512 · site.webmanifest · HTML
Comment l’utiliser
- Choisissez une image, ou faites-la glisser sur la carte : chaque taille apparaît aussitôt. Aucun bouton générer — ce que vous voyez est ce qui se télécharge.
- Pas encore de logo ? Passez à « Lettre / emoji » et saisissez un ou deux caractères. Le sélecteur de couleur règle le fond, et la lettre devient noire ou blanche selon le contraste.
- Téléchargez le pack, décompressez-le à la racine de votre site, collez les balises <link> copiées dans <head>, puis rechargez votre site — l’icône de l’onglet devrait apparaître.
Exemple
Source
logo.png · 512×512, forme « Arrondi »
Pack (9 fichiers)
favicon.ico (16/32/48) favicon-16x16.png favicon-32x32.png favicon-48x48.png apple-touch-icon.png (180) android-chrome-192x192.png android-chrome-512x512.png site.webmanifest snippet.html
La même source avec les mêmes options donne des PNG identiques octet pour octet et un ZIP identique (l’horodatage de l’archive est fixé au 1980-01-01), le pack peut donc être versionné et comparé. Changer la forme ne fait que rogner les coins ; le dessin n’est jamais redessiné.
Portée, limites et questions courantes
- Pas d’export SVG. Un SVG qui reste lisible en 16 px demande des tracés simplifiés à la main ; envelopper le bitmap dans du SVG ou dessiner du texte système ne donnerait qu’une apparence de vectoriel. Gardez votre propre .svg à côté de ce jeu PNG si vous en voulez un.
- Les images sont ajustées, jamais rognées. Un logo non carré conserve des marges transparentes — rognez-le ou composez-le d’abord (le redimensionneur / convertisseur d’images ici peut aider).
- Les icônes transparentes reçoivent un fond de la plateforme : iOS en peint un derrière apple-touch-icon, et certains lanceurs Android aussi. Pour un fond maîtrisé, utilisez « Lettre / emoji », ou ajoutez le fond à l’image source.
- site.webmanifest ne liste que les icônes — ni name ni short_name. C’est le nom de votre site, que cet outil ne peut pas connaître ; ajoutez les deux clés après décompression (name est facultatif et les navigateurs se rabattent sur le titre de la page).
- favicon.ico contient 16, 32 et 48 px, pas 64 ni 128. Cela couvre les navigateurs modernes et Windows ; ajoutez d’autres tailles en PNG si nécessaire.
- GIF / WebP animés : seule la première image est utilisée. Les favicons ne s’animent de toute façon pas.
- Les icônes lettres sont dessinées avec la police de votre système : elles diffèrent donc entre macOS, Windows, Linux et téléphones. Le PNG fige ce que votre appareil affiche — c’est aussi pourquoi il n’y a pas de sélecteur de police.
- Aucune récupération d’URL ni vérification en ligne : cet outil ne peut pas prendre l’adresse d’un site et ne peut pas vérifier un favicon déployé. Après le déploiement, ouvrez votre site et regardez l’onglet.
- Limites : 20 Mo par fichier et 8000 px par côté. Les sources de moins de 180 px sont agrandies pour les grandes icônes et peuvent paraître floues.
- Ni rognage, ni détourage, ni traitement par lot, ni historique : un rechargement repart d’un état vide (rien n’est stocké, rien n’entre dans l’URL).
Outils associés
Ce dont on a généralement besoin ensuite, une fois les icônes en place.