Vrai Générateur de Favicons en Ligne Gratuit

Générateur de favicons gratuit en ligne. Importez une image et téléchargez un kit d'icônes complet — favicon.ico, icônes PNG, icône Apple touch et manifest web — prêt pour les onglets du navigateur, les favoris et les écrans d'accueil Android et iOS.

Une image carrée, 512 x 512 px ou plus, fonctionne le mieux.

0%
De bord à bordDe l'espace pour respirer
0%
CarréCercle
Paramètres de l'application et de l'installation

Chemin relatif à la racine, comme / ou /icons/.

#FFFFFF

Choisissez une image ou essayez une icône de texte pour commencer.

512 PX
ONGLEt DU NAVIGATEUR
Mon site web
votre-site-web.com
ÉCRAN D'ACCUEIL
Mon site web
PIXEL PARFAIT ?

Comparez les petites tailles.

16px
32px
48px
64px

Téléchargez votre kit d'icônes

7 fichiers d'icônes, un manifest web et des instructions d'installation.

Contenu de votre téléchargement

9 fichiers
favicon.icoClassic browser support
16, 32, 48 px
favicon-16x16.pngBrowser tabs
16 x 16
favicon-32x32.pngHigh-density tabs
32 x 32
favicon-48x48.pngSearch & shortcuts
48 x 48
apple-touch-icon.pngiPhone & iPad
180 x 180
android-chrome-192x192.pngAndroid home screen
192 x 192
android-chrome-512x512.pngLarge app icon
512 x 512
site.webmanifestWeb app metadata
JSON
INSTALL.txtInstallation guide
TXT

Code HTML

HTML

Importez vos fichiers, puis ajoutez ceci dans le <head> de votre site web. Les chemins se mettent à jour selon vos paramètres.

index.html
DE L'IMPORT À PARTOUT

Comment ça marche

Fini le redimensionnement manuel et les suppositions de format.
Passez de votre idée à un site reconnaissable en trois étapes.

01 /

Apportez votre identité.

Importez votre logo ou créez une icône à partir d'une lettre. Des formes simples, un fort contraste et un canevas carré sont votre meilleur point de départ.

02 /

Peaufinez les détails.

Choisissez un arrière-plan, ajustez l'espacement et vérifiez les aperçus en direct. Assurez-vous que votre marque soit reconnaissable même dans un petit onglet de navigateur.

03 /

Donnez un foyer à chaque onglet.

Téléchargez votre kit complet, importez les fichiers et collez le HTML. Votre marque est prête pour les onglets, les favoris et les écrans d'accueil.

CONÇU POUR LES PETITES CHOSES

Fonctionne sur tous les navigateurs et appareils

Un favicon est souvent la plus petite partie de votre marque. Il doit tout de même sembler intentionnel. Générez les bonnes tailles là où les gens trouvent, enregistrent et revisitent votre site.

Créez votre favicon
Navigateurs quotidiensICO + PNG pour les onglets, favoris et raccourcis16-48 PX
Appareils AppleUne icône dédiée et opaque pour l'écran d'accueil180 PX
Android et applications webIcônes haute résolution avec un manifest web192 / 512
LE GUIDE EN DEUX MINUTES

Installation

Aucune configuration compliquée.
Juste quelques fichiers au bon endroit.

Aller à votre HTML
1

Téléchargez et extrayez votre kit d'icônes

Choisissez votre source et ajustez l'aperçu, puis sélectionnez Télécharger le kit de favicons. Extrayez le ZIP pour obtenir les sept fichiers d'icônes, site.webmanifest et un guide d'installation en texte brut.

2

Placez les fichiers où votre site peut les servir

Importez les icônes et le manifest à la racine publique de votre site. Si vous préférez un sous-dossier, définissez Dossier des icônes dans les paramètres de l'application avant de télécharger. Par exemple, /icons/ signifie que vos fichiers doivent être disponibles sur votre-site.com/icons/.

3

Ajoutez le HTML et vérifiez votre travail

Copiez le code généré dans le <head> de chaque page ou de votre mise en page partagée. Supprimez les anciennes balises d'icônes conflictuelles. Ouvrez les URL des icônes directement pour vérifier qu'elles chargent, puis revisitez votre site dans une fenêtre privée pour éviter les icônes en cache obsolètes.

