Quelle taille doit faire un favicon ?

Les onglets affichent les favicons en 16 × 16 pixels CSS, soit 32 × 32 sur les écrans haute densité ; l'ICO contient donc des versions de 16, 32 et 48 pixels. Ajoutez une Apple touch icon de 180 × 180 et des icônes de 192 et 512 pixels pour le manifeste, et tous les cas courants sont couverts. Partez d'une image d'au moins 512 × 512 pixels.

Faut-il encore un fichier favicon.ico ?

Oui. Les navigateurs, lecteurs de flux et robots d'indexation demandent /favicon.ico automatiquement, même si aucune balise n'y renvoie, et les anciens navigateurs ne comprennent que l'ICO. Gardez-en un à la racine de votre site, à côté des icônes SVG et PNG.

Peut-on utiliser un SVG comme favicon ?

Oui. Chrome, Edge, Firefox et les versions récentes de Safari prennent en charge les favicons SVG via une balise link avec type="image/svg+xml". Envoyez un SVG ici : il est inclus sous le nom icon.svg à côté de l'ICO de repli, et l'extrait HTML référence les deux.

Qu'est-ce qu'une apple-touch-icon ?

C'est le PNG de 180 × 180 pixels qu'un iPhone ou un iPad utilise quand quelqu'un ajoute votre site à l'écran d'accueil. Il doit avoir un fond plein et des coins carrés, car iOS arrondit lui-même les coins et rend les zones transparentes en noir.

Pourquoi mon favicon ne s'affiche-t-il pas ?

Les navigateurs mettent les favicons en cache de façon agressive, souvent pendant des jours. Vérifiez que le fichier est accessible au chemin indiqué dans votre balise link, puis forcez l'actualisation ou ouvrez le site dans une fenêtre privée. Renommer le fichier ou ajouter un paramètre de version comme favicon.ico?v=2 force un nouveau téléchargement.

Comment convertir un PNG en ICO ?

Déposez le PNG sur cette page et téléchargez favicon.ico. Le générateur le redimensionne en 16, 32 et 48 pixels et réunit les trois dans un seul fichier ICO, chaque taille étant stockée sous forme de PNG dans le conteneur.

À quoi sert site.webmanifest ?

C'est un petit fichier JSON qui indique à Android et à Chrome le nom de votre site, sa couleur de thème, sa couleur de fond et les icônes de 192 et 512 pixels à utiliser quand le site est ajouté à l'écran d'accueil ou installé comme application.

Mon logo est-il envoyé sur un serveur ?

Non. Chaque icône est dessinée et encodée dans votre navigateur, et le ZIP est construit sur votre appareil. Rien n'est envoyé nulle part, et la page continue de fonctionner hors ligne une fois chargée.

Générateur de favicon

Toutes les tailles de favicon, un vrai .ico multi-tailles et un manifeste web à partir d'une seule image. Tout s'exécute localement — rien n'est téléversé.

Entrée: PNG · JPEG · WebP · SVG
Sortie: ICO · PNG · webmanifest · ZIP

Déposez votre logo

PNG, JPEG, WebP ou SVG. L'idéal : carré et au moins 512 × 512 px. Vous pouvez aussi coller une image.

Tous les fichiers favicon à partir d'une seule image

Ce générateur de favicon transforme un seul logo en l'ensemble complet dont un site web a besoin aujourd'hui : un favicon.ico contenant des icônes de 16, 32 et 48 pixels, des PNG nets de 16 à 512 pixels, l'Apple touch icon, les icônes Android Chrome, un site.webmanifest et les balises HTML à coller dans votre page. Mettez l'image au carré, ajoutez une marge, arrondissez les coins ou posez-la sur une tuile pleine, puis téléchargez le tout dans un seul ZIP. Le redimensionnement et le ZIP sont faits sur votre appareil : votre logo n'est jamais téléversé nulle part.

Comment créer un favicon

