Docs HTML exécutables : Favicon

Q: Comment ajouter un favicon en HTML ?

Placez le fichier de l'icône sur votre site et ajoutez (ou le chemin d'un PNG ou d'un SVG) dans . Les navigateurs l'affichent alors dans l'onglet, dans les favoris et dans l'historique.

Q: Quelle taille doit faire un favicon ?

Fournissez un favicon.ico (ou PNG) de 32×32 pour les onglets, un SVG qui s'adapte à toutes les tailles, et un PNG apple-touch-icon de 180×180 pour les écrans d'accueil d'iPhone. Les applications web avec un manifest listent aussi des PNG de 192×192 et 512×512.

Q: Pourquoi mon favicon ne s'affiche pas ?

Les causes habituelles sont un mauvais chemin dans href, un placé hors de , ou le navigateur qui affiche encore une ancienne icône en cache. Ouvrez directement l'URL de l'icône pour vérifier le chemin, puis rechargez en vidant le cache ou ajoutez une version comme ?v=2 à l'URL.

Q: Peut-on utiliser un SVG ou un PNG comme favicon ?

Oui. Utilisez ou . Le SVG fonctionne dans Chrome, Edge et Firefox ; gardez aussi un ICO ou un PNG pour les navigateurs qui ne le prennent pas en charge.

Q: Faut-il rel="shortcut icon" ?

Non. rel="icon" est la valeur standard. Le mot shortcut est un reste de l'ancien Internet Explorer et ne fait rien dans les navigateurs actuels.

Comment ajouter un favicon

Enregistrez votre icône sur le site et pointez vers elle avec une balise <link rel="icon"> dans <head> :

<link rel="icon" href="/favicon.ico">

