Image & Photo

Générateur de Favicon

Déposez une image et obtenez toutes les tailles de favicon dont un site moderne a besoin — favicon.ico, tailles PNG pour les navigateurs, Apple et Android, plus des extraits HTML et manifest prêts à coller.

Déposez votre logo ou icône

ou cliquez pour parcourir — PNG, JPG, WebP ou SVG jusqu'à 10 Mo. Une source carrée de 512×512+ donne le meilleur résultat.

Privé par conception. Votre image source est décodée et redimensionnée entièrement dans votre navigateur en utilisant l'API Canvas. Le .ico est assemblé en mémoire. Rien n'est téléchargé.

Qu'est-ce qu'un générateur de favicon ?

Un générateur de favicon transforme une image source en la famille de fichiers icônes dont un site web moderne a besoin — le fichier .ico hérité que les navigateurs récupèrent automatiquement, les petites tailles PNG affichées dans les onglets et les signets, l'icône apple-touch de 180 pixels utilisée lorsqu'un utilisateur d'iPhone ajoute votre site à son écran d'accueil, et les images de 192/512 pixels qu'Android tire du manifeste web. Faire cela à la main signifie ouvrir un éditeur d'images, exporter sept fichiers séparés, et écrire un long bloc de balises <link> dans votre HTML. Ce générateur exécute l'ensemble du pipeline dans votre navigateur : déposez une image, obtenez chaque taille, et copiez l'extrait HTML et le manifeste correspondant. Votre image ne quitte jamais la page.

Comment générer un ensemble de favicons

1
Commencez avec une source carrée
Téléchargez un PNG, JPG, WebP ou SVG qui est carré et d'au moins 512×512 pixels. Une source non carrée est letterboxée sur un canevas carré afin que le logo ne soit jamais rogné, mais les petits détails apparaissent plus nets lorsque la source est déjà carrée.
2
Choisissez un arrière-plan
Laissez-le transparent si votre logo est lisible sur les chrome de navigateur clairs et foncés. Passez à une couleur unie si votre icône a un premier plan clair qui disparaîtrait contre un onglet blanc — la plupart des onglets d'entreprise sont encore très clairs.
3
Examinez chaque taille
Regardez attentivement les aperçus de 16 et 32 pixels. La plupart des logos perdent des détails à cette taille. Si le résultat est un flou, simplifiez la source — moins de couleurs, traits plus épais, moins de texte fin — et re-téléchargez.
4
Téléchargez le bundle
Utilisez Télécharger tout pour récupérer favicon.ico plus les six tailles PNG. Placez-les à la racine de votre site. Le .ico contient des PNG de 16, 32 et 48 px en interne, ce que Chrome, Firefox et Edge actuels attendent.
5
Collez le HTML et le manifeste
Copiez l'extrait HTML dans le <head> de chaque page. Enregistrez l'extrait site.webmanifest à côté des icônes afin qu'Android affiche la bonne image d'écran d'accueil lorsque quelqu'un ajoute votre site.

Comment l'ensemble de favicons est construit

1. Décodez l'image téléchargée en utilisant le chargeur d'images natif du navigateur.
2. Pour chaque taille cible (16, 32, 48, 180, 192, 512), dessinez sur un canevas carré.
3. Letterboxez la source afin que le côté le plus long s'adapte au canevas — ne jamais rogner, ne jamais étirer.
4. Ré-encodez le canevas en tant que PNG via canvas.toBlob('image/png').
5. Pour favicon.ico, assemblez les PNG de 16/32/48 dans une structure ICONDIR + ICONDIRENTRY.
6. Concaténez les octets PNG après les entrées de répertoire de 16 octets — c'est un .ico multi-résolution valide.

Les navigateurs modernes et les appareils Apple acceptent les octets PNG intégrés dans un conteneur .ico — il n'est pas nécessaire d'encoder le format BMP-avec-masque-AND obsolète qui a été initialement expédié avec Windows 95. Le conteneur est juste un en-tête de six octets (réservé + type + compte), une entrée de répertoire de 16 octets par image incluse (taille + profondeur de bits + décalage + longueur), et les charges utiles PNG concaténées. C'est ce que cet outil produit, et c'est ce que Chrome, Firefox, Safari et Edge récupèrent lorsqu'ils demandent /favicon.ico à votre serveur.

Référence : Wikipedia — Format de fichier ICO

Ce qui fonctionne et ce qui ne fonctionne pas

