La balise link rel="icon" expliquée
La balise <link rel="icon"> dans le <head> d'une page indique au navigateur quel fichier utiliser comme favicon. href pointe vers l'image, type donne son type MIME, et sizes liste les dimensions en pixels que le fichier contient pour que le navigateur puisse choisir la meilleure correspondance. Vous pouvez inclure plusieurs balises link d'icône (une par taille ou format), et le navigateur choisit la plus adaptée.
Les quatre choses que porte la balise
rel="icon" déclare la relation : ce fichier est une icône pour le document. href est le chemin vers l'image. type est le type MIME (image/x-icon, image/png, image/svg+xml), qui permet à un navigateur d'ignorer un format qu'il ne peut pas utiliser. sizes liste les dimensions que contient le fichier, comme "32x32", ou "any" pour un SVG redimensionnable.
Le navigateur lit chaque lien d'icône dans l'en-tête, puis choisit celui qui convient le mieux à la surface qu'il dessine : l'onglet, un favori, une tuile plus grande. C'est pourquoi un en-tête réel porte plusieurs de ces balises plutôt qu'une seule, et pourquoi elles ont toutes leur place dans l'en-tête, avant le corps.
Un ensemble moderne de liens d'icône
<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/svg+xml" href="/icon.svg" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />Cinq balises, chacune visant un consommateur différent. Le navigateur ignore celles qu'il ne comprend pas et choisit la meilleure des autres.
Ce que fait chaque attribut
| Attribut | Rôle |
|---|---|
| rel | La relation : "icon" pour un favicon, "apple-touch-icon" pour iOS |
| href | Le chemin vers le fichier image |
| type | Le type MIME, pour qu'un navigateur puisse ignorer les formats qu'il ne peut pas afficher |
| sizes | Les dimensions que contient le fichier, par exemple "32x32", ou "any" pour un SVG |
FAQ sur rel="icon"
Ai-je besoin de l'attribut type sur un lien d'icône ?
Il est facultatif mais utile. type permet au navigateur d'ignorer un format qu'il ne peut pas utiliser sans le télécharger d'abord. À inclure sur les liens PNG et SVG, et sans conséquence ailleurs.
Puis-je avoir plus d'une balise link d'icône ?
Oui, et vous le devriez généralement. Déclarer plusieurs tailles et formats permet à chaque surface de choisir la correspondance la plus proche au lieu de réduire une grande image pour l'onglet et de l'agrandir pour l'écran d'accueil.
Où va la balise link ?
Dans le <head> du document. Le navigateur demande le favicon pendant qu'il analyse l'en-tête, donc une balise placée dans le corps arrive trop tard pour être utilisée au premier chargement.