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

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

  1. 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.
  2. 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.
  3. 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).

Ce dont on a généralement besoin ensuite, une fois les icônes en place.