C'est toute la réponse pour un site simple. Le href peut pointer vers un fichier .ico, .png ou .svg. L'exemple ci-dessous utilise un SVG écrit directement dans le href sous forme de data URI, il n'a donc pas besoin de fichier séparé. Un aperçu placé dans une autre page ne peut pas changer l'onglet de votre navigateur, donc le script dessine la même icône dans un onglet factice et en trois tailles :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Bake Club</title>
  <link rel="icon" type="image/svg+xml"
    href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='7' fill='%232563eb'/%3E%3Ctext x='16' y='23' font-size='20' font-family='Arial' font-weight='700' fill='white' text-anchor='middle'%3EB%3C/text%3E%3C/svg%3E">
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .bar { background: #e5e7eb; padding: 8px 8px 0; border-radius: 8px 8px 0 0; }
    .tab { display: inline-flex; align-items: center; gap: 8px; background: #fff; border-radius: 8px 8px 0 0; padding: 8px 14px; font-size: 13px; }
    .sizes { display: flex; align-items: end; gap: 16px; margin-top: 16px; font-size: 12px; color: #6b7280; }
    .sizes div { text-align: center; }
  </style>
</head>
<body>
  <div class="bar"><div class="tab"><img id="tab-icon" width="16" height="16" alt=""><span id="tab-title"></span></div></div>
  <div class="sizes" id="sizes"></div>
  <script>
    const href = document.querySelector('link[rel="icon"]').href;
    document.getElementById('tab-icon').src = href;
    document.getElementById('tab-title').textContent = document.title;
    for (const size of [16, 32, 64]) {
      const box = document.createElement('div');
      box.innerHTML = '<img width="' + size + '" height="' + size + '" alt=""><br>' + size + 'px';
      box.querySelector('img').src = href;
      document.getElementById('sizes').append(box);
    }
  </script>
</body>
</html>

À 16 pixels, il y a de la place pour une lettre épaisse ou une forme simple, et les détails fins disparaissent. Concevez l'icône d'abord pour la plus petite taille. Remplacez fill='%232563eb' par une autre couleur (%23 est le # encodé pour l'URL) et chaque copie se met à jour.

Quels fichiers fournir

Les navigateurs, les téléphones et les lanceurs d'applications cherchent des icônes différentes. Un petit ensemble les couvre toutes :

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

Fichier	Taille	Utilisé pour
`favicon.ico`	32×32	Les onglets du navigateur, et les outils qui ne cherchent que `/favicon.ico`
`icon.svg`	Toutes (vectoriel)	Des onglets nets à toutes les densités d'écran, dans Chrome, Edge et Firefox
`apple-touch-icon.png`	180×180	L'icône quand quelqu'un ajoute votre site à l'écran d'accueil d'un iPhone ou d'un iPad
Icônes du manifest	PNG de 192×192 et 512×512	L'écran d'accueil Android et les applications web installées

La plupart des navigateurs demandent aussi d'eux-mêmes /favicon.ico à la racine du site quand une page n'a pas de lien d'icône, donc placer un favicon.ico à cet endroit est une bonne valeur par défaut. L'attribut sizes indique au navigateur la taille de chaque fichier, pour qu'il choisisse le meilleur. Utilisez rel="icon" ; l'ancien rel="shortcut icon" ne marche que parce que les navigateurs ignorent le mot en trop.

Un favicon emoji

Pour un prototype ou une page personnelle, un emoji fait un favicon rapide. Placez-le dans un élément SVG <text> :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Emoji favicon</title>
  <link rel="icon"
    href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext y='.9em' font-size='90'%3E%F0%9F%8D%AA%3C/text%3E%3C/svg%3E">
</head>
<body style="font-family: system-ui, sans-serif;">
  <p>The icon at tab size and larger:</p>
  <img id="a" width="16" height="16" alt="">
  <img id="b" width="48" height="48" alt="">
  <script>
    const href = document.querySelector('link[rel="icon"]').href;
    document.getElementById('a').src = href;
    document.getElementById('b').src = href;
  </script>
</body>
</html>

%F0%9F%8D%AA est l'emoji cookie, encodé pour l'URL. L'emoji est dessiné par la police emoji du système d'exploitation, donc il a un aspect différent sous Windows, macOS et Android, et pour un vrai produit une icône conçue sur mesure est le meilleur choix.

Une icône qui suit le mode sombre

Un favicon SVG peut contenir son propre CSS, y compris une media query prefers-color-scheme, pour qu'une icône sombre devienne claire quand le navigateur utilise un thème sombre :

<!-- icon.svg -->
<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>

Changer le favicon en JavaScript

Les sites utilisent un favicon qui change pour un point de notification ou une couleur d'état. Dessinez la nouvelle icône sur un <canvas> et donnez au href du lien l'image du canvas :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Dynamic favicon</title>
  <link rel="icon" id="icon" href="data:,">
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    button { font: inherit; padding: 6px 12px; margin-inline-end: 6px; }
    img { vertical-align: middle; margin-inline-start: 8px; }
  </style>
</head>
<body>
  <button id="on">New message</button>
  <button id="off">Clear</button>
  Current icon: <img id="preview" width="32" height="32" alt="">
  <script>
    function draw(withDot) {
      const canvas = document.createElement('canvas');
      canvas.width = canvas.height = 32;
      const ctx = canvas.getContext('2d');
      ctx.fillStyle = '#2563eb';
      ctx.fillRect(2, 2, 28, 28);
      if (withDot) {
        ctx.fillStyle = '#dc2626';
        ctx.beginPath();
        ctx.arc(24, 8, 7, 0, Math.PI * 2);
        ctx.fill();
      }
      const url = canvas.toDataURL('image/png');
      document.getElementById('icon').href = url;
      document.getElementById('preview').src = url;
    }
    document.getElementById('on').onclick = () => draw(true);
    document.getElementById('off').onclick = () => draw(false);
    draw(false);
  </script>
</body>
</html>

Sur une vraie page dans Chrome ou Firefox, l'icône de l'onglet change à chaque fois que href est défini, au même moment que l'image de l'aperçu change ici.

Erreurs fréquentes

Un mauvais chemin. href="favicon.ico" est relatif à la page actuelle, donc il casse sur /blog/post. Utilisez un chemin depuis la racine : href="/favicon.ico".
S'attendre à voir une mise à jour tout de suite. Les navigateurs mettent fortement les favicons en cache. Rechargez en vidant le cache, ou changez l'URL (/favicon.ico?v=2) quand vous remplacez l'icône.
Un logo détaillé réduit à 16 pixels. Simplifiez-le : une lettre ou une forme avec un fort contraste.
Seulement un SVG. Gardez aussi un ICO ou un PNG pour les navigateurs qui ne prennent pas en charge les favicons SVG, et ajoutez l'apple-touch-icon pour iOS.
Mettre le lien dans <body>. Gardez-le dans <head> avec la balise title et les autres métadonnées.

Questions fréquentes

Comment ajouter un favicon en HTML ?

Placez le fichier de l'icône sur votre site et ajoutez <link rel="icon" href="/favicon.ico"> (ou le chemin d'un PNG ou d'un SVG) dans <head>. Les navigateurs l'affichent alors dans l'onglet, dans les favoris et dans l'historique.

Quelle taille doit faire un favicon ?

Fournissez un favicon.ico (ou PNG) de 32×32 pour les onglets, un SVG qui s'adapte à toutes les tailles, et un PNG apple-touch-icon de 180×180 pour les écrans d'accueil d'iPhone. Les applications web avec un manifest listent aussi des PNG de 192×192 et 512×512.

Pourquoi mon favicon ne s'affiche pas ?

Les causes habituelles sont un mauvais chemin dans href, un <link> placé hors de <head>, ou le navigateur qui affiche encore une ancienne icône en cache. Ouvrez directement l'URL de l'icône pour vérifier le chemin, puis rechargez en vidant le cache ou ajoutez une version comme ?v=2 à l'URL.

Peut-on utiliser un SVG ou un PNG comme favicon ?

Oui. Utilisez <link rel="icon" href="/icon.svg" type="image/svg+xml"> ou <link rel="icon" href="/icon.png" type="image/png">. Le SVG fonctionne dans Chrome, Edge et Firefox ; gardez aussi un ICO ou un PNG pour les navigateurs qui ne le prennent pas en charge.

Faut-il rel="shortcut icon" ?

Non. rel="icon" est la valeur standard. Le mot shortcut est un reste de l'ancien Internet Explorer et ne fait rien dans les navigateurs actuels.

Peut-on utiliser un emoji comme favicon ?

Oui, en l'entourant d'un SVG : une data URI SVG qui contient un élément <text> avec l'emoji. C'est pratique pour les prototypes, mais l'emoji a un aspect différent selon le système d'exploitation.

Concepts liés