Générateur de Favicon
NouveauTendance 🔥Générez toutes les tailles de favicon à partir d'une seule image
Comment utiliser Générateur de Favicon
- 1Upload a square image (PNG recommended)
- 2The tool generates all standard favicon sizes automatically
- 3Download individual sizes or a ZIP of all files
- 4Copy the HTML snippet to add favicons to your website
À propos de Générateur de Favicon
Upload a single image and generate all standard favicon sizes (16x16, 32x32, 48x48, 180x180, 192x192, 512x512) plus an ICO file, ready for use in any website.
Fonctionnalités clés de Générateur de Favicon
- Génère six tailles standard : 16x16, 32x32, 48x48, 96x96, 180x180 et 512x512
- Inclut l'Apple Touch Icon 180x180 pour les signets sur l'écran d'accueil iOS
- Bouton de téléchargement individuel pour chaque taille
- Extrait de balise HTML link prêt à l'emploi pour chaque taille générée
- Sortie PNG avec transparence préservée depuis l'image source
- Génération instantanée dans le navigateur — aucun téléversement requis
- Fonctionne mieux avec des images sources carrées de 512x512 ou plus
- Copie en un clic pour le bloc d'extrait HTML complet
Formats supportés
Formats d'entrée
Formats de sortie
A square source image at 512x512 pixels or larger is strongly recommended for sharp results at all sizes.
Exemples
Ajouter un favicon à un nouveau site web
Téléversez le logo, cliquez sur Générer des favicons, téléchargez toutes les tailles et collez l'extrait HTML dans l'en-tête de votre document.
Entrée
512x512 square logo PNG
Sortie
Six PNG files (16 to 512px) plus HTML snippet
Générer un Apple Touch Icon pour PWA
Téléchargez uniquement la taille 180x180 pour la balise de lien Apple Touch Icon dans votre manifeste d'application web progressive.
Entrée
New brand logo PNG
Sortie
Fresh set of all standard favicon sizes
Generate Apple Touch Icon for PWA
Download just the 180x180 size for the Apple Touch Icon link tag in your Progressive Web App manifest.
Entrée
App icon PNG
Sortie
180x180 Apple Touch Icon PNG
Cas d'utilisation courants
- Ajouter un ensemble complet de favicons à un nouveau projet de site web
- Mettre à jour un favicon obsolète avec un logo de marque actualisé
- Générer l'Apple Touch Icon pour les signets d'écran d'accueil iOS
- Créer toutes les tailles d'icônes requises pour un manifeste d'application web progressive
- Fournir plusieurs tailles de favicon pour une meilleure compatibilité navigateur et OS
- Assurer la cohérence de la marque avec un favicon correspondant sur tous les navigateurs
Dépannage
Le favicon apparaît flou aux petites tailles (16x16, 32x32)
Solution
Commencez avec une image source d'au moins 512x512 pixels. L'algorithme de réduction a besoin de suffisamment de détails.
Le favicon n'apparaît pas dans l'onglet du navigateur
Solution
Videz le cache du navigateur et rechargez la page. Les navigateurs mettent agressivement en cache les favicons — même après la mise à jour du HTML.
L'image source non carrée apparaît déformée
Solution
Recadrez d'abord votre image source en carré avec l'outil Crop Image, puis générez les favicons depuis la version carrée.
Questions fréquemment posées
What image size should I upload?
At least 512x512 pixels for best results.
What formats are generated?
PNG files for all sizes plus a multi-size ICO file.
Puis-je générer un fichier .ico ?
L'outil génère actuellement des fichiers PNG pour toutes les tailles. La plupart des navigateurs modernes acceptent les favicons PNG. Pour le format .ico, convertissez le PNG 16x16 ou 32x32 avec l'outil Convertisseur d'image.
Comment utiliser les favicons dans une application React ou Next.js ?
Placez les fichiers PNG dans votre dossier public et ajoutez les balises HTML link à l'en-tête de votre document. Next.js dispose d'une API de métadonnées intégrée qui accepte directement les chemins des favicons.
How do I add the favicons to my website?
Download the generated PNG files and place them in your website root or an assets folder. Then paste the provided HTML link tag snippet into the head section of your HTML file.
Why is my favicon not showing after adding the HTML snippet?
Browsers cache favicons aggressively. After updating your site, perform a hard reload (Ctrl+Shift+R on Windows, Cmd+Shift+R on Mac) or clear the browser cache to see the new favicon.
Can I generate a .ico file?
Currently the tool generates PNG files for all sizes. Most modern browsers accept PNG favicons. For .ico format, convert the 16x16 or 32x32 PNG using the Image Converter tool.
How do I use the generated favicons in a React or Next.js app?
Place the PNG files in your public folder and add the HTML link tags to your document head or app layout. Next.js has a built-in metadata API that accepts favicon paths directly.