HTML Favicon / Icône de favori
Une favicon est une petite image affichée à côté du titre de la page dans l'onglet du navigateur.
Comment ajouter une favicon en HTML
Vous pouvez utiliser n'importe quelle image de votre choix comme favicon. Vous pouvez également créer votre propre favicon sur des sites comme https://favicon.cc.
Astuce : Une favicon est une petite image, il doit donc s'agir d'une image simple avec un contraste élevé.
Une image favicon s'affiche à gauche du titre de la page dans l'onglet du navigateur, comme ceci :
Pour ajouter un favicon à votre site Web, enregistrez votre image de favicon dans le répertoire racine de votre serveur Web ou créez un dossier dans le répertoire racine appelé images et enregistrez votre image de favicon dans ce dossier. Un nom courant pour une image favicon est "favicon.ico".
Ensuite, ajoutez un élément <link> à votre fichier "index.html", après le <title> élément, comme ceci :
Exemple
<!DOCTYPE html>
<html>
<head>
<title>My Page Title</title>
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Maintenant, enregistrez le fichier "index.html" et rechargez-le dans votre navigateur. L'onglet de votre navigateur devrait maintenant afficher l'image de votre favicon à gauche du titre de la page.
Prise en charge du format de fichier Favicon
Le tableau suivant montre la prise en charge des formats de fichiers pour une image de favicon :
| Browser | ICO | PNG | GIF | JPEG | SVG |
|---|---|---|---|---|---|
| Edge | Oui | Oui | Oui | Oui | Oui |
| Chrome | Oui | Oui | Oui | Oui | Oui |
| Firefox | Oui | Oui | Oui | Oui | Oui |
| Opera | Oui | Oui | Oui | Oui | Oui |
| Safari | Oui | Oui | Oui | Oui | Oui |
Résumé du chapitre
- Utilisez l'élément HTML
<link>pour insérer un favicon - Exemple:
<link rel="icon" type="image/x-icon" href="../images/favicon.ico">
HTML Balise de lien
| Étiquette | Description |
|---|---|
| <link> | Définit la relation entre un document et une ressource externe |
Pour une liste complète de toutes les balises HTML disponibles, visitez notre Référence des balises HTML.
