Générateur de favicon

Transformez un seul logo en jeu complet de favicons : toutes les tailles PNG, un ICO multi-tailles, un manifeste et les balises HTML à coller dans votre head.

Déposez vos fichiers ici

.png, .jpg, .jpeg, .webp, .svg · jusqu’à 20 Mo

Choisissez des fichiers

Comment générer un favicon

1
Ajoutez votre logo
PNG, JPG, WebP ou SVG, jusqu’à 20 Mo. Une image source carrée donne le meilleur résultat, mais toute forme est acceptée.
2
Choisissez l’ajustement au carré
Recadrez au centre pour obtenir un carré, ou intégrez toute l’image et complétez les côtés avec la couleur de votre choix.
3
Téléchargez le jeu d’icônes en ZIP
Huit fichiers, ou neuf avec l’icône Android masquable : l’ICO, quatre tailles PNG, le manifeste et un extrait de head prêt à l’emploi.

Contenu de l’archive et rôle de chaque fichier

favicon.ico contient trois images dans un seul conteneur, en 16, 32 et 48 pixels, et reste ce que les navigateurs demandent à la racine d’un site. icon-16.png et icon-32.png sont les équivalents modernes, référencés explicitement pour que les navigateurs qui préfèrent le PNG n’aient jamais à ouvrir l’ICO. apple-touch-icon.png en 180 pixels est ce qu’iOS utilise quand quelqu’un ajoute votre site à son écran d’accueil. icon-192.png et icon-512.png sont les deux tailles qu’un manifeste d’application web progressive doit obligatoirement lister. manifest.json relie ces deux icônes à votre nom d’application et à votre couleur de thème, et head-snippet.html est le bloc exact de balises link et meta à coller dans votre page, sans avoir à deviner les noms d’attributs ni les chemins de fichiers.

Pourquoi apple-touch-icon ne garde jamais la transparence

iOS ne compose pas une icône d’écran d’accueil transparente sur un fond adapté. Il remplit les zones transparentes en noir, ce qui transforme un logo sobre en tuile sombre. Ce fichier a donc toujours son canal alpha aplati, sur la couleur d’arrière-plan que vous avez choisie ou sur du blanc si vous avez laissé l’arrière-plan transparent. Toutes les autres tailles gardent la transparence quand votre source en a et que vous l’avez demandée, car sur un onglet de navigateur ou un raccourci de bureau c’est justement ce que vous voulez. Si vous définissez une couleur d’arrière-plan à la place, elle est appliquée uniformément à toutes les tailles pour que le jeu reste cohérent.

Vectoriel en entrée, net en sortie

Quand la source est un SVG, chaque taille est rendue directement à partir du vecteur plutôt que réduite depuis une grande image bitmap unique. Cela compte surtout à 16 pixels, où un logo sous-échantillonné devient flou alors qu’un rendu dédié garde ses contours. Les sources SVG sont nettoyées avant le rendu : scripts, gestionnaires d’événements et toute référence à un serveur externe sont supprimés, comme le fait notre convertisseur SVG en PNG. Une source matricielle est d’abord mise au carré, puis rééchantillonnée avec un filtre Lanczos, qui est le choix le plus net parmi les options pratiques pour réduire un visuel.

Votre logo reste sur votre appareil

Décodage, redimensionnement, encodage PNG, conteneur ICO et archive ZIP sont tous effectués dans cet onglet de navigateur. Rien n’est envoyé, ce qui compte pour un logo de marque non encore publié. La plupart des générateurs de favicon en ligne prennent une copie de votre logo sur leurs serveurs avant de vous rendre quoi que ce soit.

Questions fréquentes

Quelles tailles figurent dans le jeu d’icônes ?

16, 32, 180, 192 et 512 pixels en fichiers PNG, plus un favicon.ico contenant 16, 32 et 48 dans un seul fichier. La version 48 pixels n’existe qu’à l’intérieur de l’ICO, où Windows l’utilise pour les vues de raccourcis plus grandes ; elle n’est pas fournie en PNG séparé car rien sur le web ne la demande.

Pourquoi apple-touch-icon n’a-t-il pas de transparence ?

Parce qu’iOS affiche les zones transparentes d’une icône d’écran d’accueil en noir. L’aplatir ici, sur votre couleur d’arrière-plan ou sur du blanc si vous gardez la transparence ailleurs, garantit que l’icône ressemble à ce que vous avez conçu au lieu de flotter dans un carré sombre. C’est le seul fichier pour lequel ce choix est imposé.

Qu’est-ce qu’une icône masquable ?

Android recadre les icônes d’application selon une forme propre à chaque appareil : cercle, « squircle », carré aux angles arrondis. Une icône masquable garde tout son contenu important dans les 80 % centraux pour qu’aucun élément clé ne soit coupé, quelle que soit la forme appliquée. Activez l’option et vous obtenez icon-512-maskable.png, plus une troisième entrée dans le manifeste avec l’attribut purpose « maskable ».

Ai-je besoin du fichier manifest.json ?

Uniquement si vous voulez que votre site soit installable comme application web progressive, ou contrôler la couleur de l’interface du navigateur sur Android. Cela représente un fichier et une balise link, et c’est sans effet secondaire si vous n’utilisez jamais ces fonctions. Il est donc inclus par défaut avec votre nom d’application et votre couleur de thème renseignés.

Puis-je partir d’un fichier SVG ?

Oui, et c’est ce qui donne le meilleur résultat. Chaque taille est rendue à partir du vecteur à sa propre résolution plutôt que rééchantillonnée depuis un seul bitmap, ce qui garde les petites tailles lisibles. Le SVG est nettoyé au préalable : scripts, gestionnaires d’événements et références externes sont supprimés avant le rendu.

Où placer les balises générées ?

Dans l’élément head de vos pages, et les fichiers PNG, ICO et manifest vont à la racine de votre site pour que les chemins dans l’extrait fonctionnent. Si vous les servez depuis un sous-dossier, modifiez les valeurs href dans head-snippet.html en conséquence.

Pourquoi mon icône semble floue ?

Dans presque tous les cas, parce que la source est trop petite. Tout est construit à partir d’un fichier maître de 512 pixels, donc une source en dessous d’environ 260 pixels doit être agrandie pour y arriver et les tailles les plus grandes paraissent douces. Partez d’au moins 512×512, ou d’un SVG, et tout le jeu sort net. Une source de moins de 32 pixels est refusée, car il n’y a tout simplement pas assez d’information.

Le logo est-il envoyé sur un serveur ?

Non. L’image ne quitte jamais votre navigateur : elle est décodée, redimensionnée, encodée, empaquetée dans l’ICO puis dans le ZIP en local, et l’archive vous est fournie directement depuis la mémoire.