Image source	À quoi s'attendre
Logo carré en gras, 1024×1024 PNG, arrière-plan transparent	Net à chaque taille. Les aperçus de 16 et 32 px sont toujours clairement lisibles. Déposez directement dans un site de production. L'entrée idéale.
Marque de mot horizontale large, 2000×400	Letterboxée sur un canevas carré avec des bandes vides en haut et en bas. La marque de mot est toujours lisible à 192 et 512 mais illisible à 16 et 32 — le texte est trop petit. Rogner à une marque carrée avant de télécharger.
Logo photographique avec un contour dégradé fin	Le dégradé et le contour disparaissent à 16 et 32 px. Utilisez une version simplifiée et à fort contraste du même logo pour les actifs de taille icône. La perte de détail est un problème de source, pas un problème d'exportation.
SVG sans largeur ou hauteur explicite	Rendu à la taille par défaut de 300×150 que le navigateur attribue aux SVG sans taille dérivée de viewBox. Ajoutez des attributs de largeur/hauteur ou un viewBox à l'SVG source avant de télécharger. Cas limite SVG — corrigez la source.

Quand utiliser un générateur de favicon

Lancement d'un nouveau site ou d'une page produit et vous avez besoin de toutes les tailles de favicon en une seule fois.
Rafraîchir une marque et remplacer les icônes sur un site existant sans ouvrir Photoshop.
Mettre en place un outil interne, un tableau de bord ou un panneau d'administration qui a besoin d'une icône d'onglet reconnaissable.
Créer un site de documentation statique (Docusaurus, Astro, Next.js) où le framework attend des favicons à des chemins spécifiques.
Générer un ensemble d'icônes prêt pour PWA afin que le site puisse être installé sur l'écran d'accueil d'un téléphone.
Remplacer le favicon par défaut d'un fournisseur sur un sous-domaine SaaS que vous contrôlez.
Tester rapidement comment un logo candidat se lit à 16 px avant de s'engager.

Outils connexes

Outil de Suppression d'Arrière-plan

Découpez le sujet de n'importe quelle photo avec l'IA sur appareil — aucun téléchargement requis.

Compresseur d'Image

Réduisez les fichiers JPG, PNG ou WebP dans votre navigateur avec un curseur de qualité interactif.

Éditeur de Photo

Ajustez, filtrez, faites pivoter et recadrez des photos dans le navigateur — pas de téléchargements, pas de filigrane.

Créateur de Mèmes

Composez des mèmes et des collages d'écran avec de vraies couches — collez, faites glisser, recadrez, légendez, exportez.

Questions fréquemment posées

Pourquoi tant de tailles ?

Différentes plateformes demandent différentes tailles. Les navigateurs récupèrent /favicon.ico (qui contient 16, 32 et 48 px). iOS utilise apple-touch-icon à 180 px lorsque l'utilisateur enregistre votre site sur son écran d'accueil. Android récupère 192 et 512 px à partir du manifeste web pour ses icônes d'écran d'accueil et d'écran de démarrage. En expédiant tous, on évite qu'un client ne tombe sur une icône petite floue agrandie.

Mon image est-elle téléchargée quelque part ?

Non. Le décodage, le redimensionnement et l'assemblage .ico se font tous dans votre navigateur en utilisant l'API Canvas et un petit écrivain binaire en page. Rien n'est envoyé à un serveur — vous pouvez vérifier dans l'onglet réseau de votre navigateur qu'il n'y a pas de téléchargement après le chargement de la page.

Pourquoi le .ico est-il encore d'actualité en 2026 ?

Les navigateurs récupèrent automatiquement /favicon.ico lorsqu'aucune autre icône n'est déclarée, donc cela reste le fallback par défaut. Les fichiers .ico modernes contiennent des octets PNG (pas le format BMP hérité), donc ils sont à peu près de la même taille qu'un seul PNG tout en couvrant trois tailles en une seule requête.

Dois-je utiliser un fond transparent ou solide ?

Transparent est préférable lorsque la silhouette de votre logo se lit clairement sur des onglets blancs et sombres. Utilisez une couleur solide si votre logo a un premier plan clair qui disparaîtrait contre un onglet de navigateur blanc. La plupart des grandes marques utilisent une couleur solide (souvent la couleur de la marque) pour cette raison.

Mon logo a l'air bien à 512 mais flou à 16 — pourquoi ?

C'est un problème de conception source, pas un problème d'exportation. À 16 px, vous avez 256 pixels au total pour représenter l'ensemble du logo. Les traits fins, les dégradés, les types fins et les détails internes s'effondrent tous. De nombreuses marques expédient une marque séparée et simplifiée pour une utilisation d'icône — généralement une seule lettre ou forme en gras.

Où dois-je mettre ces fichiers ?

