Créateur de favicon en ligne gratuit
Générateur de favicon : créez un favicon.ico à partir de votre logo
Transformez un PNG, JPG, WebP ou SVG en favicon.ico de 16, 32 et 48 px, retouchez les toutes petites tailles pixel par pixel, prévisualisez-le dans un onglet de navigateur et copiez la balise <link>. Gratuit, transparent, rien n'est conservé.
Comment ça marche
Créer un favicon en trois étapes
Environ trois minutes du logo au fichier à mettre en ligne. Partez d'une image carrée d'au moins 256 px, ou dessinez le favicon de zéro.
-
01Importer votre logo
Appuyez sur Importer, choisissez un PNG, JPG, WebP ou SVG (ou déposez-le sur la page), faites glisser le cadre carré sur la partie voulue et cliquez sur Importer.
-
02Retoucher les tailles 16 et 32 px
Ouvrez les petites tailles sur la grille de pixels, supprimez les détails fins et épaississez les traits. Ouvrez l'Aperçu dans Windows pour voir l'icône dans une maquette d'onglet de navigateur.
-
03Exporter favicon.ico
Appuyez sur Exporter, cochez seulement 16, 32 et 48 px, saisissez
faviconcomme nom de fichier et cliquez sur Télécharger l'.ICO. L'onglet Web favicon montre la balise à coller.
Quels fichiers
favicon.ico, icône Apple touch, PNG et SVG
À quoi sert chaque fichier, et lesquels IconEditor produit pour vous.
| Fichier | Utilisation | Fourni par IconEditor ? |
|---|---|---|
favicon.ico (16, 32, 48 px) | Tous les navigateurs de bureau, les favoris, les outils qui demandent /favicon.ico sans lire votre HTML | Oui. Cochez 16, 32 et 48 px à l'export. |
| PNG en 16 / 32 / 48 px | Balises explicites <link rel="icon" type="image/png" sizes="32x32"> | Oui. Télécharger en PNG pour une taille, ou un ZIP de toutes les tailles cochées. |
apple-touch-icon.png (180 px) | Écran d'accueil de l'iPhone et de l'iPad | En partie. Exportez le PNG 256 px et réduisez-le à 180 px avec un outil d'image ; il n'y a pas d'emplacement 180 px. |
| PNG 192 et 512 px | Android, PWA, manifeste d'application web | Non. La plus grande taille est 256 px. Redimensionnez votre illustration d'origine en 192 et 512 px avec un outil d'image. |
icon.svg | Navigateurs modernes ; s'adapte à toutes les tailles | Non. IconEditor n'écrit pas de SVG. Si votre logo est déjà un SVG, mettez-le en ligne tel quel à côté du .ico. |
manifest.webmanifest | Noms et icônes des applications web installables | Non. Ce fichier s'écrit à la main (trois lignes suffisent pour commencer). |
Pour un site classique — blog, boutique, page d'entreprise — le .ico plus une icône Apple touch suffisent. Les PNG plus grands ne comptent que si l'on installe votre site comme une application.
L'ajouter à votre site
Les balises <link> à copier
Envoyez les fichiers à la racine de votre site, puis ajoutez les balises dans le <head>.
Minimal : seulement le .ico
<link rel="icon" href="/favicon.ico" sizes="any">C'est exactement l'extrait de l'onglet Web favicon de la boîte d'export. Les navigateurs demandent aussi /favicon.ico d'eux-mêmes quand aucune balise n'est présente : le fichier à la racine du site fonctionne donc même sans elle.
Recommandé : ico + SVG + icône Apple touch
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">Quand vous fournissez aussi une icône SVG, écrivez sizes="32x32" sur le lien du .ico : sinon Chrome peut préférer le .ico au SVG. Retirez les lignes SVG et manifeste si vous n'avez pas ces fichiers.
Ce que regarde Google Search
Google affiche votre favicon à côté du résultat dans la recherche mobile et desktop. Ses consignes demandent une image carrée dont la taille est un multiple de 48 px (l'entrée 48 px de votre .ico convient), un seul favicon pour tout le site, une URL stable, une page que Googlebot a le droit d'explorer et un fichier non bloqué dans robots.txt. Après un changement, comptez de quelques jours à quelques semaines avant de le voir dans les résultats.
Conception
Un favicon encore lisible à 16 pixels
L'icône entière fait à peu près la hauteur d'une lettre minuscule.
Une forme, une ou deux couleurs
Utilisez l'initiale ou la partie la plus simple du logo. Un logotype lisible à 200 px devient une tache à 16 px.
Retouchez la version 16 px à la main
Une réduction automatique brouille les traits d'un pixel. Sur la grille de pixels, vous placez vous-même chacun des 256 pixels ; cinq minutes, et ça se voit.
Vérifiez les onglets clairs et sombres
Les navigateurs affichent le favicon sur fond clair comme sur fond sombre. Prévisualisez l'icône sur les deux et évitez les aplats de noir ou de blanc purs sur fond transparent.
Gardez la transparence à bon escient
Un favicon transparent se fond dans l'onglet ; un carré arrondi coloré reste visible sur tous les thèmes. Choisissez avec Arrière-plan et Coins sous le canevas.
Les principes sont les mêmes que pour une icône d'application Windows, d'où le même fichier pour les deux. Le guide de conception d'icône et l'aide-mémoire des tailles vont plus loin.
Qu'est-ce qu'un favicon ?
Un favicon est la petite icône que le navigateur affiche à côté du titre de la page dans l'onglet, dans les favoris et dans l'historique ; les moteurs de recherche comme Google l'affichent aussi à côté de votre résultat sur mobile. Le nom vient de « favorite icon ». Techniquement, c'est une petite image — traditionnellement un favicon.ico multi-tailles à la racine du site, aujourd'hui souvent accompagné d'un SVG et d'un PNG pour les téléphones.
De quelles tailles de favicon ai-je besoin ?
Un favicon.ico contenant 16, 32 et 48 px couvre tous les navigateurs de bureau et respecte la règle de Google (« multiple de 48 px »). Ajoutez une apple-touch-icon de 180 × 180 px pour l'écran d'accueil iOS et, si vous proposez une application web, des PNG de 192 et 512 px dans le manifeste web. IconEditor produit le .ico et des PNG à ses sept tailles (jusqu'à 256 px) ; les fichiers de 180, 192 et 512 px sont à créer avec un outil d'image.
Ce générateur crée-t-il le pack de favicons complet ?
Non, et il est honnête là-dessus. Il crée le favicon.ico et vous donne des PNG en 16, 24, 32, 48, 64, 128 et 256 px, plus l'extrait de code <link>. Il ne génère ni fichiers de 180, 192 ou 512 px, ni manifeste web, ni fichier browserconfig. Pour la plupart des sites, le .ico plus une apple-touch-icon suffisent ; s'il vous faut le jeu complet, dessinez l'icône ici et utilisez un générateur de pack pour les dimensions.
Faut-il utiliser ICO, PNG ou SVG pour mon favicon ?
Les trois fonctionnent. Le .ico est celui que tous les navigateurs et beaucoup d'outils demandent encore automatiquement à l'adresse /favicon.ico : fournissez-le. Un SVG s'adapte à toutes les tailles et peut suivre le mode sombre, mais les anciens navigateurs l'ignorent. Le PNG est le format le plus simple pour l'icône Apple touch. Un ensemble courant et robuste : favicon.ico + SVG + PNG 180 px.
Puis-je faire un favicon à partir d'un JPG ou d'un SVG ?
Oui. JPG, PNG, WebP, GIF, BMP et SVG s'importent de la même façon. Un JPG n'a pas de transparence : le favicon est donc un carré plein, sauf si vous effacez l'arrière-plan ou réglez les coins. Un SVG est rastérisé à 1024 px puis réduit, ce qui donne le résultat le plus net.
Pourquoi mon favicon ne change-t-il pas après la mise en ligne d'un nouveau ?
Les navigateurs mettent les favicons en cache de façon très agressive, souvent indépendamment de la page. Rechargez avec Ctrl+F5, ouvrez directement l'URL du fichier et actualisez-la, ou donnez au nouveau fichier un autre nom (par exemple favicon-v2.ico) et mettez le lien à jour. Les résultats de recherche peuvent mettre des jours, voire des semaines, à prendre en compte un changement.
Le générateur est-il gratuit, et mes images sont-elles conservées ?
Gratuit, sans compte ni filigrane. Votre image est convertie en mémoire sur notre serveur puis supprimée aussitôt ; votre travail en cours n'est enregistré que dans votre propre navigateur. Voir la politique de confidentialité.
Voir aussi
Pour continuer
Créez votre favicon maintenant
L'éditeur s'ouvre avec la boîte d'import prête. Gratuit, dans votre navigateur, rien à installer, rien de conservé.