Image vers Favicon : Créez des icônes de site web depuis n'importe quelle image

Q: Comment faire référence aux favicons dans HTML ?

Avec des balises pointant vers chaque taille et format, plus pour iOS. Le navigateur choisit la meilleure correspondance. Un ensemble complet de balises link couvre toutes les plateformes.

Mis à jour le: June 28, 2026. Le support des favicons de navigateur évolue ; les tailles et formats de base ici couvrent le paysage actuel.

Un favicon est la petite icône qui apparaît dans un onglet de navigateur, une liste de signets et l'écran d'accueil d'un téléphone lorsque quelqu'un enregistre votre site. Convertir une image en favicon signifie créer les bons types de fichiers aux bonnes tailles afin que l'icône reste nette partout où elle apparaît — d'un onglet de navigateur de 16 pixels à une icône Apple Touch de 180 pixels. Ce guide couvre les tailles attendues par chaque plateforme, les formats de fichiers à générer et comment maintenir l'icône reconnaissable même aux petites tailles.

Réponse rapide : comment créer un favicon à partir d'une image ?

Commencez par une image source carrée (ou recadrez-la en carré avec le image cropper), redimensionnez jusqu'aux tailles standard de favicon (16px, 32px, 180px, 512px), et exportez en PNG plus un fichier ICO pour les navigateurs hérités. Faites-y référence dans le <head> de votre HTML avec les balises link appropriées. Testez la version 16px dans un onglet de navigateur, car si l'icône n'est pas reconnaissable à cette taille, aucune quantité de versions plus grandes ne pourra y remédier. Conservez également la version SVG si le logo est vectoriel, pour un rendu net sur les écrans haute DPI.

Quelles tailles doit avoir un favicon ?

Différents contextes affichent le favicon à différentes tailles, et fournir les bonnes dimensions le maintient net partout.

Taille	Fichier	Utilisé pour
16x16	ICO / PNG	Onglet de navigateur (hérité)
32x32	ICO / PNG	Onglet de navigateur (rétina)
180x180	PNG	Icône Apple Touch
192x192	PNG	Écran d'accueil Android
512x512	PNG	PWA / splash
N'importe quelle	SVG	Navigateurs modernes, haute-DPI

La version 16px est la plus importante — c'est ce que la plupart des gens voient dans un onglet.
L'icône Apple Touch nécessite 180px pour un affichage net sur l'écran d'accueil iOS.
SVG sert les navigateurs modernes à n'importe quelle résolution sans nécessiter de multiples fichiers.
Un seul ICO peut regrouper plusieurs tailles pour la compatibilité héritée.

Comment concevoir un favicon qui fonctionne à 16px ?

Le défi d'un favicon est qu'il doit être reconnaissable à 16 pixels, ce qui est minuscule. Les détails qui ont l'air bien à 512px disparaissent à 16px, donc le design doit être simple.

Utilisez une forme unique et audacieuse — une lettre, un signe de logo, une icône simple.
Évitez les lignes fines et le petit texte — ils disparaissent à 16px.
Utilisez un contraste élevé afin que la forme ressorte sur l'arrière-plan de l'onglet.
Testez la version 16px à sa taille réelle avant de publier.

Une erreur courante est d'utiliser le logo complet avec du texte. À 16px, le texte est illisible, donc le favicon ressemble à une tache floue. La solution consiste à extraire l'élément le plus reconnaissable — l'icône ou la première lettre — et à l'utiliser comme favicon. Le guide SVG to PNG couvre l'exportation de marques vectorielles aux tailles dont vous avez besoin.

Quels formats de fichiers devriez-vous générer ?

Les favicons couvrent plusieurs formats car le support des navigateurs a évolué avec le temps, et les couvrir tous garantit que l'icône fonctionne partout.

ICO — le format hérité, regroupe plusieurs tailles, pris en charge par tous les navigateurs.
PNG — la norme moderne, un fichier par taille.
SVG — vectoriel, s'adapte à n'importe quelle taille, pris en charge par les navigateurs modernes.
Apple Touch PNG — spécifiquement 180x180, pour les icônes d'écran d'accueil iOS.

Format	Quand l'utiliser
ICO	Support navigateur hérité, regroupe les tailles
PNG	Navigateurs modernes, fichiers par taille
SVG	Navigateurs modernes, fichier unique et évolutif
Apple Touch PNG	Écran d'accueil iOS

Générez un ICO pour la compatibilité héritée, des PNG pour chaque taille pour un support large, et un SVG si la source est vectorielle. Le image converter gère la génération de format, et le image cropper obtient d'abord le carré source.

Comment faire référence aux favicons dans HTML ?

Les fichiers générés doivent être référencés dans le <head> de la page pour que les navigateurs puissent les trouver. Les balises link indiquent au navigateur quel fichier utiliser pour quel contexte.

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

L'ICO couvre les navigateurs hérités avec des tailles regroupées.
Le SVG sert les navigateurs modernes à n'importe quelle résolution.
L'icône Apple Touch couvre les enregistrements d'écran d'accueil iOS.
Placez les fichiers à la racine du site pour une compatibilité maximale.

Le guide Mozilla favicon documente les balises link et le comportement des navigateurs, et le Web.dev app icons guide couvre la norme d'icône masquable pour Android. Testez le résultat dans un véritable onglet de navigateur et sur l'écran d'accueil d'un téléphone après le déploiement, car les bizarreries de rendu n'apparaissent que dans les contextes réels.

