Blogger / blogspot : Insérer un favicon

Publié le par Lavande

 

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!!!.

Image_3

 

Vous pouvez échanger le gros B orange pas beau de Blogger... pour le personnaliser et mettre votre propre logo.


Ce tuto a été mis à jour grâce au concours de Mr Do et de Coralie. Merci à eux.
Cela me permet de souligner que contribuer à blogtuto ce n'est pas seulment faire un don, c'est aussi faire profiter tout le monde de ses trouvailles !


Voici donc un petit tuto pour installer un logo devant sa barre adresse



Marche sous Internet Explorer et sous Firefox, uniquement si l'image est au format .ICO

pour les autres formats, JPG, PNG, GIF ..... cela ne marchera pas sous Internet Explorer

1ère étape

il vous faut d'abord choisir un logo.
soit un déjà tout fait, qui vous plait, soit vous en créez un.
Il vous faudra avoir un logo de 16 x 16 pixels ou 32 x 32 maximum.

Pour la faire sous Windows, vous pouvez utiliser le logiciel Paint.
sinon, sur le site HTML Kit, à la page FavIcon from PICS, suivez la procédure pour créer votre icône à partir d'une image sur votre disque dur. Vous pourrez alors télécharger un dossier contenant un icône 16x16, un 32x32, et un icône animé.

Attention !! plusieurs tutos vous proposent de renommer au format .png ou autre.

c'est sans doute parce qu'une image au format .ICO ne peut pas être directement transférée sur les blogs. Ils n'acceptent pas le transfert de ce type de fichier.
il faut donc passer par un hébergeur d'image gratuit sur le web, et qui accepte le format .ICO.
Pas si évident à dégotter, mais on doit trouver.
je suis actuellement sur http://www.picdo.net/, mais c'est un hébergement provisoire.

l'intégration pour votre site

copiez votre icône à la racine de votre site.
C'est à dire là ou est votre index.html, pas dans un dossier.

ensuite vous éditez votre index.html et vous copiez ce script
 *<link rel="shortcut icon" href="favicon.ico">* sans les* 
sous la 1ère balise * <head> *

ce qui donne ceci:
 * <html> *

* <
head> *

* <
link rel="shortcut icon" href="favicon.ico"> *
Favicon.ico étant le non que vous avez donné à votre icône.

l'intégration pour Blogger

la difficulté pour Blogger, c'est qu'i refuse les .ICO, d'ou l'hébergement de l'icône sur un site.
il faut donc connaitre l'adresse de votre icône sue cet Hébergeur, pour mo i:

http://www.picdo.net/Fichiers/--------------------------/favicon.ico

ensuite allez sur votre blog, identifiez vous pour vous connecter.
allez dans "Personnaliser".









allez ensuite sur "mise en page" , puis "modifier le code HTML"
insérer le script: (sans les* * et pensez à changer l'adresse de votre image)
*http://www.picdo.net/Fichiers/---------------------/favicon.ico' REL='SHORTCUT ICON'/>*

avant la balise
 * <head> *
et avant
 * < title > titre de votre blog < / title >
ce qui donne ceci:


 










Il ne reste qu'à enregistrer et ouvrir le blog pour voir apparaitre le logo dans la barre adresse.


Image_4

7. Maintenant Valider et chargez la page de votre site pour voir si l'icône apparaît dans la barre d'adresse.

Publié dans Blogger

Pour être informé des derniers articles, inscrivez vous :
Commenter cet article
M
<br /> Merci beaucoup pour ce tuto :)<br /> ça a fonctionné parfaitement !<br /> <br /> <br />
Répondre
C
<br /> Salut et merci, mais cela fait dix fois que je le refais, mais cela n'a fonctionné qu'une seul fois et cela a disparu, j'ai recommencé mais cela n'est pas revenu, hhahahahaa blogger !!<br /> <br /> <br />
Répondre
Y
<br /> ****<br /> <br /> sans ** bien sur<br /> <br /> <br />
Répondre
Y
<br /> salut tout le monde<br /> <br /> <br /> <br /> avant title ca marche nikel<br /> <br /> <br />
Répondre
V
bonjour Nathalie, <br /> <br /> dans blogger je ne trouve pas l'onglet personnaliser ????<br /> peux tu m'aider s'il te plait ???<br /> merci <br /> <br /> virginie
Répondre