Pour créer un favicon, déposez une image carrée PNG, JPG, WebP ou SVG ci-dessus, choisissez un fond transparent ou une couleur unie et une marge intérieure, puis cliquez sur « Générer les favicons ». Vous obtenez favicon.ico (16, 32 et 48 px), des PNG de 16 et 32 px, une Apple touch icon de 180×180, des icônes Android de 192 et 512 px, un site.webmanifest et le HTML, en ZIP.
Comment utiliser l'outil Générateur de favicon
- 1
Choisissez l'image source
Déposez un fichier PNG, JPG, WebP ou SVG. Une image carrée donne le meilleur résultat ; une image non carrée est centrée, jamais étirée.
- 2
Réglez le fond et la marge
Gardez un fond Transparent ou choisissez une Couleur unie, et utilisez le curseur de marge intérieure (0 à 20 %) pour donner de l'air à votre icône.
- 3
Cliquez sur « Générer les favicons »
L'outil produit chaque taille dans votre navigateur et construit le fichier ICO, les icônes PNG et le web manifest.
- 4
Téléchargez et intégrez
Téléchargez le ZIP, placez les fichiers à la racine de votre site et copiez les lignes HTML affichées sur la page dans la section head de vos pages.
Quels fichiers le générateur de favicon crée-t-il ?
Navigateurs, téléphones et systèmes d'exploitation cherchent chacun une icône un peu différente : une seule image ne suffit donc pas. Ce générateur de favicon produit l'ensemble dont la plupart des sites ont besoin : favicon.ico, qui contient des versions de 16, 32 et 48 pixels dans un seul fichier ; favicon-16x16.png et favicon-32x32.png pour les navigateurs qui préfèrent le PNG ; apple-touch-icon.png en 180×180 pour l'écran d'accueil de l'iPhone et de l'iPad ; et android-chrome-192x192.png ainsi que android-chrome-512x512.png pour Android et les applications web installées.
Il écrit aussi un site.webmanifest pour Android et les applications web installées, et un fichier favicon-html.txt contenant le code HTML pour vos pages. Le tout est réuni dans un seul ZIP, sans rien à renommer ni redimensionner à la main.
Les mêmes balises link s'affichent sur la page après la génération. Copiez-les dans la section head de votre modèle HTML, ou dans les réglages d'en-tête de votre CMS ou framework, puis envoyez les fichiers à la racine de votre site.
Taille du favicon, transparence et Apple touch icon
Un favicon s'affiche en tout petit : les formes simples s'en sortent le mieux. Une icône de 16 px a la place pour une lettre ou un symbole épais, pas pour un logo complet avec slogan. Si votre logo est détaillé, utilisez plutôt son symbole ou son initiale comme image source, et vérifiez les résultats en 16 et 32 px avant de publier.
Un fond transparent permet à l'icône de s'afficher proprement sur des onglets clairs comme sombres. L'Apple touch icon fait exception : iOS affiche les icônes transparentes sur du noir, ce fichier reçoit donc toujours un fond plein. Le curseur de marge intérieure ajoute de l'espace autour du dessin, ce qui évite qu'une icône collée aux bords paraisse à l'étroit sur un écran d'accueil.
Une source SVG est rastérisée à 4× avant d'être réduite, si bien que même l'icône de 512 px reste nette. Pour une source PNG ou JPG, partez d'une image d'au moins 512×512 pixels pour que la plus grande icône n'ait pas à être agrandie.
Convertir un PNG en ICO sans rien installer
Le format .ico est ancien mais toujours utile : de nombreux navigateurs et outils demandent favicon.ico à la racine d'un site par défaut, même si aucune balise HTML n'y renvoie. Fabriquer un ICO multi-tailles demande d'habitude un plugin graphique ou un outil en ligne de commande. Ici, la conversion PNG en ICO fait partie du même clic que les autres icônes.
Ce générateur de favicon.ico fonctionne entièrement dans votre navigateur. Votre logo n'est jamais envoyé aux serveurs de Krawly et rien n'est stocké, ce qui compte quand la marque ou le produit n'est pas encore lancé. C'est gratuit, sans inscription et sans filigrane sur vos icônes.
Conseils pour de meilleurs résultats
- Utilisez une image source carrée d'au moins 512×512 px, ou un SVG, pour que les grandes icônes restent nettes.
- Simplifiez pour les petites tailles : une lettre ou un symbole se lit bien mieux en 16 px qu'un logo complet.
- Ajoutez 5 à 10 % de marge intérieure si votre dessin touche les bords, pour qu'il ne soit pas coupé par les masques arrondis des écrans d'accueil.
- Choisissez une couleur de fond assortie à votre marque, puisque l'Apple touch icon en reçoit toujours une.
- Les navigateurs gardent les favicons en cache longtemps ; après un remplacement, testez dans une fenêtre de navigation privée.
Questions fréquentes
De quelles tailles de favicon ai-je besoin ?
Un ensemble pratique comprend un favicon.ico avec 16, 32 et 48 px, des favicons PNG de 16 et 32 px, une Apple touch icon de 180×180, et des icônes de 192 et 512 px pour Android, référencées dans un web manifest. Ce générateur crée exactement cet ensemble à partir d'une seule image.
Comment ajouter le favicon à mon site ?
Décompressez les fichiers à la racine de votre site, puis copiez les lignes HTML affichées après la génération (également enregistrées dans favicon-html.txt) dans la section head de vos pages. Ce sont les balises link qui indiquent aux navigateurs et appareils où trouver vos icônes et votre manifest.
Puis-je utiliser un logo SVG comme source ?
Oui. Les sources SVG sont rastérisées à 4× avant d'être réduites à chaque taille, les icônes sont donc nettes. Les PNG, JPG et WebP fonctionnent aussi ; dans ce cas, utilisez une image au moins aussi grande que l'icône de 512 px souhaitée.
Et si mon image n'est pas carrée ?
Elle est centrée sur une toile carrée sans être étirée, ses proportions restent donc justes. L'espace restant est transparent ou rempli de la couleur de fond choisie. Pour un résultat optimal, recadrez d'abord l'image en carré.
Pourquoi l'Apple touch icon a-t-elle un fond ?
iOS affiche les icônes transparentes de l'écran d'accueil sur un fond noir, ce qui peut faire disparaître un logo sombre. Pour l'éviter, apple-touch-icon.png reçoit toujours un fond plein, même si les autres icônes sont transparentes. Choisissez une couleur qui met votre logo en valeur.
Mon logo est-il envoyé pour générer les favicons ?
Non. Le redimensionnement, l'assemblage du fichier ICO et la création du ZIP se font dans votre navigateur. L'image n'est jamais envoyée aux serveurs de Krawly et rien n'est stocké. L'outil est gratuit, sans compte et sans filigrane.
Confidentiel par conception. Chaque convertisseur Krawly tourne dans votre navigateur grâce à JavaScript et WebAssembly. Vos fichiers ne sont ni envoyés, ni stockés, ni vus par personne : quand vous fermez l'onglet, ils disparaissent.