Aller au contenu principal

Le favicon

Notions théoriques​

Avez-vous remarqué la petite icône affichée dans l'onglet de votre navigateur, à côté du titre de la page ? Cette icône s'appelle le favicon (contraction de "favorite icon").

Le favicon apparaît :

  • dans l'onglet du navigateur,
  • dans les favoris/marque-pages,
  • dans l'historique de navigation.

Il permet aux utilisateurs de reconnaître rapidement votre site parmi plusieurs onglets ouverts.

Pour ajouter un favicon à votre site, vous devez utiliser la balise <link> (déjà connue depuis la séance sur la feuille de style) avec l'attribut rel="icon", placée dans le <head> de votre page.

<head>
    <title>Mon site</title>
    <link rel="icon" href="favicon.ico">
</head>
  • <link rel="icon" href="..."> : Indique au navigateur où trouver l'image à utiliser comme favicon. L'attribut href spécifie le chemin vers le fichier image.
info

Le format historique du favicon est .ico, mais les navigateurs modernes acceptent aussi les formats .png et .svg.

Bonne pratique - Toujours prevoir un favicon

Un site sans favicon affiche une icône générique et grisée dans l'onglet du navigateur, ce qui donne une impression de site inachevé ou peu professionnel.

Exemple pratique​

Ajoutons un favicon à une page HTML existante :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The Legend of Zelda</title>
    <link rel="icon" href="favicon.png">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>The Legend of Zelda</h1>
    </header>
</body>
</html>

Le fichier favicon.png doit se trouver dans le même dossier que la page HTML (ou dans le chemin indiqué par l'attribut href).

Les balises à connaître​

  • <link rel="icon" href="..."> : Déclare le favicon d'une page HTML, à placer dans le <head>.

Test de mémorisation/compréhension​


Qu'est-ce qu'un favicon ?


Quelle balise permet de déclarer le favicon d'une page ?


Quelle valeur de l'attribut rel indique un favicon ?


Dans quelle balise doit-on placer le lien vers le favicon ?


TP pour réfléchir et résoudre des problèmes​

Pour ce TP, vous allez ajouter un favicon à votre site sur votre jeu vidéo préféré.

  1. Trouvez ou créez une petite image carrée (par exemple favicon.png) et enregistrez-la à la racine de votre projet, aux côtés de votre fichier index.html.

  2. Ajoutez la balise <link> qui déclare ce favicon dans le <head> de votre page.

  1. Vérifiez, dans l'onglet de votre navigateur, que votre favicon s'affiche correctement.
Bonne pratique - Meme favicon sur toutes les pages

Répétez la balise <link rel="icon"> dans le <head> de chacune de vos pages HTML, pour que le favicon s'affiche partout sur votre site, pas uniquement sur la page d'accueil.

📌 Une solution