Générateur Favicon
Un outil pour générer des favicons de différentes tailles en téléchargeant une image.
💡 Qu'est-ce qu'un favicon ?
Une petite icône affichée dans les onglets du navigateur ou les signets d'un site Web.
📋 Tailles générées
- 16x16, 32x32 - Favicon de navigateur par défaut
- 180x180 - Apple Touch Icon (iOS)
- 192x192, 512x512 - Android/PWA
🎨 Recommandations
- Utiliser une image carrée (ratio 1:1)
- Design simple (tenir compte de l'affichage réduit)
- Couleurs à contraste élevé (améliore la lisibilité)
- Format PNG recommandé (arrière-plan transparent possible)
📌 Utilisation HTML
<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="/favicon-180x180.png">
Tailles générées
| Taille | Usage |
|---|---|
| 16x16 | Favicon de navigateur de base |
| 32x32 | Favicon standard |
| 48x48 | Navigateur haute qualité |
| 64x64 | Tuile Windows |
| 128x128 | Icône d'app iOS |
| 180x180 | Apple Touch Icon |
| 192x192 | Android/Chrome |
| 512x512 | Splash PWA |
Utilisation HTML
<!-- Favicon de base -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<!-- Apple -->
<link rel="apple-touch-icon" sizes="180x180" href="/favicon-180x180.png">
<!-- Android/Chrome -->
<link rel="icon" type="image/png" sizes="192x192" href="/favicon-192x192.png">
<!-- PWA -->
<link rel="icon" type="image/png" sizes="512x512" href="/favicon-512x512.png">
Recommandations de design
✅ Bon
- Image carrée
- Design simple
- Couleurs à contraste élevé
- Format PNG (transparence possible)
❌ À éviter
- Détails complexes
- Texte long
- Couleurs à faible contraste
- Image horizontalement longue
Conseils d'utilisation
💡 Astuce 1 : Image d'origine
Utilisez une image haute qualité d'au moins 512x512px.
💡 Astuce 2 : Test
Testez réellement dans plusieurs navigateurs.
💡 Astuce 3 : Branding
Utilisez le logo ou l'icône de marque de l'entreprise.
Structure de fichiers
Placer les favicons générés à la racine du site web :
/
├── favicon-16x16.png
├── favicon-32x32.png
├── favicon-48x48.png
├── favicon-180x180.png
├── favicon-192x192.png
└── favicon-512x512.png
Questions fréquemment posées
Q : Les fichiers ICO sont-ils aussi générés ?
R : Actuellement, seul le PNG est pris en charge. Pour ICO, convertissez le PNG.
Q : Le fond transparent est-il possible ?
R : Oui, c'est un fichier PNG donc le fond transparent est possible.
Q : Toutes les tailles sont-elles nécessaires ?
R : Généralement, 16x16, 32x32 et 180x180 suffisent.
Confidentialité
Tous les traitements d'images sont effectués dans votre navigateur. Les images ne sont pas envoyées à nos serveurs.
💬 Cet outil vous a-t-il été utile ?
N'hésitez pas à nous envoyer vos commentaires ou suggestions à tout moment !