Icône de favori HTML
Un favicon est une petite image affichée à côté du titre de la page dans l'onglet du navigateur.
Comment ajouter un favicon en HTML
Vous pouvez utiliser n'importe quelle image que vous aimez comme favicon. Vous pouvez également créer votre propre favicon sur des sites comme https://favicon.cc .
Conseil : Un 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 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 favicon dans ce dossier. Un nom commun pour une image favicon est "favicon.ico".
Ensuite, ajoutez un <link>
élément à votre fichier "index.html", après l' <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 votre image favicon à gauche du titre de la page.
Prise en charge du format de fichier favicon
Le tableau suivant montre la prise en charge du format de fichier pour une image de favicon :
Browser | ICO | PNG | GIF | JPEG | SVG |
---|---|---|---|---|---|
Edge | Yes | Yes | Yes | Yes | Yes |
Chrome | Yes | Yes | Yes | Yes | Yes |
Firefox | Yes | Yes | Yes | Yes | Yes |
Opera | Yes | Yes | Yes | Yes | Yes |
Safari | Yes | Yes | Yes | Yes | Yes |
Résumé du chapitre
<link>
Utilisez l' élément HTML pour insérer un favicon
Balise de lien HTML
Tag | Description |
---|---|
<link> | Defines the relationship between a document and an external resource |
Pour une liste complète de toutes les balises HTML disponibles, consultez notre Référence des balises HTML .