Chapitre 710 | Favicon et balises meta de base (meta description)

Exemples de FAVICON

Exemple de meta-description utilisée dans le SERP

Compléter le `<head>`

Au chapitre 30, vous avez découvert la structure minimale d’une page HTML5, avec dans le <head> : <meta charset> et <title>. Ce chapitre complète ce <head> avec deux ajouts utiles à tout site : le favicon et la meta description.

1. Le favicon

À quoi ça sert vraiment : le favicon est la petite icône qui apparaît dans l’onglet du navigateur, à côté du titre de la page. Vous en voyez un en ce moment même sur l’onglet de ce cours. C’est aussi cette icône qui s’affiche dans les favoris/marque-pages, et parfois dans l’historique de navigation.

Pour l’ajouter, on utilise une balise <link> dans le <head> :

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

Explication de chaque partie :

rel="icon" : indique au navigateur que ce fichier lié est une icône (obligatoire, c’est ce mot-clé qui déclenche l’affichage dans l’onglet).
type="image/png" : précise le format du fichier. On l’adapte selon le format réel de votre image (voir juste en dessous).
href="favicon.png" : le chemin vers le fichier image. C’est exactement la même logique de chemin relatif/absolu que vous avez vue au chapitre 720 — favicon.png ici signifie que le fichier est au même niveau que la page HTML.

Quel format utiliser ?

Deux formats sont courants pour un favicon :

.ico : le format historique, encore largement supporté. Type à utiliser : type="image/x-icon".
.png : plus simple à produire (n’importe quel logiciel de retouche d’image l’exporte), bien supporté par tous les navigateurs modernes. Type à utiliser : type="image/png".

Pour un usage simple comme celui de ce cours, le format .png suffit largement — pas besoin de générer un .ico sauf exigence spécifique d’un projet.

Pourquoi certains sites ont plusieurs lignes de favicon ?

Si vous inspectez le code source de certains sites, vous remarquerez parfois plusieurs balises <link rel="icon"> à la suite. Ce n’est pas une erreur : un favicon peut s’afficher dans des contextes très différents (onglet du navigateur, icône d’application sur l’écran d’accueil d’un téléphone, favoris…), et chacun de ces contextes attend une taille d’image différente. Si on ne fournit qu’une seule taille, le navigateur ou l’appareil doit la redimensionner lui-même, ce qui donne parfois une icône floue ou déformée — c’est ce que vous avez pu observer sur certains sites.

Pour éviter ce problème, on peut fournir plusieurs versions du favicon, chacune dans sa propre balise, avec un attribut sizes qui précise sa taille exacte :

<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="favicon-180x180.png">

Explication rapide :

Les deux premières lignes fournissent le favicon classique en deux tailles (petite pour l’onglet, plus grande pour d’autres usages), grâce à l’attribut sizes.
La troisième ligne, avec rel="apple-touch-icon", fournit une version spécifique pour les appareils Apple (iPhone/iPad), utilisée quand quelqu’un ajoute votre site en icône sur son écran d’accueil — d’où la taille plus grande (180×180).

Ce système à plusieurs tailles reste optionnel : une seule ligne, comme vue au début de ce chapitre, suffit largement pour un projet simple. On ne le pratique pas dans l’exercice de ce chapitre, mais il est bon de savoir pourquoi vous le croiserez sur des sites professionnels.

2. La meta description

À quoi ça sert vraiment : la meta description est un court texte, invisible sur la page elle-même, mais qui s’affiche dans les résultats de recherche Google (juste sous le titre bleu cliquable) et parfois quand un lien vers votre page est partagé ailleurs. C’est ce texte qui donne envie à quelqu’un de cliquer sur votre lien plutôt qu’un autre.

<meta name="description" content="Apprenez le HTML et le CSS pas à pas, avec des exercices pratiques pour débutants.">

Explication :

name="description" : indique quel type d’information cette balise <meta> transporte (ici, une description).
content="..." : le texte lui-même, celui qui sera affiché dans les résultats de recherche.

Longueur recommandée : entre 150 et 160 caractères environ. Au-delà, Google coupe le texte avec des points de suspension dans les résultats de recherche — votre message risque d’être tronqué avant la fin.

3. Rappel : le `<title>`

Déjà vu au chapitre 30, un rapide rappel puisqu’il est directement lié aux deux balises qu’on vient de voir : le <title> définit le texte affiché dans l’onglet du navigateur (juste à côté du favicon), et c’est aussi le texte affiché en gros et cliquable dans les résultats Google — donc tout aussi important que la meta description pour donner envie de cliquer.

Le squelette à suivre

Avant de vous lancer dans l’exercice, voici la structure exacte du <head> à suivre, avec les balises vides à remplir vous-même :

<head>
  <meta charset="UTF-8">
  <title></title>

  <meta name="" content="">

  <link rel="" type="" href="">
</head>

Comment lire ce squelette :

<meta charset> : déjà rempli, c’est un prérequis du chapitre 30, on n’y touche pas.
<title> : à remplir avec le titre de la page.
La 2e <meta> : c’est la meta description — à vous de compléter name="" et content="".
<link> : c’est le favicon — à vous de compléter rel="", type="" et href="".

Exercice

On reprend l’arborescence moncours.fr du chapitre 720 :

moncours.fr/
├── index.html
├── style.css
└── images/
    ├── logo.png
    └── favicon.png

Dans le <head> du fichier index.html, complétez :

Un <title> avec le texte « Mon Cours ».
Une meta description d’environ 150 caractères, décrivant le site.
Un favicon pointant vers favicon.png, situé dans le dossier images — utilisez le bon chemin relatif d’après l’arborescence ci-dessus.

Comment répondre : écrivez le code HTML complet du <head> (comme dans le squelette ci-dessus, mais rempli).

Résultat attendu : si vous testez votre code en ouvrant index.html dans un navigateur (comme au chapitre 35), vous devez voir apparaître votre favicon dans l’onglet, à gauche du titre « Mon Cours ». Si rien ne s’affiche, revérifiez le chemin du fichier et l’orthographe exacte de favicon.png.