Image → Icône

Générez favicon et icônes PWA

Le .zip contient:

favicon-16.png16×16
favicon-32.png32×32
favicon-48.png48×48
apple-touch-icon.png180×180
icon-192.png192×192
icon-512.png512×512
manifest.jsonPWA
head-snippet.html<head>

Comment ça marche

Image → Icône — Générez favicon et icônes PWA. Tout le traitement se fait dans votre navigateur — sans téléversement, sans inscription, sans e-mail. Gratuit pour toujours.

Dernière mise à jour: 2026-05-06

Editor's note

Nous avons construit ceci parce que chaque framework veut une taille de favicon différente, qu'Apple n'arrête pas d'en inventer de nouvelles et que le manifest PWA réclame ses propres variantes 192 et 512 px. Le matin où nous avons compté vingt-huit fichiers d'icônes séparés à travers le projet Multilities, nous avons décidé de ne plus jamais le faire à la main. Le ZIP que cet outil crache est le bundle exact que nous déposons dans public/ sur un nouveau site — quoi que ce soit de plus léger laisse un 404 dans le manifest de quelqu'un deux mois plus tard et une icône iOS de l'écran d'accueil qui paraît floue en capture.

L'aperçu de recadrage centré est là parce que nous avons souvent passé des logos verticaux à l'outil et été surpris quand la version 16×16 perdait le haut de la lettre. Maintenant, vous voyez le recadrage avant de valider. Nous n'avons délibérément pas ajouté la suppression de fond ni le masque à coins arrondis — ce sont des décisions de design qui doivent vivre dans votre fichier source, pas être devinées par un utilitaire. Apportez un PNG carré propre et le reste est mécanique.

À propos de Image → Icône

Image → Icône transforme un seul PNG source en un set complet de favicon et d'icônes PWA, y compris le manifest.json et le snippet HTML head dont vous avez besoin pour tout brancher. C'est un générateur favicon en un clic et un producteur d'icônes PWA destiné aux développeurs qui préfèrent éviter la danse manuelle d'ImageMagick.

Déposez votre logo et l'outil le recadre en carré centré, génère chaque taille requise (16, 32, 48, 180, 192, 512), zippe le tout avec un manifest, et vous donne un snippet HTML copier-coller pour votre <head>.

La génération se fait dans votre navigateur, donc votre branding non encore publié ne quitte jamais votre machine. La sortie est un .zip propre que vous pouvez committer directement dans le dossier public/ de votre projet.

Comment utiliser Image → Icône

Glissez un PNG carré dans la zone de chargement — les images carrées fonctionnent mieux, idéalement avec un fond transparent.
Examinez l'aperçu recadré au centre pour vous assurer que votre logo n'est pas coupé ; les sources non carrées sont auto-recadrées.
Cliquez sur Generate icon set & download .zip et patientez le temps que chaque taille soit rendue.
Décompressez l'archive dans le dossier public/ (ou static/) de votre projet.
Collez le snippet HTML head inclus dans votre <head> et référencez manifest.json depuis la balise <link> appropriée.
Faites un hard-refresh dans une fenêtre privée pour confirmer que le nouveau favicon et l'icône d'installation PWA apparaissent.

Cas d'usage courants

Démarrer un nouveau site quand vous avez un logo PNG mais pas le temps d'exporter manuellement 8 tailles différentes.
Ajouter le support PWA à une app existante — les icônes 192 et 512 px satisfont les exigences du manifest dès le départ.
Rafraîchir le favicon après un rebrand sans solliciter l'équipe design pour des ré-exports.
Produire des icônes Apple touch (180 px) pour que les raccourcis sur l'écran d'accueil iOS soient nets.
Générer des sets d'icônes cohérents pour plusieurs environnements (staging, production) à partir d'un seul fichier source.

Astuces et erreurs courantes

Partez d'une source haute résolution (au moins 512×512) pour que les tailles réduites restent nettes.
Utilisez un fond transparent — les fonds opaques rendent étrangement à l'intérieur des masques aux coins arrondis d'iOS.
Testez le favicon en visitant votre site en fenêtre incognito ; les navigateurs cachent le favicon agressivement.
Si votre logo a des traits très fins, ils peuvent disparaître en 16×16 — concevez une marque simplifiée pour les très petites tailles si nécessaire.

Questions fréquentes

Quelles tailles le set généré inclut-il ?

16, 32, 48 (favicons), 180 (Apple touch icon), 192 et 512 (PWA). Plus un manifest.json et un snippet HTML à coller dans votre projet.

Et si ma source n'est pas carrée ?

Nous la recadrons automatiquement au centre en carré. Pour un meilleur rendu, fournissez une image carrée avec le contenu principal centré.

Quel format fonctionne le mieux comme source ?

PNG avec fond transparent. Pour SVG, passez d'abord par notre outil SVG → PNG.

Ai-je encore besoin d'un fichier .ico séparé en 2026 ?

Les navigateurs modernes utilisent volontiers les favicons PNG référencés via <link rel="icon" type="image/png">. L'ancien /favicon.ico n'est nécessaire que si vous supportez des versions très anciennes d'IE. Beaucoup d'équipes en gardent un par sécurité.

Pourquoi mon icône PWA affiche-t-elle un fond blanc au lieu d'être transparente ?

Certaines plateformes (notamment iOS) aplatissent la transparence sur du blanc. Concevez l'icône en supposant qu'un arrière-plan solide apparaîtra, ou fournissez une variante d'icône maskable dans votre manifest avec la bonne safe zone.

Puis-je générer des icônes à partir d'un SVG ?

Convertissez d'abord le SVG en PNG haute résolution avec notre outil SVG → PNG (essayez 1024 px de large), puis donnez ce PNG à Image → Icône. Passer par un PNG garantit que chaque taille est rasterisée de manière identique.