Ajouter une icone de barre d'adresse sur un site web🔗
Introduction
Quand vous naviguez sur certains sites web, votre navigateur affiche une icône sur la barre d'adresse. Cette icône est celle de votre site web et elle peut être utilisée par votre navigateur pour identifier plus facilement votre site Web. D'après Wikipédia, cette manière de procéder n'est pas standardisée même s'il existe une page du W3C sur le sujet… et en plus de ça, on doit ça à nos amis de chez µ$oft (avec IE4)!
Qu'importe l'origine, pourvu que ça fonctionne. Le principe est d'utiliser un fichier image et de le rendre disponible.
Spécifications pour l'image favicon:
Voici les spécifications retenues par le W3C pour l'image:
- Taille 16x16 ou 32x32
- Couleurs: en 8bits ou 24bits
- Formats: PNG, GIF ou ICO.
Accès à l'image:
Pour l'accès à l'image, il existe 2 méthodes:
- Celle toute crade qui consiste à mettre dans la racine du site web le fichier image nommé
favicon.ico. - Ou bien faire du HTML/XHTML valide en spécifiant quel fichier utiliser pour l'image. Cette méthode que nous allons étudier permet d'affecter une image de site suivant les pages sur lesquelles on circule.
Pour être dans les clous du W3C, il faut spécifier que nous allons utiliser une image (ici, nous avons le choix du nom):
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en-US"> <head profile="http://www.w3.org/2005/10/profile"> <link rel="icon" type="image/png" href="http://monsiteweb.org/monicone.png">
Le lien de type rel ne dispose pas d'attributs W3C propres, on peut donc lui en affecter sous réserve de lui faire un profil d'attribut. La ligne est un lien vers la description de ce profil. À noter que ce profil est proposé par le W3C mais ne constitue pas un standard.
Voilà, mes 2 cents (de $ et pas d'€)…