Blogger / blogspot : Insérer un favicon

Jeudi 26 mars 2009 4 26 /03 /2009 19:30

Blogger / blogspot : 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 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.

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

Par Lavande - Publié dans : Blogger - Ecrire un commentaire - Voir les 19 commentaires

Précédent : Créer un index Retour à l'accueil Suivant : Fonction opacité

Blogger / blogspot : Insérer un favicon

Je le fais pour vous !

Coup de pouce pour

Je sais aussi cuisiner...

Installez le logo!

Recherche

Articles récents

Ils ont donné!

Comptons !

Syndication