Installer les favicons et icônes PWA sur votre site

Générez et décompressez le pack, ajoutez les liens HTML et vérifiez les chemins des icônes dans le manifeste web.

Importer une image pour commencer

Entrée recommandée

PNG ou SVG, idéalement carré et au moins 512×512.
Le fond transparent est préféré pour les logos à placement flexible.
Si la source n’est pas carrée, l’outil ajoute automatiquement un canevas centré.

Flux pratique

Importez la source et vérifiez les limites du sujet détecté.
Choisissez le mode Équilibré ou Sécurisé et contrôlez les aperçus favicon/PWA.
Vérifiez le nom du manifest, la couleur de fond et la couleur de thème avant export.
Téléchargez le ZIP avec favicon.ico, 16/32/48, Apple 180 et PWA 192/512.

Exemple complet

Entrée : Logo SVG transparent 1024×1024.

Paramètres : Marge équilibrée + fond transparent.

Sortie : Jeu d’icônes web/PWA prêt à intégrer dans le site.

Conseils avant publication

Utilisez une marque source simple pour rester lisible en 16×16 et 32×32.
Conservez un ZIP canonique avec le manifest et les icônes déployées en production.
Après publication, vérifiez favicon et icônes PWA dans un vrai navigateur.

Utiliser le pack téléchargé

Le ZIP contient 10 icônes PNG, favicon.ico et site.webmanifest. Ce sont des ressources web et PWA, pas un projet complet d’application native.

Fichiers inclus dans le ZIP

favicon-16x16.png
favicon-32x32.png
favicon-48x48.png
apple-touch-icon.png
icon-192x192.png
icon-512x512.png
icon-maskable-192x192.png
icon-maskable-512x512.png
icon-256x256.png
icon-1024x1024.png
favicon.ico
site.webmanifest

Décompressez le ZIP et placez les fichiers sur votre site. Cet exemple les regroupe à la racine du site.
Ajoutez les liens suivants dans le head HTML de vos pages.
Avant l’export, renseignez le nom, les couleurs et l’URL de démarrage. Gardez site.webmanifest à côté des quatre PNG PWA référencés : leurs chemins sont relatifs au manifeste.
Ouvrez les URL des icônes et du manifeste pour vérifier leur chargement, puis testez le rendu sur vos appareils cibles. Les icônes seules ne suffisent pas à créer une PWA installable.

<link rel="icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Avec un sous-dossier comme /icons/, adaptez les liens HTML et gardez le manifeste avec les PNG. Réglez start_url sur l’entrée réelle de votre application. Le SVG source n’est pas inclus dans le ZIP.