Quel format d'image dois-je télécharger ?

PNG avec un arrière-plan transparent fonctionne mieux. Utilisez une image carrée d'au moins 512 x 512 pixels afin que l'outil puisse être réduit sans perte de qualité. SVG fonctionne également bien car il s'adapte à n'importe quelle taille.

Quelles tailles cela génère-t-il ?

16x16 (onglet du navigateur), 32x32 (onglet du navigateur @2x), 48x48 (barre des tâches Windows), 180x180 (icône Apple Touch), 192x192 (écran d'accueil Android), 512x512 (écran de démarrage PWA). Le fichier ICO contient des tailles 16, 32 et 48 px.

Où dois-je placer les fichiers favicon ?

Placez favicon.ico dans le répertoire racine de votre site Web. Les autres tailles PNG vont dans votre dossier public ou dans tout chemin accessible. Ajoutez les balises de lien HTML dans votre section pointant vers chaque emplacement de fichier.

Pourquoi mon favicon ne se met-il pas à jour dans le navigateur ?

Les navigateurs mettent en cache de manière agressive les favicons. Videz le cache de votre navigateur, essayez de l'ouvrir dans une fenêtre de navigation privée ou ajoutez une chaîne de requête de version (?v=2) à l'URL du favicon pour forcer une actualisation.

Pourquoi mon favicon ne se met-il pas à jour ?

Les navigateurs mettent en cache les favicons de manière agressive, parfois pendant des jours. Forcez une actualisation en vidant le cache, en ouvrant directement l'URL de l'icône ou en ajoutant un paramètre de requête de version à la balise de lien.

Mon image est-elle téléchargée sur un serveur ?

Non. La génération s'effectue dans votre navigateur.

Dois-je utiliser SVG ou PNG ?

SVG pour la source (indépendant de la résolution). Le générateur génère des fichiers PNG dans des tailles spécifiques ; les navigateurs modernes prennent également en charge les favicons SVG via le lien rel=icon type=image/svg+xml.

Qu'est-ce que site.webmanifest ?

Un manifeste JSON pour les applications Web progressives décrivant des icônes, des couleurs et d'autres métadonnées. Requis pour les applications Web installables ; il est inoffensif d’inclure même sur des sites standards.

Générateur de Favicons

À propos de cet outil

Un favicon est la petite icône qui apparaît dans les onglets du navigateur, les favoris et les listes d'historique. Le favicon original – un fichier ICO 16 × 16 sur /favicon.ico – s'est développé en un ensemble complexe d'icônes de différentes tailles pour différentes plates-formes : 16 × 16 et 32 × 32 pour les onglets du navigateur, 180 × 180 pour les écrans d'accueil iOS, 192 × 192 et 512 × 512 pour Android et différentes tailles pour les vignettes Windows. Produire tout cela à partir d’une image source unique est ce que fait un générateur de favicon moderne.

Cet outil prend une seule image source haute résolution (généralement un logo carré) et génère l'ensemble complet des actifs favicon ainsi que les balises de lien HTML nécessaires pour les référencer. La sortie comprend ICO, plusieurs PNG et un manifest.json pour les métadonnées progressives des applications Web. Déposez les fichiers résultants à la racine de votre site et référencez-les via le HTML généré.

Tout le traitement s'effectue dans votre navigateur. Pas de téléchargement, pas d'appel API, pas de limite de débit. La sortie fonctionne sur tous les navigateurs et systèmes d’exploitation modernes qui affichent des favicons.

Pourquoi générer un Favicon

Les sites sans favicons semblent inachevés. Les onglets du navigateur affichent une icône générique ; les signets n'ont pas d'identifiant visuel ; le site semble moins professionnel. L'ajout d'un ensemble de favicon approprié est une étape de polissage à faible effort et à fort impact qui signale l'attention portée aux détails.

Les exigences modernes en matière de favicon se sont étendues au-delà de /favicon.ico. Les icônes de l'écran d'accueil iOS, les icônes Android Chrome, les icônes de vignettes Windows et les variantes du mode sombre utilisent toutes des fichiers différents. Les générer tous à partir d’une seule source garantit une image de marque cohérente sans gérer chaque fichier à la main.

Comment l'utiliser

Téléchargez l'image source, obtenez l'ensemble complet de favicon.

Télécharger l'image source: Utilisez une image carrée d'au moins 512 × 512 pixels. Le format PNG est préférable (prise en charge de la transparence) ; SVG est également accepté. Les sources à plus haute résolution produisent des icônes plus petites et plus nettes.
Configurer les options de la plateforme: Activez les sorties iOS, Android, Windows et PWA selon vos besoins. Les paramètres par défaut produisent l’ensemble standard dont la plupart des sites ont besoin.
Personnalisez les couleurs et le thème: Choisissez les couleurs du thème pour les vignettes Windows et les écrans de démarrage PWA. Faites correspondre votre identité de marque.
Télécharger et déployer: Enregistrez le zip généré. Placez les fichiers à la racine de votre site et ajoutez les balises de lien HTML générées à votre <head>. Le HTML référence chaque icône à la bonne taille.

Cas d'utilisation courants

Ajouter des favicons à de nouveaux sites Web — Chaque nouveau site a besoin d'un ensemble complet de favicon. Generation le produit à partir d’une seule source de logo.
Mise à jour des favicons obsolètes — Les sites plus anciens ont souvent simplement /favicon.ico ; les exigences modernes nécessitent un ensemble plus complet. La régénération remplit les actifs manquants.
Produire des icônes PWA — Les applications Web progressives nécessitent des icônes 192 × 192 et 512 × 512 ainsi que des métadonnées manifestes. Le générateur les produit correctement.
Migration entre les marques — Les changements de marque nécessitent souvent de régénérer tous les favicons. La génération à partir d’une source unique évite la perte d’actifs.
Test avec différentes couleurs — Itérer rapidement sur les couleurs du thème et voir immédiatement à quoi ressemble le jeu d'icônes dans différentes tailles.

Détails techniques

L'ensemble complet de favicon modernes : favicon.ico (16+32+48 multi-résolution), favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png (180×180), android-chrome-192x192.png, android-chrome-512x512.png, mstile-150x150.png. Plus site.webmanifest pour PWA, browserconfig.xml pour Windows.

Chaque PNG est généré par sous-échantillonnage basé sur le canevas à partir de la source. L'ICO est construit en JavaScript en combinant les versions 16/32/48 dans le format ICO multi-résolution à l'aide des écritures DataView.

Les balises de lien HTML référencent chaque fichier avec les attributs rel et size appropriés. Le générateur les produit sous forme d'extrait prêt à copier-coller pour le <head> de votre site.

Meilleures pratiques

Utilisez une source haute résolution — Commencez avec au moins 512 × 512 PNG ou un maître SVG. Le sous-échantillonnage produit des icônes plus petites et plus nettes que la mise à l'échelle d'une petite source.
Tester dans plusieurs navigateurs — Différents navigateurs et plates-formes affichent différentes icônes. Ouvrez le site déployé dans Chrome, Safari, Firefox, Safari mobile et Android Chrome pour confirmer que chacun choisit le bon actif.
Associez les couleurs à votre marque — Les couleurs du thème et les écrans de démarrage PWA doivent refléter l'identité de votre marque. Des couleurs incohérentes produisent une icône d’apparence soignée avec une intégration système incompatible.
Conserver le SVG source pour une régénération future — Lorsque vous changez de nom, vous vous régénérez à partir de la source. Gardez le SVG principal (ou le PNG de la plus haute résolution) accessible.

Questions fréquentes

Quel format d'image dois-je télécharger ?: PNG avec un arrière-plan transparent fonctionne mieux. Utilisez une image carrée d'au moins 512 x 512 pixels afin que l'outil puisse être réduit sans perte de qualité. SVG fonctionne également bien car il s'adapte à n'importe quelle taille.
Quelles tailles cela génère-t-il ?: 16x16 (onglet du navigateur), 32x32 (onglet du navigateur @2x), 48x48 (barre des tâches Windows), 180x180 (icône Apple Touch), 192x192 (écran d'accueil Android), 512x512 (écran de démarrage PWA). Le fichier ICO contient des tailles 16, 32 et 48 px.
Où dois-je placer les fichiers favicon ?: Placez favicon.ico dans le répertoire racine de votre site Web. Les autres tailles PNG vont dans votre dossier public ou dans tout chemin accessible. Ajoutez les balises de lien HTML dans votre section <head> pointant vers chaque emplacement de fichier.
Pourquoi mon favicon ne se met-il pas à jour dans le navigateur ?: Les navigateurs mettent en cache de manière agressive les favicons. Videz le cache de votre navigateur, essayez de l'ouvrir dans une fenêtre de navigation privée ou ajoutez une chaîne de requête de version (?v=2) à l'URL du favicon pour forcer une actualisation.
Pourquoi mon favicon ne se met-il pas à jour ?: Les navigateurs mettent en cache les favicons de manière agressive, parfois pendant des jours. Forcez une actualisation en vidant le cache, en ouvrant directement l'URL de l'icône ou en ajoutant un paramètre de requête de version à la balise de lien.
Mon image est-elle téléchargée sur un serveur ?: Non. La génération s'effectue dans votre navigateur.
Dois-je utiliser SVG ou PNG ?: SVG pour la source (indépendant de la résolution). Le générateur génère des fichiers PNG dans des tailles spécifiques ; les navigateurs modernes prennent également en charge les favicons SVG via le lien rel=icon type=image/svg+xml.
Qu'est-ce que site.webmanifest ?: Un manifeste JSON pour les applications Web progressives décrivant des icônes, des couleurs et d'autres métadonnées. Requis pour les applications Web installables ; il est inoffensif d’inclure même sur des sites standards.

Générateur de Favicons

Faites glisser une image ici

Outils Similaires

Générateur d'Icônes d'App

Générateur de Maquette de Fenêtre de Navigateur

Générateur de Maquette d'Appareils

Générateur de Mèmes

À propos de cet outil

Pourquoi générer un Favicon

Comment l'utiliser

Cas d'utilisation courants

Détails techniques

Meilleures pratiques

Questions fréquentes

Related Articles

Image Format Guide: JPG vs PNG vs WebP vs SVG Explained

Color & Design Tools Guide: Hex, RGB, HSL, and Color Palettes Explained

How to Convert Files Online Safely: Privacy and Security Guide

Why Browser-Based Tools Are the Future: No Installs, No Uploads, No Risk