Images, SVG et icônes
Déposez un logo ou un .ico existant, vérifiez l’onglet en 16 px, puis téléchargez tout le paquet.
Déposez ici un fichier PNG, JPG, WebP, GIF, SVG ou ICO, ou collez une image du presse-papiers.
Les images sont lues et redimensionnées dans cet onglet ; rien n’est envoyé.
Choisissez, déposez ou collez une image pour commencer.
Choisissez, déposez ou collez une image pour commencer.
Nouveau site, nouveau logo ou alerte Lighthouse : on finit toujours avec un seul logo et le besoin d’une demi-douzaine de fichiers d’icônes, plus les balises link qui les appellent. Ce générateur de favicon produit le jeu actuel à partir de cette seule image, sans redimensionner six fois la même image dans un logiciel de retouche.
Il marche aussi dans l’autre sens. Déposez le favicon.ico hérité d’un ancien projet : chaque taille stockée à l’intérieur est listée, vous pouvez l’enregistrer en PNG, et la plus grande sert de source pour les icônes Apple et Android manquantes.
Il produit ce que navigateurs et téléphones demandent aujourd’hui, et rien de ce qu’ils ont cessé de demander.
Un favicon.ico multi-tailles, des PNG en 16 et 32 px, l’apple-touch-icon de 180 px, les icônes Android de 192 et 512 px et le site.webmanifest sortent d’une seule image. Les balises HTML pointent vers votre vrai chemin : un site servi depuis /static/ n’exige pas six corrections à la main.
Déposez un favicon.ico existant : chaque image intégrée est listée avec ses vraies dimensions, sa profondeur de couleur, son codage PNG ou BMP et son poids. Enregistrez-en une en PNG, ou toutes dans un ZIP, sans chercher un second site.
iOS pose les icônes tactiles transparentes sur du noir. L’apple-touch-icon est donc toujours rempli de votre couleur de fond et laissé carré, car iOS applique son propre masque arrondi ; les icônes du navigateur gardent leur transparence.
Un SVG ou un PNG carré d’au moins 512 px donne le résultat le plus net. Une image non carrée est centrée, jamais recadrée, et une image matricielle de moins de 512 px déclenche un avertissement avec sa taille réelle, puisque l’icône Android de 512 px serait agrandie.
La génération se relance environ 300 ms après chaque changement. Regardez les onglets clair et sombre et le zoom ×4 : les traits fins et les petits textes disparaissent à 16 px. Un peu de marge aide les logos larges ; l’arrondi ne s’applique qu’aux icônes navigateur et Android.
Le chemin est écrit dans chaque balise link et chaque src du manifest. Si les fichiers vont dans /assets/icons/, saisissez-le d’abord, téléchargez le ZIP, puis collez le HTML dans le head de vos pages.
favicon.ico, favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png, android-chrome-192x192.png, android-chrome-512x512.png et site.webmanifest, plus favicon.svg si la source est un SVG. Tout est à la racine du ZIP, prêt à copier à côté de votre page d’accueil.
L’ICO peut combiner 16, 24, 32, 48, 64, 128 et 256 px, stockés en données PNG lisibles par tous les navigateurs actuels et par Windows. De quoi convertir un PNG en ICO, pas seulement créer un favicon complet.
Le format est reconnu d’après les octets, pas l’extension, et les avertissements donnent la largeur et la hauteur réelles. Un SVG n’est jamais jugé trop petit, puisqu’il s’agrandit sans perte.
Les balises link, la meta theme-color et la liste d’icônes du manifest partent du même chemin et des mêmes couleurs : le HTML ne pointe jamais vers un fichier absent du ZIP.
Pour les navigateurs et téléphones actuels : un favicon.ico avec 16, 32 et 48 px, des PNG en 16 et 32 px, un apple-touch-icon de 180 px, et des icônes de 192 et 512 px déclarées dans le site.webmanifest. C’est exactement ce que ce générateur de favicon met dans le ZIP.
Partez d’un logo carré ou d’un SVG, déposez-le ici, vérifiez l’aperçu en 16 px, réglez le chemin, puis téléchargez le ZIP et copiez le HTML. Tout se fait dans le navigateur, sans compte.
Les navigateurs gardent les favicons en cache très longtemps : rechargez sans cache ou ouvrez une fenêtre privée. Vérifiez ensuite que le href de chaque balise link correspond à l’emplacement réel ; saisir le chemin avant de copier le HTML évite l’écart.
Les deux. L’ICO sert les anciens navigateurs et les robots qui demandent directement /favicon.ico ; les navigateurs récents lisent le PNG et le SVG. Les deux sortent ici de la même source.
Google recommande un favicon carré dont le côté est un multiple de 48 px pour l’afficher proprement dans ses résultats. L’ICO par défaut contient 48 px, et les icônes de 192 et 512 px en sont aussi des multiples.
À la racine du site si possible, car certains navigateurs et lecteurs de flux demandent /favicon.ico même sans balise link. Les autres fichiers peuvent aller dans un sous-dossier, à condition d’indiquer le bon chemin.
Il manque une taille ou une plateforme ?
Déposez votre logo dans le générateur de favicon, vérifiez l’onglet en 16 px sur fond clair et sombre, puis emportez le ZIP et les balises head sur votre site.
Conservez le fichier du logo d’origine pour les retouches futures.