Déposez favicon.ico et les six PNG à la racine de votre site (afin qu'ils soient servis depuis /favicon.ico, /favicon-16x16.png, etc.). Enregistrez le manifeste sous site.webmanifest à la même racine. Ensuite, collez le snippet HTML dans le <head> de chaque page ou le modèle/layout partagé.

Ai-je besoin de chaque taille en 2026 ?

Strictement, vous pouvez vous en sortir avec un seul PNG haute résolution et laisser le navigateur mettre à l'échelle, mais le résultat est visiblement flou à 16 px. L'ensemble complet ne contient que sept petits fichiers (moins de 30 Ko au total pour des logos typiques) et vous donne le résultat le plus net sur chaque appareil.

Dernière mise à jour 2026-04-28

Chargement...

Qu'est-ce qu'un générateur de favicon ?

Comment générer un ensemble de favicons

Commencez avec une source carrée

Téléchargez un PNG, JPG, WebP ou SVG qui est carré et d'au moins 512×512 pixels. Une source non carrée est letterboxée sur un canevas carré afin que le logo ne soit jamais rogné, mais les petits détails apparaissent plus nets lorsque la source est déjà carrée.

Choisissez un arrière-plan

Laissez-le transparent si votre logo est lisible sur les chrome de navigateur clairs et foncés. Passez à une couleur unie si votre icône a un premier plan clair qui disparaîtrait contre un onglet blanc — la plupart des onglets d'entreprise sont encore très clairs.

Examinez chaque taille

Regardez attentivement les aperçus de 16 et 32 pixels. La plupart des logos perdent des détails à cette taille. Si le résultat est un flou, simplifiez la source — moins de couleurs, traits plus épais, moins de texte fin — et re-téléchargez.

Téléchargez le bundle

Utilisez Télécharger tout pour récupérer favicon.ico plus les six tailles PNG. Placez-les à la racine de votre site. Le .ico contient des PNG de 16, 32 et 48 px en interne, ce que Chrome, Firefox et Edge actuels attendent.

Collez le HTML et le manifeste

Copiez l'extrait HTML dans le <head> de chaque page. Enregistrez l'extrait site.webmanifest à côté des icônes afin qu'Android affiche la bonne image d'écran d'accueil lorsque quelqu'un ajoute votre site.

Comment l'ensemble de favicons est construit

1. Décodez l'image téléchargée en utilisant le chargeur d'images natif du navigateur.
2. Pour chaque taille cible (16, 32, 48, 180, 192, 512), dessinez sur un canevas carré.
3. Letterboxez la source afin que le côté le plus long s'adapte au canevas — ne jamais rogner, ne jamais étirer.
4. Ré-encodez le canevas en tant que PNG via canvas.toBlob('image/png').
5. Pour favicon.ico, assemblez les PNG de 16/32/48 dans une structure ICONDIR + ICONDIRENTRY.
6. Concaténez les octets PNG après les entrées de répertoire de 16 octets — c'est un .ico multi-résolution valide.

Ce qui fonctionne et ce qui ne fonctionne pas

Image source	À quoi s'attendre
Logo carré en gras, 1024×1024 PNG, arrière-plan transparent	Net à chaque taille. Les aperçus de 16 et 32 px sont toujours clairement lisibles. Déposez directement dans un site de production. L'entrée idéale.
Marque de mot horizontale large, 2000×400	Letterboxée sur un canevas carré avec des bandes vides en haut et en bas. La marque de mot est toujours lisible à 192 et 512 mais illisible à 16 et 32 — le texte est trop petit. Rogner à une marque carrée avant de télécharger.
Logo photographique avec un contour dégradé fin	Le dégradé et le contour disparaissent à 16 et 32 px. Utilisez une version simplifiée et à fort contraste du même logo pour les actifs de taille icône. La perte de détail est un problème de source, pas un problème d'exportation.
SVG sans largeur ou hauteur explicite	Rendu à la taille par défaut de 300×150 que le navigateur attribue aux SVG sans taille dérivée de viewBox. Ajoutez des attributs de largeur/hauteur ou un viewBox à l'SVG source avant de télécharger. Cas limite SVG — corrigez la source.

Quand utiliser un générateur de favicon

Lancement d'un nouveau site ou d'une page produit et vous avez besoin de toutes les tailles de favicon en une seule fois.

Rafraîchir une marque et remplacer les icônes sur un site existant sans ouvrir Photoshop.

Mettre en place un outil interne, un tableau de bord ou un panneau d'administration qui a besoin d'une icône d'onglet reconnaissable.

Créer un site de documentation statique (Docusaurus, Astro, Next.js) où le framework attend des favicons à des chemins spécifiques.

Générer un ensemble d'icônes prêt pour PWA afin que le site puisse être installé sur l'écran d'accueil d'un téléphone.

Remplacer le favicon par défaut d'un fournisseur sur un sous-domaine SaaS que vous contrôlez.

Tester rapidement comment un logo candidat se lit à 16 px avant de s'engager.