Table des matières
Introduction
Pour améliorer la conception de votre site, vous pouvez ajouter des références à des icônes personnalisées dans vos balises méta. Ces icônes seront affichées dans certains contextes, notamment dans les favoris ou les signets des navigateurs. Le favicon est l’un des types d’icônes les plus couramment utilisés à cet effet.
Le favicon, une icône incontournable
Le favicon existe depuis de nombreuses années et il s’agit du premier type d’icône utilisé. Il s’agit d’une icône carrée de 16 pixels utilisée à plusieurs endroits. Selon le navigateur, vous pouvez voir le favicon dans l’onglet du navigateur contenant chaque page ou à côté des pages mises en favoris dans le panneau des signets.
Pour ajouter un favicon à votre page, vous devez :
- Enregistrer l’icône dans le même répertoire que la page d’index du site, au format .ico (la plupart des navigateurs prennent également en charge les favicon aux formats plus courants tels que .gif ou .png).
- Ajouter la ligne suivante dans la balise
<head>de votre HTML pour la référencer :
html
<link rel="icon" href="favicon.ico" type="image/x-icon" />
Voici un exemple de favicon dans un panneau de signets :
D’autres types d’icônes à considérer
De nos jours, il existe de nombreux autres types d’icônes à prendre en compte. Par exemple, vous trouverez ceci dans le code source de la page d’accueil de la documentation MDN Web :
html
<link rel="apple-touch-icon" sizes="144x144" href="https://developer.mozilla.org/static/img/favicon144.png" />
<link rel="apple-touch-icon" sizes="114x114" href="https://developer.mozilla.org/static/img/favicon114.png" />
<link rel="apple-touch-icon" sizes="72x72" href="https://developer.mozilla.org/static/img/favicon72.png" />
<link rel="apple-touch-icon" href="https://developer.mozilla.org/static/img/favicon57.png" />
<link rel="icon" href="https://developer.mozilla.org/static/img/favicon32.png" />
Ces icônes ont des utilisations spécifiques, comme fournir une icône haute résolution pour les écrans d’accueil des iPad.
Conclusion
Ne vous préoccupez pas trop de mettre en œuvre tous ces types d’icônes dès maintenant. Il s’agit d’une fonctionnalité assez avancée et vous n’êtes pas censé avoir connaissance de cela pour progresser dans le cours. L’objectif principal ici est de vous informer de l’existence de ces éléments au cas où vous les rencontreriez en parcourant le code source d’autres sites web.
Les balises méta, notamment le favicon, sont des éléments importants pour enrichir votre site et améliorer son expérience utilisateur. Assurez-vous de les prendre en compte lors de la conception de votre site afin d’optimiser son apparence et sa convivialité.