Comment créer un favicon pour votre site web

Créer un favicon consiste à rendre un même dessin carré à plusieurs tailles fixes en pixels, à réunir les plus petites dans un seul fichier .ico, puis à indiquer aux navigateurs où trouver chacune grâce à des balises <link>. Il n'existe pas de fichier unique et magique : un onglet de navigateur, un écran d'accueil d'iPhone et une application web installée demandent chacun autre chose. C'est pourquoi un favicon arrive sous la forme d'un petit jeu de fichiers plutôt que d'une seule image.

La méthode rapide : ouvrez le Générateur de favicon, déposez un PNG ou un SVG carré d'au moins 512 px, saisissez le nom de votre site (il alimente le manifeste), cochez si vous le souhaitez Ajouter une marge de 10 % ou Remplir le fond, puis cliquez sur Générer les favicons. Le ZIP contient favicon.ico, favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png, android-chrome-192x192.png, android-chrome-512x512.png et site.webmanifest — sept fichiers, plus le HTML affiché sous les aperçus. Votre image est rendue dans le navigateur, elle n'est pas envoyée en ligne.

Les tailles qui comptent encore

Fichier	Taille	Qui le réclame
favicon.ico	16, 32 et 48 px dans un seul fichier	Onglets, favoris, raccourcis Windows, et tout navigateur qui demande /favicon.ico de lui-même
favicon-16x16.png, favicon-32x32.png	16 et 32 px	Les navigateurs actuels, quand les balises <link> les désignent
apple-touch-icon.png	180 px	iOS et iPadOS, quand le site est ajouté à l'écran d'accueil
android-chrome-192x192.png	192 px	Les raccourcis sur l'écran d'accueil Android
android-chrome-512x512.png	512 px	Les écrans de démarrage Android et le contrôle d'installabilité de Chrome
site.webmanifest	—	Donne le nom du site et liste les icônes 192 et 512 px des applications web installables

Tout le reste que vous avez pu croiser — 64, 96, 144, la longue liste des tuiles Windows — vient de navigateurs et de téléphones qui ont depuis tourné la page. Une icône de 16 px, c'est 256 pixels en tout. Voilà la vraie contrainte de conception, bien plus que le nombre de fichiers.

Le HTML à coller

Placez les fichiers à la racine de votre site, de façon qu'ils répondent à votresite.fr/favicon.ico, puis collez ceci dans le <head> de chaque page. C'est exactement le code fourni par le générateur :

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Dans un framework, « la racine » est le dossier servi à / — le plus souvent public/ ou static/. Sur un créateur de site ou un CMS, cherchez plutôt un réglage « icône du site » : WordPress en propose un dans Apparence → Personnaliser → Identité du site → Icône du site, et génère lui-même les tailles à partir d'une seule image carrée de 512 px ou plus.

Les favicons SVG

Un navigateur qui les gère préférera un SVG, car un seul fichier vectoriel reste net à toutes les tailles. Ajoutez-le au-dessus des lignes PNG, en gardant le .ico comme secours :

<link rel="icon" href="/favicon.svg" type="image/svg+xml">