Déposez un PNG, JPEG, WebP ou SVG sur la page, ou collez-le. Un logo carré d'au moins 512 × 512 pixels, ou un SVG, donne le résultat le plus net.
Choisissez Ajuster pour garder toute l'image avec de l'espace autour, ou Remplir pour la recadrer en carré. Ajoutez une marge et un rayon d'angle si vous voulez une tuile arrondie.
Choisissez une couleur de fond, ou gardez la transparence. L'Apple touch icon reçoit toujours un fond plein, car iOS peint la transparence en noir.
Renseignez le nom de l'application et les couleurs du manifeste, puis cliquez sur Télécharger le ZIP, ou téléchargez les fichiers un par un depuis l'aperçu.
Envoyez les fichiers à la racine de votre site et collez les balises HTML dans le <head> de chaque page.

De quels fichiers favicon les navigateurs modernes ont-ils vraiment besoin ?

Les conseils sur les favicons regorgent de vestiges de 2012 : des dizaines de tailles, du XML pour les tuiles Windows et des masques d'onglet épinglé pour Safari. Les navigateurs actuels en demandent bien moins. Quatre fichiers couvrent pratiquement tous les navigateurs, téléphones et systèmes d'exploitation en usage.

Le reste du ZIP n'est là que par souci d'exhaustivité : les PNG de 16, 32 et 48 pixels pour les outils et CMS qui les réclament par leur nom, et une tuile Windows facultative de 150 × 150 pour les anciens sites épinglés. Les fichiers en trop ne gênent pas, mais inutile de tous les référencer.

favicon.ico: La solution de repli universelle. Les navigateurs demandent /favicon.ico d'eux-mêmes, même si aucune balise n'y renvoie, tout comme les lecteurs RSS, les gestionnaires de favoris et les robots d'indexation. Un seul fichier contient les versions 16, 32 et 48 pixels, chacune étant un PNG dans le conteneur ICO, que tous les navigateurs savent lire depuis Windows Vista.
icon.svg: Un favicon vectoriel, net à toutes les tailles et à tous les niveaux de zoom. Chrome, Edge, Firefox et les versions récentes de Safari l'utilisent quand il est référencé. Vous n'en obtenez un que si vous partez d'un SVG ; une image matricielle ne peut pas devenir un vrai vecteur.
apple-touch-icon.png: Un PNG opaque de 180 × 180 qu'affichent les iPhone et iPad quand quelqu'un ajoute votre site à l'écran d'accueil. iOS applique son propre masque arrondi : les coins doivent donc être carrés et le fond plein.
Icônes du manifeste: Les PNG de 192 et 512 pixels listés dans site.webmanifest. Android s'en sert pour le raccourci sur l'écran d'accueil et l'écran de démarrage d'une web app installée, et Chrome vérifie leur présence avant de proposer d'installer un site.

Les balises HTML à coller

L'extrait référence l'ICO avec sizes="32x32" plutôt qu'avec sizes="any". Avec « any », Chrome préfère l'ICO même quand un SVG est disponible. Si vous envoyez un SVG, l'extrait le référence aussi : les navigateurs qui prennent en charge les favicons SVG l'utilisent, les autres se rabattent sur l'ICO. Sans SVG, ce sont les PNG de 32 et 16 pixels qui sont référencés.

La balise meta theme-color teinte la barre d'outils du navigateur sous Android et dans Safari, et site.webmanifest contient le nom de votre application, ses couleurs et les grandes icônes. Gardez les noms de fichiers tels quels et placez chaque fichier à la racine de votre domaine, ou adaptez les chemins de l'extrait à l'endroit où vous les mettez.

Concevoir un favicon qui reste lisible à 16 pixels

Simplifiez. Une icône de 16 × 16 compte 256 pixels en tout. Les logotypes et les traits fins deviennent de la bouillie ; une seule lettre, un symbole ou le logo sans son texte se lit bien mieux.
Choisissez un contraste qui fonctionne sur les deux couleurs d'onglet. Les onglets sont clairs ou sombres selon le thème. L'aperçu montre chaque taille sur une tuile blanche et une tuile presque noire, ce qui permet de repérer un logo sombre qui disparaît en mode sombre avant de le mettre en ligne.
Dans le doute, ajoutez une tuile. Un fond plein avec un peu de marge et un rayon d'angle garde un logo fin ou transparent visible sur n'importe quel onglet, et paraît voulu sur l'écran d'accueil.
Partez d'une grande image. Les images sont réduites par divisions successives par deux pour des bords nets, mais rien ne peut ajouter un détail absent de la source. Fournissez 512 pixels ou plus, ou un SVG.
Vérifiez les couleurs. Si la couleur de votre marque est trop pâle sur un onglet blanc ou sombre, testez-la avec le vérificateur de contraste, ou convertissez une valeur reçue dans une autre notation avec le convertisseur de couleurs.