Concevoir des favicons pour le mode clair et sombre

Les navigateurs et OS modernes basculent entre le mode clair et le mode sombre, et un favicon qui est superbe sur un onglet clair peut disparaître sur un onglet sombre. Un PNG à fond transparent ou un SVG avec des couleurs adaptatives gère les deux contextes, car l'icône s'adapte au chrome environnant plutôt que de porter son propre arrière-plan.

Défi du mode	Solution
Icône sombre qui disparaît sur onglet sombre	Ajouter un contour subtil ou utiliser la transparence
Icône claire qui disparaît sur onglet clair	Même chose — contour ou couleur adaptative
Lisibilité difficile à 16px	Simplifier la forme, augmenter le contraste

Pour les favicons SVG, vous pouvez utiliser la media query prefers-color-scheme à l'intérieur du SVG pour servir différentes couleurs pour les contextes clair et sombre, ce qui est la solution la plus propre. Pour PNG, un fond transparent avec une forme ayant suffisamment de contraste interne fonctionne acceptablement sur les deux. L'objectif est que le favicon soit lisible dans un onglet quel que soit si l'utilisateur utilise le mode clair ou foncé, ce qui devient de plus en plus le défaut plutôt que l'exception.

Erreurs courantes de favicons

Trop de détails — l'icône n'est pas reconnaissable à 16px. Simplifiez.
Source non carrée — recadrez d'abord en carré ou l'icône se déforme.
Oubli de l'icône Apple Touch — les enregistrements iOS affichent une capture d'écran générique à la place.
Pas de SVG — les écrans haute-DPI rendent un PNG flou au lieu d'un vecteur net.
Oublier de tester à 16px — la taille que la plupart des gens voient est celle qui est le plus souvent négligée.

Le favicon est petit mais il apparaît partout où votre site est représenté — onglets, signets, écrans d'accueil, résultats de recherche. Une icône nette et reconnaissable à toutes les tailles renforce la marque en un coup d'œil, tandis qu'un favicon flou ou manquant signale un manque de finition. Prenez le temps de bien faire la version 16px, générez l'ensemble complet des tailles et formats, et l'icône représentera le site proprement où qu'elle n'apparaisse. L'investissement est minime — une seule après-midi de travail de conception et d'exportation — mais il rapporte chaque fois qu'un utilisateur voit votre site dans un onglet, un signet ou sur un écran d'accueil, ce qui est beaucoup plus souvent que la plupart des équipes ne le réalisent.

Questions fréquemment posées

Quelles tailles doit avoir un favicon ?

Un ensemble moderne : 16×16, 32×32, 48×48 (classique), plus 180×180 (icône Apple Touch) et 192×192 / 512×512 (Android). Une seule image maîtresse génère l'ensemble. Le navigateur choisit la bonne taille par contexte.

Comment concevoir un favicon qui fonctionne à 16px ?

Gardez-le simple — une forme audacieuse, un contraste élevé, pas de détails fins ni de texte. À 16px, tout ce qui est complexe devient une tache. Testez le design à 16px avant de vous engager ; s'il n'est pas lisible là, il est trop complexe.

Quels formats de fichiers un favicon devrait-il utiliser ?

ICO pour la compatibilité héritée, PNG pour les navigateurs modernes et les icônes Apple/Android, et SVG pour une version indépendante de la résolution lorsque supporté. Générez l'ensemble complet ; un seul format ne couvre pas tous les appareils.

Comment faire référence aux favicons dans HTML ?

Avec des balises <link rel="icon"> pointant vers chaque taille et format, plus <link rel="apple-touch-icon"> pour iOS. Le navigateur choisit la meilleure correspondance. Un ensemble complet de balises link couvre toutes les plateformes.

Puis-je utiliser une seule image pour toutes les tailles de favicon ?

Oui — un seul maître carré (512×512 ou plus grand) génère l'ensemble, de 16x16 à 512x512. Concevez le maître pour qu'il soit lisible à 16px (une forme audacieuse) afin que la plus petite taille fonctionne toujours. Un maître, plusieurs tailles.

Comment tester un favicon ?

Ouvrez le site dans un onglet de navigateur et vérifiez l'icône à 16px (taille de l'onglet), 32px (signets) et 180px (Apple Touch). Si la version 16px n'est pas lisible, le design est trop complexe — simplifiez-le en une forme audacieuse. Les favicons sont petits mais apparaissent partout, donc une icône nette et reconnaissable à toutes les tailles renforce la marque en un coup d'œil.

Qu'est-ce qu'un fichier ICO ?

Un format conteneur hérité qui contient une ou plusieurs images raster de différentes tailles, utilisé pour les favicons sur les anciens navigateurs (notamment l'ancien Internet Explorer). Les navigateurs modernes utilisent PNG et SVG, donc ICO est principalement une couche de rétrocompatibilité. Générez un ICO en parallèle de votre ensemble PNG/SVG afin que chaque navigateur, aussi ancien soit-il, reçoive une icône.

Image vers Favicon : Créez des icônes de site web depuis n'importe quelle image

Réponse rapide : comment créer un favicon à partir d'une image ?

Quelles tailles doit avoir un favicon ?

Comment concevoir un favicon qui fonctionne à 16px ?

Quels formats de fichiers devriez-vous générer ?

Comment faire référence aux favicons dans HTML ?

Concevoir des favicons pour le mode clair et sombre

Erreurs courantes de favicons