Générateur de faviconToutes les tailles, et le bloc head qui va avec.
Déposez un logo et récupérez un vrai favicon.ico multi-résolutions, les tailles PNG que les navigateurs réclament, une apple touch icon, l’icône maskable Android et un site.webmanifest déjà rempli. Tout est généré dans cet onglet, votre image n’est jamais envoyée.
Déposez votre logo ici
Ou touchez pour choisir un fichier. Une image carrée de 512 px ou plus donne le meilleur résultat.
PNG, JPG, WebP, SVG, ICO ou GIF
Votre image est lue, redimensionnée et empaquetée dans cet onglet. Elle n’est jamais envoyée, et aucun serveur n’intervient à aucun moment.
De quelles tailles de favicon avez-vous vraiment besoin en 2026 ?
Bien moins que les paquets de vingt fichiers que la plupart des générateurs distribuent encore. Cinq surfaces couvrent tous les navigateurs et systèmes qui comptent, et le reste alourdit votre <head> sans rien apporter.
favicon.ico, 16 et 32 et 48
Toujours le fichier qu’un navigateur cherche à la racine de votre domaine avant même d’avoir lu une ligne de HTML. Un seul conteneur porte les trois tailles, c’est pourquoi ce convertisseur de favicon fabrique un vrai .ico au lieu de renommer un PNG. 16 px pour l’onglet, 32 px pour l’onglet retina et la barre de favoris, 48 px pour les raccourcis Windows.
favicon.svg, quand vous avez un vectoriel
Un favicon vectoriel reste net à toutes les tailles et peut même réagir au mode sombre du système grâce à une media query placée dans le fichier. Les navigateurs qui le comprennent le préfèrent au .ico. Si vous chargez un SVG ici, il reste vectoriel, il n’est jamais rastérisé et rendu en faux vectoriel.
apple-touch-icon.png, 180×180
L’icône qu’iOS utilise quand quelqu’un ajoute votre site à son écran d’accueil. Un seul fichier suffit : iOS réduit une unique icône de 180 px depuis iOS 8, donc l’ancienne pile d’apple-touch-icon-57x57 à 152x152 ne sert plus à rien. Ce générateur d’apple touch icon en écrit une, et la rend opaque.
android-chrome 192 et 512, plus la maskable
Référencées depuis site.webmanifest et non depuis une balise link. 192 px pour l’écran d’accueil, 512 px pour l’écran de démarrage et l’invite d’installation. La variante maskable est celle qu’Android rogne à la forme du lanceur, donc son visuel a besoin d’une vraie marge.
mstile-150x150.png, peu coûteuse à garder
Les sites épinglés sous Windows la lisent encore. Elle coûte un petit PNG et deux balises meta, donc elle est incluse, mais rien ne casse si vous la supprimez. C’est la réponse honnête, et c’est pourquoi elle arrive en dernier plutôt que présentée comme indispensable.
Pourquoi un fichier .ico contient-il plusieurs images ?
Parce que .ico est un format de conteneur, pas un format d’image. Comprendre cela fait la différence entre un favicon qui s’affiche partout et un favicon qui échoue discrètement sous Windows et dans les lecteurs de flux.
D’abord un répertoire, puis les images
Le fichier commence par un en-tête de six octets indiquant combien d’images suivent, puis une entrée de seize octets par image donnant sa largeur, sa hauteur, sa longueur en octets et sa position dans le fichier, et seulement ensuite les images elles-mêmes. Tout est en little-endian. C’est cette structure qui fait qu’un PNG renommé en .ico n’est pas un .ico.
C’est le lecteur qui choisit la taille
Un navigateur qui dessine un onglet de 16 px lit le répertoire, trouve l’entrée 16 px et ne décode que celle-là. Donnez-lui une seule image de 512 px et il la réduit au moment du rendu, avec un échantillonnage bon marché et un résultat flou. Donnez-lui un 16 px fait exprès et il l’utilise.
Les images peuvent être des PNG
Le format d’origine embarquait du BMP avec un ordre de pixels inversé et un masque de transparence séparé sur un bit. Tous les navigateurs et tous les Windows depuis Vista acceptent aussi du PNG dans le conteneur, et c’est ce que ce convertisseur ico écrit : fichiers plus légers, vraie couche alpha, aucun encodeur hérité.
C’est en 16 px que la qualité se voit
Réduire un logo de 1024 px directement en 16 px échantillonne trop peu de pixels source et donne une bouillie grise. Cet outil divise l’image par deux sur des canvas intermédiaires, 1024 vers 512 vers 256 et ainsi de suite, pour que chaque pixel compte. C’est la seule raison pour laquelle un petit favicon reste lisible.
Ai-je encore besoin d’une apple-touch-icon ?
Oui, et c’est le seul fichier dont les règles diffèrent de toutes les autres icônes du lot. Deux choses à savoir, toutes les deux gérées pour vous ci-dessus.
iOS jette votre transparence
Safari compose l’icône de l’écran d’accueil sur du noir et non sur le fond d’écran, donc un logo soigneusement exporté avec un fond transparent arrive en forme flottant sur une tuile noire. C’est pourquoi cet outil écrit toujours l’apple-touch-icon avec un fond opaque, blanc par défaut, même si vous avez choisi transparent pour tout le reste. iOS n’applique plus non plus son propre effet brillant depuis iOS 7, donc ce que vous fournissez est ce que les gens voient.
Android rogne, il n’ajoute pas de marge
Un lanceur Android prend une icône maskable et la découpe à sa propre forme, cercle, squircle ou carré arrondi selon le téléphone. Seuls les 80 % centraux sont garantis, donc un logo qui remplit son cadre bord à bord perd ses extrémités. Le fichier maskable garde ici une marge de 20 % quelle que soit la valeur du curseur, et l’aperçu circulaire montre exactement ce que le lanceur conservera.
Comment ajouter un favicon à mon site ?
Deux étapes, et c’est la seconde qui concentre les erreurs. Copiez le bloc généré par l’outil plutôt que de l’écrire de mémoire.
Placez les fichiers à la racine
Déposez favicon.ico et les autres à côté de votre index.html, pour qu’ils répondent sur votresite.com/favicon.ico. Les navigateurs demandent ce chemin exact d’eux-mêmes, sans qu’on le leur dise, et c’est pour cela que l’emplacement compte plus que la balise link.
Collez le bloc head sur chaque page
Pas seulement sur la page d’accueil. Un visiteur qui arrive sur une page profonde et l’ajoute à ses favoris doit obtenir la bonne icône. Si votre site utilise un gabarit ou un framework, le bloc a sa place dans le layout partagé.
Déclarez le .ico sans taille
Utilisez rel="icon" href="/favicon.ico" sizes="any". Les tailles sont déjà dans le conteneur, et en coder une en dur dans le balisage vous empêchez le navigateur d’aller chercher les autres. La ligne SVG vient en premier pour que les navigateurs qui gèrent le vectoriel le prennent.
Puis rechargez en force, deux fois
Les favicons sont mis en cache agressivement et séparément de la page, donc votre ancienne icône peut survivre à un rechargement normal pendant des jours. Ouvrez directement votresite.com/favicon.ico pour vérifier que la nouvelle est bien servie avant de conclure quoi que ce soit.
Vous voulez savoir vers quoi pointe vraiment un QR code ou un lien court existant ? Décodez-le avec le résolveur de QR code
Besoin d’un lien court pour accompagner le nouveau site ? Créez-en un avec le raccourcisseur de liens gratuit
L’icône, c’est la petite moitié d’une première impression.
Un favicon, c’est ce que les gens voient une fois déjà sur votre site. Le lien qui les a amenés fait le travail le plus dur, et c’est souvent la partie que personne ne mesure. Si ça vous parle, LinkScale est ce que nous construisons.
Voyez d’où vient la visite
Clics, pays, appareils et ce qui s’est passé ensuite, pour chaque lien que vous distribuez, plutôt qu’un chiffre dans le tableau de bord de quelqu’un d’autre.
Changez la destination plus tard
Renvoyez un lien imprimé ou publié ailleurs après coup, sans demander à personne de mettre à jour ce qu’il a enregistré.
Une page pour tout
Une page de liens en bio qui regroupe la boutique, le formulaire de réservation et les réseaux, pour que l’unique lien autorisé aille plus loin.
Questions sur le générateur de favicon
Encore des questions ?
En ligneDe vrais humains, réponse en quelques minutes en général.
Il est gratuit, sans compte, sans filigrane et sans limite sur le nombre de fichiers générés. Votre image n’est jamais envoyée : elle est lue par le FileReader du navigateur, dessinée sur un canvas et empaquetée en Blobs, entièrement dans la page. Il n’y a aucun endpoint derrière cet outil, donc rien à qui l’envoyer. Vous pouvez le vérifier en ouvrant l’onglet réseau de votre navigateur pendant que vous l’utilisez, ou en vous déconnectant d’internet une fois la page chargée.
Allez plus loin avec LinkScale
Favicon réglé. Le lien qui fait venir les gens, c’est l’autre moitié.
LinkScale est une plateforme de gestion de liens pour ceux qui veulent savoir ce qui se passe après le clic, et changer la destination sans rien réimprimer.
Free 14-day trial on every plan