Insérer un favicon

Peut-être avez-vous remarquez que certains sites ou blogs, comme ici sur BlogTuto, ont sur leur adresse dans la barre de navigation un petit logo à la place de celui de leur hébergeur, inutile certes, mais ô combien mimi!!!.
 

Vous pouvez échanger le logo de H&F... pour le personnaliser et mettre votre propre logo.

Cette manip est réservé au mode avancé.

1. Il vous faudra avoir une version miniature de votre logo de 16 x 16 pixels ou 32 x 32 pixels maximum. Pour la faire sous Windows, vous pouvez utiliser le logiciel Paint qui se trouve dans Démarrer - Tous les programmes - Accessoires pour diminuer la taille de votre image, en prenant soin de la sauvegarder sous un autre document pour ne pas perdre votre fichier original. Sinon, vous pouvez, utiliser des outils offerts en ligne et spécialement conçus pour créer ce genre d'icône. Photofiltre est une bonne alternative...

2. Rendez-vous sur le site HTML Kit, à la page FavIcon from PICS. Suivez la procédure pour générer votre icône. C'est-à-dire, parcourez votre disque dur pour sélectionner votre image, puis cliquez sur Generate FavIcon.ico. L'outil en ligne se chargera d'en créer une version "icône". Vous aurez le choix entre une icône fixe (normale) et une icône animée à télécharger sur votre ordinateur.

3. Une fois votre icône sauvegardée dans votre ordinateur, (pour canalblog) chargez-la sur votre blog dans un message en choisissant de charger un fichier en cliquant sur cette image

Une fois chargée cliquez sur 

et prenez l'adresse qui va se présenter comme ceci :

 http://blogtuto.hautetfort.com/media/02/01/1343671746.ico 

C'est cette adresse (en rose) dont vous allez avoir besoin ensuite. (inutile d'enregistrer le billet où vous avez chargé l'icône)

4. À partir d'ici, il vous faut absolument être en mode avancé pour continuer... Vous êtes toujours là? Donc, cliquez sur presentation, puis Configuration avancée. Sur le modèle de la page d'accueil, avant la balise </head> insérer cette ligne

<link rel="shortcut icon"http://votre adresse.ico" type="image/x-icon"/>
<link rel="icon" href="http://votre adresse.ico" type="image/x-icon"/>

5. Maintenant Valider pour chacune des insertions dans vos pages et chargez la page de votre site pour voir si l'icône apparaît dans la barre d'adresse.