04 avril 2008
Favicon : insérer un logo dans l'adresse URL de votre blog
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 gros C orange pas beau de canalblog... pour le personnaliser et mettre votre propre logo.
Un petit bémol avant de continuer : cette manip fonctionne sous mozilla mais pas sous IE (Internet Explorer) parce que Canalblog ne prend pas le ".ico" et que du coup IE ne le reconnait pas. Donc, vive mozilla lol
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) changez son extension .ico pour l'extension .jpg OU .png
4. Chargez-la ensuite sur votre blog dans un message. Une fois chargée avec un clic droit choisissez "code source de la selection". Vous aurez un code comme celui ci :
<a href="http://storage.canalblog.com/56/97/249516/24175599.jpg" target="_blank"><img alt="favicon" src="http://storage.canalblog.com/56/97/249516/24175599_p.jpg" border="0" height="32" width="32"></a>
Vous aurez un code comme celui ci :
C'est cette adresse (en rose) dont vous allez avoir besoin ensuite. (inutile d'enregistrer le billet où vous avez chargé l'icône)
5. À partir d'ici, il vous faut absolument être en mode avancé pour continuer... Vous êtes toujours là? Donc, cliquez sur Apparence, puis Éditer les fichiers de ce modèle. Ensuite, pour chacune des pages accessibles dans le menu déroulant (Page d'accueil, Archives, Index des archives, Page d'un message et Profil d'un auteur), SAUF la page Feuille de style générale, entre les balises <head> ET </head>, et juste avant la ligne :
<link rel="stylesheet" href="%3C$BlogCSSURL$%3E" type="text/css" /></p>,
Insérez la ligne suivante:
<link href="url vers l'icone.png" type="image/png" rel="icon" />
Dans cette ligne, remplacez "url vers l'icône.png" par l'adresse de votre image, celle que vous avez copiée à l'étape 4 précédente. C'est l'adresse du chemin qui mène à votre image.
Comme j'ai mis une extension .jpg, mon code est le suivant
<link href="http://storage.canalblog.com/56/97/249516/24175599.jpg" type="image/jpg" rel="icon" />
7. 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.
Commentaires
Yes !! Ca marche !!
Poster un commentaire
Rétroliens
URL pour faire un rétrolien vers ce message :
http://www.canalblog.com/cf/fe/tb/?bid=446950&pid=8610014
Liens vers des weblogs qui référencent ce message :