Générateur de favicons — ICO, Apple Touch, Web Manifest, PWA

Transformez une image PNG, JPEG ou WebP en l'ensemble complet de favicons modernes : un favicon.ico multi-images réel, les PNG standards, un apple-touch-icon opaque, site.webmanifest et browserconfig.xml, générés dans votre navigateur.

Importer une image source

Cliquez ou déposez un PNG, JPEG ou WebP

PNG, JPEG et WebP jusqu'à 15 Mo — le format est vérifié à partir des octets, pas de l'extension

Votre image est décodée et redimensionnée localement. Rien n'est envoyé.

Une image, tous les formats de favicon

Les navigateurs, iOS, Android et Windows cherchent chacun un fichier de favicon différent. Au lieu d'exporter cinq fichiers à la main, cet outil génère toutes les tailles depuis une seule image : un favicon.ico multi-images (16/32/48 px), les PNG de 16 et 32 px, l'apple-touch-icon de 180 px, les icônes Android Chrome de 192 et 512 px et la mosaïque Windows de 150 px.

Le .ico est un vrai conteneur ICONDIR avec des images PNG à l'intérieur, pas un PNG renommé. Le paquet inclut aussi site.webmanifest et browserconfig.xml, et le README contient l'extrait HTML <head> exact à copier.

Comment générer un jeu de favicons

1
Déposez une image PNG, JPEG ou WebP. Le format est vérifié à partir des octets magiques, pas de l'extension.
2
Saisissez le nom du site et la couleur du thème, puis choisissez l'ajustement dans le carré (contenir, couvrir ou étirer) et le fond.
3
Cliquez sur « Générer le jeu de favicons » : chaque PNG et le .ico sont rendus à leur résolution native.
4
Téléchargez le ZIP, copiez les fichiers à la racine de votre site et collez l'extrait <head> du README dans votre page.

Contenu du paquet

Ces fichiers sont produits à chaque génération. favicon.ico est vérifié en relisant le conteneur et la taille en pixels de chaque image avant d'être proposé au téléchargement.

Fichier	Utilisé par
favicon.ico	Anciens navigateurs et onglets — ICO multi-images (16/32/48 px).
favicon-16x16.png / favicon-32x32.png	Navigateurs modernes avec les balises <link> PNG.
apple-touch-icon.png	Écran d'accueil de Safari iOS (doit être opaque).
android-chrome-192x192.png / 512x512.png	Écran d'accueil d'Android Chrome et invite d'installation PWA.
mstile-150x150.png	Mosaïques épinglées du menu Démarrage / barre des tâches Windows.
site.webmanifest	Manifest PWA référençant les icônes 192 et 512 px.
browserconfig.xml	Couleur de fond de la mosaïque Windows.
README.txt	Étapes d'installation et extrait <head> HTML.

Comment installer

Copiez les fichiers à la racine de votre site, puis ajoutez ces balises au <head> de chaque page :

  <link rel="icon" type="image/x-icon" href="/favicon.ico">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
  <link rel="manifest" href="/site.webmanifest">
  <meta name="msapplication-TileColor" content="#FFFFFF">
  <meta name="theme-color" content="#FFFFFF">

Les valeurs theme-color et msapplication-TileColor correspondent à la couleur choisie. Les fichiers gardent leurs noms standard, donc aucune configuration supplémentaire n'est nécessaire.

Pourquoi apple-touch-icon.png est opaque

iOS ignore le canal alpha des icônes de l'écran d'accueil et le remplace par du noir, ce qui donne un rendu cassé. Cet outil rend donc apple-touch-icon.png sur un fond opaque (blanc par défaut ou couleur personnalisée), tandis que les autres PNG conservent la transparence choisie.

Même si votre image a déjà un fond plein, le réglage transparent produit toujours un apple icon opaque, car seul ce fichier est forcé à être opaque.

Confidentialité

L'image est décodée avec createImageBitmap et rendue avec Canvas dans le navigateur. Aucun envoi, aucune conversion côté serveur, aucun compte. Le ZIP est assemblé en mémoire avec JSZip.

Outils associés

Questions fréquentes

favicon.ico est-il un vrai fichier ICO ?

Oui. C'est un conteneur ICONDIR avec des images PNG de 16, 32 et 48 px. L'outil relit le fichier après encodage pour confirmer la structure du conteneur et la taille en pixels de chaque image.

Mon image est-elle envoyée ?

Non. Le décodage, le redimensionnement, l'encodage et la création du ZIP se font dans votre navigateur.

Pourquoi apple-touch-icon.png n'est-il pas transparent ?

iOS remplace le canal alpha des icônes de l'écran d'accueil par du noir. Pour éviter cela, l'icône apple de 180 px est rendue sur un fond opaque (blanc par défaut ou couleur choisie).

De quels fichiers ai-je vraiment besoin ?

Au minimum favicon.ico et favicon-32x32.png couvrent tous les navigateurs modernes. Ajoutez apple-touch-icon.png pour iOS, les icônes 192/512 px et site.webmanifest pour Android/PWA, et mstile-150x150.png pour les mosaïques Windows. Le README explique chacun.

Génère-t-il safari-pinned-tab.svg ?

Non : ce fichier est un vecteur monochrome qui ne peut pas être dérivé d'une image matricielle. Fournissez-le depuis vos visuels vectoriels si vous voulez le support d'onglet épinglé de Safari ; le README le signale.

Que se passe-t-il si je change les réglages après la génération ?

Le résultat précédent est invalidé et un nouveau jeu est rendu depuis votre image avec le nouvel ajustement, fond ou couleur, de sorte que le téléchargement correspond toujours aux réglages affichés.

Vous avez trouvé un problème avec cet outil ?

Signaler un problème