Guide favicon et PWA
Produisez aussi les icônes web standards en parallèle.
Icône maskable : vérifier la zone de sécurité
Vérifiez votre logo dans les aperçus du lanceur, comparez les marges et téléchargez les PNG maskable de 192×192 et 512×512 pixels.
Checklist source
- Utilisez une source PNG/SVG avec silhouette nette.
- 1024×1024 est recommandé pour une bonne qualité 512.
- Simplifiez les détails fins pour mieux résister aux masques de forme.
Flux pratique
- Importez la source puis activez le mode Sécurisé.
- Contrôlez l’aperçu maskable et vérifiez l’éloignement des bords.
- Utilisez une couleur de fond stable si votre logo dépend d’espaces transparents.
- Exportez icon-maskable-192x192 et 512x512 via le ZIP.
Exemple complet
Entrée : Logo d’application PNG avec transparence.
Paramètres : Marge sécurisée + fond uni pour compatibilité launcher.
Sortie : Le sujet reste lisible dans les découpes cercle/squircle.
Conseils safe-area
- Évitez de placer texte, traits fins ou coins importants près du bord externe.
- Testez l’icône sur fond clair et foncé lorsque c’est possible.
- Gardez les exports normaux et maskable dans le même dossier de release.
Questions fréquentes
Pourquoi l’icône maskable diffère de l’icône 512 classique ?
Elle doit garder plus d’espace de sécurité car le launcher applique un masque.
Fond transparent ou uni pour maskable ?
Le fond uni donne souvent un rendu plus stable selon les launchers.
Comment détecter un sujet trop proche des bords ?
Si texte/logo touche la limite de l’aperçu, passez en mode Sécurisé.
Scénarios icônes associés
Guide SVG vers pack
Partir d’un SVG et exporter tous les fichiers en un flux.
Outils associés
Encodage et décodage Base64
Convertissez vos assets image en Base64 pour debug ou intégration.
Outil QR Code
Générez des QR codes pour pages d’installation app et liens QA.
Convertisseur de timestamp
Convertissez les timestamps de release ou cache-busting pendant les checks.