3. Découvrir le favicon

Maintenant que nous savons bien comment utiliser les images, il est temps d’ajouter une icône à notre page. Pour l’instant, c’est l’icône par défaut qui s’affiche, et elle ressemble à un globe terrestre gris :

Pour ça, c’est assez simple. Nous allons utiliser la balise “link”.

INFO : Comme la balise “meta” pour l’encodage, la balise “link” n’est pas vraiment faite pour les icônes, mais elle permet d’en faire.

De même que la balise “a” pour les liens, la balise “link” a un attribut “href” qui permet de définir l’adresse de l’image, car après tout, l’icône n’est qu’une image réduite 🤔. Tout comme pour une image, on peut donner une adresse de fichier sur l’ordinateur avec le chemin relatif, ou tout simplement copier-coller l’URL d’une image sur Internet. Cependant, comme je vous l’ai dit, la balise link peut avoir d’autres rôles que favicon. Il faut donc définir ce rôle avec un 2ème attribut, nommé “rel”, qui permet de définir la “relation” entre notre fichier HTML et le fichier de l’image. Ici, il s’agit d’une icône, la valeur de “rel” sera donc “icon”.

Je vais donc prendre cette image toute simple de Pokeball, ne nous compliquons pas la vie pour l’instant. Vous pouvez la télécharger en accédant au lien ci-dessus, et comme d’habitude, on la place dans le dossier “assets”. Il n’y a plus qu’à créer la balise link. Les 2 attributs sont séparés par un espace :

<link rel="icon" href="assets/logo.png">

On a maintenant notre belle icône de Pokéball dans notre onglet 🤩:

On en a enfin fini avec les images et tout ce qui tourne autour.

Dans la prochaine étape, on verra comment utiliser l’audio, c’est-à-dire comment jouer des sons sur notre site ! Je vous promets que cette fois-ci, il n’y aura pas de nouvelles notions complexes, normalement…