Pourquoi rien n'est téléversé

La plupart des générateurs de favicon envoient votre logo sur un serveur pour le redimensionner. Celui-ci dessine chaque taille sur un canvas dans votre navigateur, écrit le fichier ICO octet par octet en JavaScript et construit le ZIP avec un petit module WebAssembly : l'image ne quitte jamais votre appareil et l'outil continue de fonctionner hors ligne une fois la page chargée. C'est important pour une marque pas encore lancée ou le logo d'un client que vous n'êtes pas censé diffuser.

Questions fréquentes

Quelle taille doit faire un favicon ?: Les onglets affichent les favicons en 16 × 16 pixels CSS, soit 32 × 32 sur les écrans haute densité ; l'ICO contient donc des versions de 16, 32 et 48 pixels. Ajoutez une Apple touch icon de 180 × 180 et des icônes de 192 et 512 pixels pour le manifeste, et tous les cas courants sont couverts. Partez d'une image d'au moins 512 × 512 pixels.
Faut-il encore un fichier favicon.ico ?: Oui. Les navigateurs, lecteurs de flux et robots d'indexation demandent /favicon.ico automatiquement, même si aucune balise n'y renvoie, et les anciens navigateurs ne comprennent que l'ICO. Gardez-en un à la racine de votre site, à côté des icônes SVG et PNG.
Peut-on utiliser un SVG comme favicon ?: Oui. Chrome, Edge, Firefox et les versions récentes de Safari prennent en charge les favicons SVG via une balise link avec type="image/svg+xml". Envoyez un SVG ici : il est inclus sous le nom icon.svg à côté de l'ICO de repli, et l'extrait HTML référence les deux.
Qu'est-ce qu'une apple-touch-icon ?: C'est le PNG de 180 × 180 pixels qu'un iPhone ou un iPad utilise quand quelqu'un ajoute votre site à l'écran d'accueil. Il doit avoir un fond plein et des coins carrés, car iOS arrondit lui-même les coins et rend les zones transparentes en noir.
Pourquoi mon favicon ne s'affiche-t-il pas ?: Les navigateurs mettent les favicons en cache de façon agressive, souvent pendant des jours. Vérifiez que le fichier est accessible au chemin indiqué dans votre balise link, puis forcez l'actualisation ou ouvrez le site dans une fenêtre privée. Renommer le fichier ou ajouter un paramètre de version comme favicon.ico?v=2 force un nouveau téléchargement.
Comment convertir un PNG en ICO ?: Déposez le PNG sur cette page et téléchargez favicon.ico. Le générateur le redimensionne en 16, 32 et 48 pixels et réunit les trois dans un seul fichier ICO, chaque taille étant stockée sous forme de PNG dans le conteneur.
À quoi sert site.webmanifest ?: C'est un petit fichier JSON qui indique à Android et à Chrome le nom de votre site, sa couleur de thème, sa couleur de fond et les icônes de 192 et 512 pixels à utiliser quand le site est ajouté à l'écran d'accueil ou installé comme application.
Mon logo est-il envoyé sur un serveur ?: Non. Chaque icône est dessinée et encodée dans votre navigateur, et le ZIP est construit sur votre appareil. Rien n'est envoyé nulle part, et la page continue de fonctionner hors ligne une fois chargée.

Outils associés

Voir tous les outils

Convertisseur d'imagesRéencodez, redimensionnez et vectorisez vos images avec une comparaison avant/après en direct.Suppression d'Arrière-planDétourage automatique par IA et outils manuels de précision.Image en Base64Transformez une image en data URI Base64 pour HTML, CSS ou JSON, et inversement.Générateur de palette de couleursExtrayez les couleurs dominantes d'une photo en HEX, RGB et HSL.Convertisseur de couleursConvertissez des couleurs entre HEX, RGB, HSL, HSV, CMYK et OKLCH.Vérificateur de contraste WCAGVérifiez les couleurs de texte et de fond selon les niveaux WCAG AA et AAA.