Ajouter une icône dans la barre d’adresse de son site internet

Bon alors d’abord un petit point de vocabulaire, ça s’appelle une favicon. C’est la petite icône qui s’affiche sur certains site dans la barre d’adresse du navigateur juste avant l’adresse du site. C’est aussi l’icone qui apparait quand le site est ajouté aux favoris d’Internet Explorer ou aux Marques-pages de Firefox.

Comment ça marche?

D’abord il faut créer l’image. Le plus simple est de prendre une image, puis de se rendre sur un site qui va créer pour vous une fichier favicon.ico à la taille et au format nécessaire. Pour ce blog j’ai utilisé celui-ci mais il en existe bien d’autres : http://www.favicon.co.uk/

 

Si Photoshop est votre ami vous pouvez créer un fichier au format png avec une taille conseillée de 16 X 16 pixels. Sachez cependant que ce format ne pourra être lu que par les navigateurs les plus récents : IE7 et Firefox je ne sais pas combien. Le .ico lui sera lisible par Internet Explorer 6 et Firefox je ne sais toujours pas combien.

Une fois qu’on a le fichier il faut l’uploader sur le site qui héberge le serveur il sera donc accessible avec une adresse du genre : http://www.monsite.com/favicon.ico

Dernière étape, éditer la page à laquelle on veut associer l’icône et entre les balises

<HEAD> et </HEAD> ajouter la ligne suivante :

<LINK REL= »SHORTCUT ICON » href= »http://www.monsite.com/favicon.ico »>

Si vous voulez que l’icône sois présente sur toutes les pages vous devez éditer toutes les pages, ou faire des frames enfin c’est votre site débrouillez vous moi je n’y connais rien en HTML.

Et sous WordPress ?

Sous WordPress c’est dans le fichier header.php du thème que vous utilisez qu’il faut ajouter la ligne. Vous pouvez aussi utiliser un plugin disponible ici :
http://wordpress.org/extend/plugins/all-in-one-favicon/installation/

Ce contenu a été publié dans Internet. Vous pouvez le mettre en favoris avec ce permalien.

Une réponse à Ajouter une icône dans la barre d’adresse de son site internet

  1. Fran dit :

    merci pour les explications et surtout le lien pour wordpress.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>