Conçu sur une IA avancée exécutée sur votre appareil et l'accélération matérielle, pour des performances professionnelles sans compromis sur la confidentialité.IA sur votre appareil : performant et privé.
Générateur de favicon
Générateur de favicon : toutes les tailles et le HTML.
- Fonctionne sur votre appareil
- ICO, PNG, SVG et manifeste
- Un logo gratuit · 20 avec Pro
Déposez un logo ici
PNG, JPG, WebP, AVIF, GIF, BMP ou SVG · jusqu'à 25.0 MB
Android rogne les icônes à la forme de l'appareil : éloignez le motif du bord.
Les tuiles Windows, les densités Android et le passage du vectoriel font partie de Pro.
Elles arrivent dans site.webmanifest et dans la balise theme-color.
Pourquoi un générateur de favicon ?
Le favicon apparaît dans les onglets et favoris ; il renforce la marque et le professionnalisme.
Avantages
- Marque : Icône reconnaissable.
- Tailles : 16, 32, 48 px et plus.
- Formats : ICO et PNG.
- Simple : Importer et télécharger.
- Qualité : Une bonne source donne un bon icône.
Comment créer un favicon
- Apportez votre motif: Déposez un logo : PNG, JPG, WebP, AVIF, GIF, BMP ou SVG. Pas de logo ? Passez en mode Texte et tapez une ou deux lettres, ou choisissez un emoji.
- Choisissez le cadrage: Ajuster garde tout le logo et comble le reste, Remplir recadre jusqu’aux bords, Étirer ignore la forme. Ajoutez une marge si Android va rogner votre icône, et arrondissez les coins si vous les voulez ronds.
- Réglez les arrière-plans: Laissez l’icône transparente ou donnez-lui une couleur. Le fond iPhone se règle à part : iOS n’y accepte pas la transparence et affiche une icône transparente sur du noir.
- Nommez le site: Le nom, le nom court et la couleur du thème vont dans site.webmanifest et dans la balise thème-color, que lit l’invite d’installation.
- Téléchargez et installez: Une pression vous donne un ZIP. Placez tous les fichiers à la racine de votre site, puis collez dans le head les balises link copiées.
Fonctionnement
Votre logo est réduit à chaque taille d’icône sur votre appareil, puis écrit dans favicon.ico, la série de PNG, site.webmanifest et le HTML qui y renvoie.
Processus
- Chargement : Le fichier est décodé une fois et conservé, si bien qu’un changement de réglage ne le relit jamais.
- Cadrage : Le logo est ajusté, rempli ou étiré dans un carré, avec votre marge et votre arrondi.
- Réduction : Chaque taille part de l’original, jamais de la taille au-dessus, donc aucune n’hérite du flou d’une autre.
- Plaques de plateforme : L’icône iPhone reçoit un fond opaque, car iOS affiche un fond transparent sur du noir.
- Assemblage : favicon.ico prend les entrées 16, 32 et 48 ; les PNG, le manifeste et le balisage sont écrits à côté.
- Sortie : Un ZIP contenant tous les fichiers, chacun nommé comme l’attendent les étapes d’installation.
Ce que contient le paquet
- Tailles d’icône : Favicons PNG en 16, 32, 48 et 96 px, une icône iPhone de 180 px et des icônes d’application de 192 et 512 px.
- favicon.ico : Un fichier portant les entrées 16, 32 et 48 px, écrit pour que les navigateurs de bureau et Windows le lisent tous deux.
- site.webmanifest : Le manifeste et les deux tailles d’icône sans lesquelles aucune invite d’installation n’apparaît.
- Balisage : Les balises link à coller dans votre head, prêtes à copier en une pression.
- Packs plateforme : Tuiles Windows, densités Android et passage du vectoriel avec Pro.
Quand l’utiliser
Nouveau site, refonte ou PWA.
Cas d’usage
- Développement web : Livrez favicon.ico avec index.html.
- Cohérence de marque : Alignez l’icône d’onglet avec votre logo.
- Mobile : Ajoutez apple-touch-icon et tailles launcher.
- Windows : Générez des tuiles pour sites épingles.
- Travail client : Livrez un pack complet en une fois.
Informations
Utilisez une image carrée nette (512+ px) pour garder de la netteté après réduction.
Points clés
- 16x16 et 32x32 sont les tailles de favicon les plus courantes.
- ICO peut intégrer plusieurs bitmaps dans un seul fichier.
- PNG est flexible mais demande un fichier par taille hors ZIP.
- Les favicons apparaissent dans les onglets, l’historique et les favoris.
- Une source de qualité limite le flou après réduction.
Bonnes pratiques
Formes simples, contraste élevé, tester dans un vrai appareil.
Qualité
- Utilisez une image maître nette et carrée.
- Évitez les textes minuscules et les détails trop fins.
- Vérifiez le rendu sur écrans standards et Retina/HiDPI.
- Conservez des couleurs de marque cohérentes avec votre site.
Limites
- Photos très détaillées qui deviennent floues en 16x16.
- Sources très basse résolution.
- Designs reposant sur des dégradés trop fins.
- Cas où vous devez livrer uniquement en SVG/vectoriel.
Propulsé par des algorithmes de traitement d'image optimisés.
FAQ
Quelle taille d’image dois-je utiliser pour générer un favicon ?
Utilisez une image carrée (ratio 1:1). Une source d’au moins 512×512 pixels est recommandée ; 1024×1024 ou plus donne souvent un meilleur résultat. L’outil redimensionne automatiquement vers les tailles courantes (16×16, 32×32, 48×48) avec des algorithmes de bonne qualité.
Quelle est la différence entre un favicon ICO et PNG ?
Le format ICO est le format traditionnel : il peut regrouper plusieurs tailles dans un seul fichier, ce qui améliore la compatibilité et simplifie la gestion. Le PNG est moderne et très bien pris en charge, mais implique en général un fichier par taille. Pour une compatibilité maximale, surtout avec d’anciens appareils, l’ICO est souvent préférable.
Quelles tailles de favicon dois-je générer ?
Générez 16×16 (standard), 32×32 (écrans HiDPI/Retina) et 48×48 (grands écrans) pour une couverture solide. Beaucoup de sites se concentrent sur 16×16 et 32×32. Un fichier ICO peut contenir toutes ces tailles en un seul fichier.
Comment ajouter un favicon à mon site web ?
Placez le fichier à la racine du site (même dossier que index.html) et nommez-le favicon.ico si vous utilisez l’ICO. Pour le PNG, ajoutez dans le HTML : <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">.
Qu’est-ce qu’une bonne image de favicon ?
Les meilleurs favicons sont simples, reconnaissables très petits, avec un bon contraste, des formes ou des lettres marquées, sans détails fins. Logos, initiales ou pictogrammes simples fonctionnent le mieux ; les visuels complexes deviennent illisibles à 16×16.
Puis-je générer plusieurs tailles à la fois ?
Oui. Vous pouvez sélectionner plusieurs tailles (16×16, 32×32, 48×48, etc.) et les générer ensemble. L’ICO regroupe les tailles choisies dans un seul fichier ; le PNG produit un fichier par taille.
Mon image est-elle stockée ou partagée ?
Non. Le favicon est créé localement sur votre appareil.
sur 546 notes
Notez cet outil
Touchez une étoile — c’est rapide