Chrome, Firefox et Edge acceptent les favicons SVG depuis des années ; Safari s'y est mis plus tard, ne supprimez donc pas le .ico. L'intérêt réel du SVG est de pouvoir suivre le thème du navigateur, car un bloc de style placé à l'intérieur du fichier est pris en compte :

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    circle { fill: #111827; }
    @media (prefers-color-scheme: dark) { circle { fill: #f9fafb; } }
  </style>
  <circle cx="16" cy="16" r="14"/>
</svg>

Notre générateur convertit en pixels le SVG que vous lui donnez, aux différentes tailles PNG ; il ne produit pas de favicon SVG. Ce fichier-là, vous l'écrivez ou l'exportez vous-même, par exemple depuis Inkscape avec Fichier → Enregistrer sous → SVG optimisé.

Partir du bon dessin

• Visez le carré. Une source rectangulaire est mise à l'échelle pour tenir dans le carré et centrée : il reste des bandes vides sur deux côtés, et l'icône paraît plus petite que ses voisines. Rognez d'abord avec Recadrer une image.
• Simplifiez. Une lettre, un symbole, ou le signe de votre logo sans le texte. Ce qui se lit sur une carte de visite devient illisible sur 16 pixels.
• Voyez grand. 512 px ou plus. Redimensionner une image peut agrandir une petite source, mais agrandir n'invente aucun détail : un SVG ou un grand PNG donnera toujours un meilleur 16 px.
• Pensez au masque. Android découpe les icônes installées selon une forme propre à l'appareil, et iOS applique ses propres coins arrondis : ne dessinez donc jamais vous-même de coins arrondis ni de bordure, et gardez l'essentiel dans les 80 % centraux du carré. L'option Ajouter une marge de 10 % est un réglage raisonnable pour cela.

Ce que le générateur fait, et ne fait pas

• Chaque taille est rendue séparément à partir de votre source, avec lissage, plutôt que réduite depuis la taille précédente.
• favicon.ico est un conteneur qui abrite trois images PNG complètes, en 16, 32 et 48 px. Les navigateurs et Windows lisent le PNG dans un ICO depuis très longtemps.
• Le manifeste déclare le nom du site, un nom court coupé aux 12 premiers caractères, les icônes 192 et 512 px, display: standalone, ainsi qu'une couleur de thème et de fond qui suivent le réglage Remplir le fond (blanc s'il est désactivé).
• Il n'ajoute pas purpose: "maskable" aux icônes, ne produit pas de SVG, ne fait pas varier le dessin selon la taille et n'envoie rien sur votre serveur. Si vous voulez une version simplifiée en 16 px et une version détaillée en 512 px, préparez deux images sources et lancez le générateur deux fois.
• realfavicongenerator.net est une bonne solution de rechange quand vous souhaitez des aperçus par plateforme et un contrôle plus fin du manifeste.

Pourquoi l'ancienne icône s'affiche encore

C'est l'échec qui fait perdre le plus de temps, et il vient presque toujours du cache, pas de vos fichiers. Les navigateurs mettent les favicons en cache séparément des pages, et un rechargement forcé de la page ne va souvent pas les rechercher. Vérifiez dans cet ordre :

1. Ouvrez directement votresite.fr/favicon.ico dans un onglet et rechargez-le là. Si la nouvelle icône apparaît, vos fichiers sont bons et seul le cache est périmé.
2. Essayez une fenêtre de navigation privée, ou un autre navigateur, pour voir ce que découvre un visiteur qui arrive pour la première fois.
3. Si le changement doit être visible tout de suite, versionnez l'adresse : href="/favicon.ico?v=2". Le navigateur y voit une nouvelle adresse.
4. Dans Chrome, Outils de développement → Application → Manifeste liste les icônes du manifeste et signale celles qu'il n'a pas pu charger : le moyen le plus rapide de repérer un chemin erroné.

Problèmes fréquents, et ce qu'ils signifient

L'icône est floue dans l'onglet. Le dessin contient trop de détails pour 32 px, ou la source était petite et a été agrandie. Simplifiez le dessin plutôt que d'ajouter des tailles.

L'icône disparaît en thème sombre. Un signe foncé sur fond transparent se noie dans une barre d'onglets sombre. Remplissez le fond avec une couleur, ou utilisez un SVG avec la règle prefers-color-scheme ci-dessus.

L'icône Apple apparaît sur du noir. iOS n'affiche pas la transparence sur les icônes de l'écran d'accueil : les zones transparentes deviennent noires. Cochez Remplir le fond et choisissez la couleur de votre marque avant de générer.

Chrome indique que le site n'est pas installable. Le manifeste doit être accessible et déclarer une icône d'au moins 192 px et une de 512 px. Une erreur 404 sur /site.webmanifest, généralement parce que les fichiers ont été déposés dans un sous-dossier, en est la cause habituelle.

L'icône est correcte sur ordinateur et fausse sur le téléphone. Les téléphones lisent l'icône Apple et le manifeste, pas favicon.ico. Vérifiez que les trois ont bien été mis en ligne, et pas seulement le .ico.

Questions fréquentes

Le favicon.ico est-il encore utile ? Oui. Les navigateurs demandent /favicon.ico d'eux-mêmes, même sans balise <link>, et c'est la solution de secours qui fonctionne partout.

Un seul PNG peut-il remplacer tout le jeu ? Pour les onglets, oui. Vous perdez l'icône d'écran d'accueil sur iOS et l'icône d'application installable sur Android.

Quelle taille pour l'image source ? Carrée, 512 px ou plus, ou bien un SVG. Au-delà, la simplicité compte davantage que la taille.

Le favicon influence-t-il le référencement ? Il s'affiche à côté de certains résultats de recherche sur mobile, ce qui est une raison d'en avoir un. Rien dans ces fichiers ne décide du moment où un moteur le reprend, ni s'il le reprend.

Puis-je utiliser une photo ? C'est possible, mais à 16 px une photo devient une bouillie colorée. Une forme simple et contrastée se lit bien mieux.

Pour aller plus loin

• Transformer un logo vectoriel en PNG à la taille voulue : Convertir SVG en PNG
• Mettre la source au carré ou la resserrer : Recadrer une image et Redimensionner une image
• Produire un .ico indépendant à partir de n'importe quelle image : Convertisseur d'images