Comment Ajouter une Image Dans la Barre de Titre?

La plupart des sites Web ajoutent une logo icône ou une logo image dans la barre de titre. La logo icône est également appelée comme favicon.

Favicon, également connu comme une icône de raccourci, icône de site Web, icône d’onglet, icône URL, ou icône de signet, est un fichier contenant une ou plusieurs petites icônes, associées à un site Web ou page Web particulier.

Favicon est utilisé dans le coin supérieur gauche de l’onglet. Favicons sont attrayants et peuvent être utiles pour l’engagement des utilisateurs.

Favicon a été standardisé par W3C dans la recommandation HTML 4.01. L’implémentation standard utilise un élément de lien avec un attribut rel dans la section <head> du document, qui spécifie le format du fichier, le nom du fichier et la location. Le fichier peut être dans n’importe quel répertoire de site Web et avoir n’importe quel format de fichier image (ico, png, jpeg, gif).

Vous pouvez ajouter des favicons de deux façons.

L’image doit être carrée dans n’importe quel format d’image (ico, jpg, bmp, gif, png), pour apparaître normalement dans les navigateurs. Les images non-carrées fonctionneront également, mais ces icônes peuvent ne pas sembler professionnelles.
Vous devez convertir votre image en format ico. Il existe de nombreux outils en ligne pour le faire.
En ouvrant l’outil, vous devez télécharger votre fichier image. Ensuite, l’image sera convertie automatiquement.
Téléchargez votre image et enregistrez votre fichier . ico sur votre ordinateur.
Renommez le fichier à favicon.ico, parce que le navigateur seulement reconnaîtra ce nom automatiquement.
Téléchargez ce fichier dans le répertoire hôte, où se trouvent les fichiers de votre site Web.
Lorsque votre fichier favicon.ico est téléchargé, le navigateur le sélectionnera automatiquement et affichera l’image dans le navigateur.

La deuxième façon d’ajouter des favicons est la suivante:

L’image doit être carrée dimensionnée dans n’importe quel format d’image (ico, jpg, bmp, gif, png) de manière à apparaître normalement dans les navigateurs. Les images non-carrées fonctionneront également, mais ces icônes peuvent ne pas sembler professionnelles.
Téléchargez ce fichier dans le répertoire hôte, où se trouvent les fichiers de votre site Web.
À la fin spécifiez l’image, que vous souhaitez utiliser comme favicon dans le code de votre site web:

Ajoutez le lien suivant à la section <head> :

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">

Si vous ne voyez pas le nouveau favicon, videz le cache de votre navigateur et redémarrez-le.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <link rel="shortcut icon" href="/favicon1.ico" />
  </head>
  <body>
    <h1 style="color: #1c98c9;">
      L’icône W3docs
    </h1>
    <p>
      L’icône W3docs est ajoutée dans la barre de titre
    </p>
  </body>
</html>

Essayez-vous-même!

Résultat

Un favicon doit avoir les caractéristiques suivantes:

Favicon.ico est le nom par défaut.
La taille doit être 16 16, 32 32, 48 48, 64 64 ou 128 128 pixels.
La couleur doit être 8 bits, 24 bits ou 32 bits.

En fonction du format favicon, l’attribut de type doit être modifié:

Pour PNG utilisez image/png.
Pour GIF utilisez image/gif.
Pour JPEG utilisez image/gif.
Pour ICO utilisez image/x-icon.
Pour SVG, utilisez image/svg+xml.

<link rel="icon" href="favicon.gif" type="image/gif">

Pour différentes plates-formes, la taille favicon doit également être modifiée:

<table class="table table-bordered table-striped table-header small-font">
  <tbody>
    <tr>
      <th>Platform</th>
      <th>Name</th>
      <th>Rel value</th>
      <th>Favicon size</th>
    </tr>
    <tr>
      <td>Google TV</td>
      <td>favicon.png</td>
      <td>icon</td>
      <td>96×96</td>
    </tr>
    <tr>
      <td>Opera Coast</td>
      <td>favicon-coast.png</td>
      <td>icon</td>
      <td>228×228</td>
    </tr>
    <tr>
      <td>Ipad Retina, iOS 7 or later</td>
      <td>apple-touch-icon-152×152-precomposed.png</td>
      <td>apple-touch-icon-precomposed</td>
      <td>152×152</td>
    </tr>
    <tr>
      <td>Ipad Retina, iOS 6 or later</td>
      <td>apple-touch-icon-144×144-precomposed.png</td>
      <td>apple-touch-icon-precomposed</td>
      <td>144×144</td>
    </tr>
    <tr>
      <td>Ipad Min, first generation iOS 7 or later</td>
      <td>apple-touch-icon-76×76-precomposed.png</td>
      <td>apple-touch-icon-precomposed</td>
      <td>76×76</td>
    </tr>
    <tr>
      <td>Ipad Mini,first generation iOS 6 or previous</td>
      <td>apple-touch-icon-72×72-precomposed.png</td>
      <td>apple-touch-icon-precomposed</td>
      <td>72×72</td>
    </tr>
    <tr>
      <td>Iphone Retina, iOS 7 or later</td>
      <td>apple-touch-icon-120×120-precomposed.png</td>
      <td>apple-touch-icon-precomposed</td>
      <td>120×120</td>
    </tr>
    <tr>
      <td>Iphone Retina, iOS 6 or previous</td>
      <td>apple-touch-icon-114×114-precomposed.png</td>
      <td>apple-touch-icon-precomposed</td>
      <td>114×114</td>
    </tr>
  </tbody>
</table>

Pour les appareils Apple avec le système d’exploitation iOS version 1.1.3 ou ultérieure et pour les appareils Android, vous pouvez créer un affichage sur leurs écrans d’accueil en utilisant le bouton Ajouter à l’écran d’accueil dans la feuille de partage dans Safari. Pour les différentes plates-formes, ajoutez le lien dans la section principale des documents..

Voyez comment vous pouvez l’ajouter à votre code:

<!-- default favicon -->
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<!-- wideley used favicon -->
<link rel="icon" href="/favicon.png" sizes="32x32" type="image/png">
<!-- for apple mobile devices -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-152x152-precomposed.png" type="image/png" sizes="152x152">
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-152x152-precomposed.png" type="image/png" sizes="120x120">
<!-- google tv favicon -->
<link rel="icon" href="/favicon-googletv.png" sizes="96x96" type="image/png">