HTML Favicon
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 comme favicon. Vous pouvez également créer votre propre favicon sur des sites comme https://www.favicon.cc .
Conseil : Un favicon doit être une image simple avec un fort contraste.
Une image de favicon est affichée à 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 appelé "images" dans le répertoire racine et enregistrez votre image de favicon dans ce dossier. Un nom courant pour une image de favicon est "favicon.ico".
Ensuite, ajoutez un élément <link> à votre fichier "index.html", après l'élément <title> , comme ceci :
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Mon Titre de Page</title>
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
</head>
<body>
<h1>Ceci est un titre</h1>
<p>Ceci est un paragraphe.</p>
</body>
</html> Maintenant, enregistrez le fichier "index.html" et rechargez-le dans votre navigateur. Votre onglet de navigateur devrait maintenant afficher votre image de favicon à gauche du titre de la page.
Support des formats de fichier favicon
Le tableau suivant montre le support des formats de fichier pour une image de favicon :
| Navigateur | 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
Tag de lien HTML
| Tag | Description |
|---|---|
| <link> | Définit la relation entre un document et une ressource externe |
Pour une liste complète de tous les tags HTML disponibles, visitez notre Référence des tags HTML .