UNE MEILLEURE ICÔNE COMMENCE ICI

Conseils de conception de favicons

Moins de détails. Plus de caractère.

Les traits fins et les mots longs disparaissent aux petites tailles. Utilisez un symbole distinct, un monogramme ou une seule lettre au lieu de compresser tout votre logo dans un carré.

Laissez-lui un peu d'espace.

Utilisez l'espacement pour éloigner votre marque des bords. Apercevez à la fois un onglet et un écran d'accueil : la même image peut sembler très différente à chaque échelle.

Faites compter le contraste.

Les icônes transparentes peuvent disparaître sur un thème de navigateur clair ou sombre. Un fond uni vous assure un contraste prévisible. Vérifiez les deux thèmes avant de publier.

Commencez avec une source nette.

Une grande image propre donne au générateur plus de détails à traiter. Agrandir une petite image ne peut pas récupérer les informations manquantes. Utilisez un SVG ou une source de 512 px si possible.

LES FINES DÉTAILS

Questions fréquentes

Tout ce que vous voulez savoir d'autre sur votre nouveau favicon.

Qu'est-ce qu'un favicon, et pourquoi en ai-je besoin ?

Un favicon est la petite icône qui représente votre site dans les onglets, favoris, historiques et parfois les résultats de recherche. Une icône claire et cohérente aide les visiteurs à reconnaître votre site parmi de nombreux onglets ouverts. Les icônes d'écran d'accueil jouent un rôle similaire lorsque quelqu'un enregistre votre site sur un téléphone.

Quelle image devrais-je importer ?

Commencez avec un PNG, SVG, JPEG ou WebP carré, idéalement d'au moins 512 x 512 pixels. Les PNG transparents et les SVG autonomes fonctionnent particulièrement bien. Gardez le design simple : un symbole ou une initiale est généralement plus lisible qu'un logotype complet à 16 pixels. Les fichiers jusqu'à 10 MO et les images jusqu'à 4096 pixels par côté sont pris en charge.

Cet outil est-il gratuit ? Mes images sont-elles importées ?

Le générateur est gratuit, sans compte ni filigrane. Le décodage des images, les aperçus et la création du ZIP se font dans votre navigateur. Votre image source n'est pas importée sur un serveur. Votre navigateur peut télécharger les ressources du site lors de votre première visite, mais le générateur n'envoie votre image nulle part.

Pourquoi les icônes Apple et Android ont-elles un fond ?

Les icônes d'écran d'accueil rendent mieux sur un canevas carré uni. Cet outil aplatit ces exports sur votre couleur d'arrière-plan choisie, même lorsque les icônes transparentes du navigateur sont activées. L'appareil applique son propre traitement des coins. Les exports Android utilisent l'objectif standard « any » ; ce ne sont pas des icônes maskable certifiées.

Pourquoi mon ancien favicon s'affiche-t-il encore ?

Les navigateurs mettent en cache les favicons de manière agressive. Vérifiez d'abord que chaque URL générée s'ouvre directement et que votre page ne contient qu'un seul ensemble prévu de liens d'icônes. Ensuite, essayez une fenêtre privée ou videz le cache du site. Pour une mise à jour fiable, utilisez un nouveau dossier comme /icons-v2/ et mettez à jour les liens HTML. Les moteurs de recherche peuvent mettre plus de temps à recrawler l'icône.

Le manifest web transforme-t-il mon site en PWA ?

Non. Le manifest fournit un nom d'application, des couleurs et des icônes, mais n'ajoute pas de fonctionnalité hors ligne ni de service worker. L'installabilité dépend de votre navigateur et de la configuration de votre site, y compris HTTPS. Le manifest généré utilise / comme URL de départ ; modifiez-le si votre application vit dans un sous-répertoire.

Puis-je utiliser ces fichiers avec WordPress, Shopify ou Astro ?

Oui. Les fichiers sont des images PNG et ICO standard. Dans Astro, placez-les dans public/ et ajoutez les balises générées à l'en-tête de votre mise en page partagée. Pour WordPress ou Shopify, utilisez le réglage d'icône de site de la plateforme si possible, ou importez les fichiers et ajustez l'en-tête de votre thème. Les plateformes hébergées peuvent contrôler les noms de fichiers et les URL, alors adaptez les chemins en conséquence.