Générateur de favicon

Un favicon (abréviation de 'favorite icon') est le petit icône carré que le navigateur affiche à côté du titre d'une page — dans l'onglet du navigateur, la barre de favoris, l'historique et parfois les résultats de recherche. Il est généralement affiché en 16×16 ou 32×32 pixels et se trouve à la racine de votre site en tant que favicon.ico. Les sites modernes ajoutent aussi un favicon.svg, un Apple touch icon et des icônes PWA pour les écrans d'accueil. Un favicon reconnaissable améliore les taux de clics dans les favoris et les résultats de recherche.

Commencez par 16×16 et 32×32 — les deux tailles que les navigateurs affichent dans les onglets et les favoris — regroupés dans un seul favicon.ico. Pour une couverture complète, ajoutez aussi 48×48 (utilisé par Windows), un apple-touch-icon de 180×180 pour iOS, et des PNG de 192×192 et 512×512 pour Android et les écrans d'accueil PWA. Ce générateur produit toutes ces tailles à la fois depuis une seule source, vous n'avez donc jamais besoin de redimensionner manuellement ou d'utiliser plusieurs outils.

Choisissez une source — uploadez une image (PNG, JPG, SVG ou WebP), tapez une à trois lettres, ou collez un emoji — puis choisissez une couleur d'arrière-plan, une forme (carré, arrondi ou cercle) et un rembourrage. L'outil rend toutes les tailles de favicon sur un canvas, regroupe 16/32/48 dans un favicon.ico, et vous remet un ZIP avec tous les fichiers plus le fragment HTML à coller dans votre <code>&lt;head&gt;</code>. Tout le processus prend moins d'une minute et ne nécessite aucun logiciel de design.

Oui — parce que rien n'est réellement uploadé. Chaque étape s'exécute dans votre navigateur avec un <code>&lt;canvas&gt;</code> HTML et JavaScript : votre image est lue localement, redimensionnée, encodée en PNG et ICO, et zippée sur votre appareil. Aucun fichier n'est jamais envoyé à un serveur, contrairement à des outils comme favicon.io et RealFaviconGenerator.net qui traitent votre image dans le cloud. Votre logo ne quitte jamais votre ordinateur — important si vous travaillez sur un projet client ou un produit non encore publié.

Presque toujours à cause du cache du navigateur. Les navigateurs mettent en cache les favicons de manière agressive, donc faites un rechargement forcé (Ctrl+F5), ouvrez l'URL de l'icône directement (votresite.com/favicon.ico) pour confirmer qu'il se charge, ou essayez dans une fenêtre privée. Vérifiez aussi que les fichiers sont à la racine de votre site, que les chemins dans vos balises <code>&lt;link&gt;</code> sont corrects (un slash initial est important), et que vous avez bien uploadé toutes les tailles. Les nouveaux favicons peuvent prendre un moment à se rafraîchir dans les favoris et les résultats de recherche — attendez quelques heures après le déploiement.

Oui — l'API canvas et le téléchargement de fichiers fonctionnent dans Safari iOS, Chrome pour Android et Samsung Internet. Vous pouvez uploader une photo depuis votre pellicule, taper une lettre, ou coller un emoji, puis télécharger le ZIP complet directement sur votre téléphone. C'est utile pour prototyper rapidement un favicon quand vous êtes loin de votre bureau. La mise en page s'adapte aux petits écrans, donc l'outil est confortable à utiliser à 375px.

Les icônes maskable (PNG de 192×192 et 512×512 listés dans site.webmanifest) sont ceux qu'Android et les PWA installées utilisent. Un icône maskable garde son contenu important dans une zone sûre centrale — environ 80% de l'icône — pour qu'il reste bien visible quand le système le recadre en cercle, squircle ou carré arrondi. Ce générateur ajoute automatiquement ce rembourrage de zone sûre aux icônes 192 et 512 et les marque avec <code>purpose: maskable</code>. Vous n'avez pas à calculer manuellement la zone sûre.