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é

Commentaires

Bon j'ai m&eacirc;me pas lu ! C'est pas pour moi non seulement je suis chez canalblog mais en plus je suis sous IE !!!

Commentaire n°1 posté par MIMOUNETTE le 17/06/2008 à 16h01

Flûte, je fonctionne avec IE aussi... Adieu favicon... Merci quand m&eacirc;me pour le truc!

Commentaire n°2 posté par Florence le 17/06/2008 à 18h35

rrrrrrrrrrr.... Merci ! Mais pourquoi j'y arrive pas ???

Commentaire n°3 posté par sylvette le 18/07/2008 à 21h29

bonjour !

Je suis sous firefox, je ne désesp&eagrave;re pas de réussir à changer le b de blogger.
Je viens de parcourir vite fait ton blog que j'ai découvert il y a seulement quelques jours... et donc je ne comprends pas vraiment les histoires de soutiens, dons... Je vais essayer de voir ça de plus pr&eagrave;s !

Commentaire n°4 posté par sylvette le 24/07/2008 à 11h42

Une vraie mine d'informations ce blog, doublée d'une belle initiative solidaire. :-)
Beaucoup d'entre vous le savent sans doute : pour un site donné, on n'a pas la même apparence selon que l'on se connecte avec Internet Explorer ou Firefox (ou d'autres navigateurs paraît-il).

Pour ma part, en temps normal, j'utilise IE.
Le hic, c'est que j'ai voulu insérer ma petite icône personnalisée pour mon espace perso. Pour réaliser cette petite astuce, j'ai dû télécharger Firefox car, c'est vrai, le code d'intégration du favicon est sans effet sous IE.
Résultat, avec Firefox, le favicon s'affiche bien, pas de souci !
Par contre, question affichage d'ensemble de mon blog c'est l'horreur : certains titres de rubriques apparaissent bizarrement en italique alors que sous IE, il n'y a rien de tel ! De plus, je trouve la police de caractères beaucoup moins lisse.

Je me suis sentie tellement dépitée que j'ai fini par supprimer Firefox pour revenir à IE.
Mon blog est redevenu joli. Enfin... A mon goût, quoi ! ;-)
Hélas, le favicon ne s'affiche plus (ce qui est d'ailleurs curieux dans la mesure où malgré mon navigateur ordinaire, je vois bien les favicons des autres pages Web. Incompréhension totale... )
Est-ce-que, par hasard, quelqu'un saurait-il pourquoi ?

Et puis, ce qui me gêne le plus, c'est que, bien consciente que tout le monde n'utilise pas le même navigateur, les internautes ne voient pas la même chose.
Existe-t-il une solution miracle pour régler le problème ? L'idéal serait d'obtenir un affichage fidèle quel que soit le navigateur.
Remarquez, il est possible que mon modèle soit truffé d'erreurs et que IE ait validé des codes "approximatifs"... Et il faudrait alors faire des corrections...Mais lesquelles ?

Quelle galère ! Je ne sais vraiment pas quoi faire...
L'ampleur de la tache est plutôt décourageante.

Commentaire n°5 posté par Chlore le 10/03/2009 à 18h09

Alors c'est plutôt rare d'avoir des pb sur FF et d'être bien sous IE. IE ne respecte pas les normes de rédactions et il est courant que les scripts ne fonctionnent pas, même si ils travaillent à rejoindre la norme.
Pour ton favicon c'est arrivé brutalement ?

Rendre compatible un script avec les différents navigateurs est le boulot d'un webmaster. Tu ne peux pas avoir un blog public et te fiche de ce que certains visiteurs vont voir ou pas.
Soit tu restes sur un format standard de blog soit si tu veux t'aventurer dans les méandres des scripts c'est à toi de bosser sur ces configurations.
Peut être as tu un copaine bien sous tout rapport quie voudra te rendre ce service ? Je ne peux pas t'aider sur blogger je ne pige rien à cette plateforme. Désolée.

PS j'ai été voir ton blog, je suis sous FF et je le trouve plutôt très joli ;-)

Réponse de Lavande le 12/03/2009 à 15h36

Merci pour ta réponse, Lavande.
Juste un petit correctif : je ne me fiche pas de ce que les visiteurs voient de mon blog selon le navigateur qu'ils utilisent. C'est tout le contraire, puisqu'il s'agit du coeur de mon problème ! :-)
Pardonne-moi mais je ne saisis pas bien ton propos relatif à la fonction de Webmaster en rapport avec mon souci ou sur le point de "s'aventurer dans les méandres du script" (il faut croire que je suis bien novice en la matière et que tout cela s'apparente à du chinois !) car il me semble que chacun se débrouille plus ou moins seul avec son modèle de blog pour le personnaliser à loisir en modifiant les codes CSS ou javascript, non ? En outre, tu m'expliques que tu ne comprends pas tout de la plateforme Blogger mais je croyais (très naïvement) que, quelque soit l'hébergeur d'un blog, les standards étaient les mêmes...
Cela dit, tu utilises FF et tu trouves mon blog joli (je te remercie chalheureusement pour le compliment, Lavande, ça me touche !) mais, vois-tu, lorsque j'ai "écrasé" IE pour télécharger FF (je rappelle que mon but était d'insérer un favicon), tous les caractères de la colonne de droite de mon blog sont apparus en italique sous FF. Et j'ignore pourquoi (est-ce que tu as remarqué la même chose ? Si non, il y avait peut-être, chez moi, un conflit de navigateurs...).
Enfin, tu me poses la question de savoir si mon favicon a disparu brutalement. Oui, comme je l'ai mentionné dans mon premier message, juste après avoir désinstallé FF pour revenir à IE (je me demande si je m'exprime clairement). Par contre, je suis sous IE (le navigateur que j'utilise d'ordinaire) et mon favicon ne s'affiche plus. Curieusement, je vois celui des autres blogs... Celui de blogtuto par exemple. ;-)
Ainsi, je te renouvelle plus précisément mes demandes :
1- Est-ce que toi tu vois mon favicon sous FF ?
2- Est-ce que tu constates que ma colonne de droite s'affiche en italique ?
3- Je souhaite opter définitivement pour FF. Faut-il que je désinstalle IE au préalable ?

(J'ai conscience que je deviens super pénible, désolée !!!)

Merci d'avance pour ta patience.

Commentaire n°6 posté par Chlore le 12/03/2009 à 17h52

bonjour,
le script ne marche pas.
tu as surement oublié de préciser qu'il faut rajouter une ligne de commande, qui desactive la balise de blogger qui envoie vers
c'est une balise cachée impossible à enlever.
j'ai regardé les codes sources de ta page, tu as ajouté des balises, dont des balises de flux RSS,

et c'est quoi ça

//

alors!! laquelle fait sauté le lien caché de l'icone blogger?

ce serai sympa de répondre

@+

http://olivier.dolugar.9online.fr/
http://mr-do-just-for-fun.blogspot.com/

Commentaire n°7 posté par mrdo le 25/03/2009 à 19h08

désolé j'avais copié des partie du code source de ta page, mais ça n'apparait pas.

mais ma question reste la même

@+

http://olivier.dolugar.9online.fr/
http://mr-do-just-for-fun.blogspot.com/

Commentaire n°8 posté par mrdo le 25/03/2009 à 19h11

Une bloggeuse cette semaine à fait ces recherches pour vous. Voici ce qu'elle dit :

Alors c'est tout bon. Au fait, j'ai trouvé sur ce blog :http://blogger-au-bout-du-doigt.blogspot.com/2008/04/une-favicon-pour-votre-blog.html

Il dit que depuis quelque temps ce n'est plus possible de le faire. Mais avec son tuto j'ai réussi en plaçant cela

<link href='http://storage.canalblog.com/15/14/249516/37374341.ico' rel='shortcut icon'/>

au dessus de

<title><data:blog.pageTitle/></title> :
Par contre ça ne fonctionne pas sous IE. J'ai très peu de temps en ce moment et ne epux faire de recherches. par contre si comme Coralie, vous avez des tuyaux, n'éhistez pas à revenir nous en faire profiter, ça rendra service à tout le monde ;-)

Réponse de Lavande le 25/03/2009 à 19h27

merci,
trop rapide la réponse je vais tester, rechercher,
je vous tiens au courant

@+

http://olivier.dolugar.9online.fr
http://mr-do-just-for-fun.blogspot.com

Commentaire n°9 posté par mrdo le 25/03/2009 à 20h15

merci, merci

donne moi le nom de cette blogueuse que je l'embrasse.

le scripte marche sur firefox et sur IE en copiant exactement le même script avant la balise Head, comme sue le tuto précedant.
il me reste un problème à résoudre.
pour mon site pas de problème, ça fait déja un moment que j'avais fait la manip en mettant l'icone à la racine de mon site, mais pour blogger, il refuse de télécharger du format ICO. (car pour que cela fonctionne sous IE, il faut impérativement du ICO)
donc j'ai trouvé un hébergeur temporaire, (PICDO), mais il m'annonce un hebergement jusqu'au mois d'Avril.
si vous avez des sites gratuit qui hebergent du format ICO, je suis preneur.

encore merci, j'espère que l'on va voir fleurir des icones sur les blog

passez voir mon site et mon blog,
histoir de valider que ça marche.

@+

http://olivier.dolugar.9online.fr/

http://mr-do-just-for-fun.blogspot.com/

encore merci

Commentaire n°10 posté par mrdo le 25/03/2009 à 21h57

Alors ce que j'ai fait pour Coralie, c'est que je lui ai généré le .ico par canalblog qui lui le prend. Si tu veux tu peux m'envoyer ton image j'en ferai autant. En échange, peut-être peux tu rédiger un nouveau tuto avec les modif afin que je corrige ce tuto ?

Réponse de Lavande le 26/03/2009 à 07h23

bonjour,
je suis effectivement intéressé par votre offre d'hébergement pour mon icône.
dites moi comment procéder.

pour le tuto, je viens de le mettre sur mon blog, ci cela vous convient, aucun problème pour le poster sur ce site, au contraire.
Un copier coller ne me dérange pas, ou vous prenez ce qui vous intéresse, ou un lien, c'est comme vous voulez.

je me suis permis de vous citer, ainsi que Coralie, et j'ai mis le logo de blogtuto dans les liens.

merci encore, tenez moi au courant

@+

Commentaire n°11 posté par mrdo le 26/03/2009 à 17h51

une petite mise en page s'impose pour ce tuto, mais .....
Viva ce site
envoyez vos commentaires.
j'espère que ça fera des heureux.

Commentaire n°12 posté par mrdo le 26/03/2009 à 20h40

bravo à tous
super site
une petite mise en page du tuto ....
j'espère que ça aidera du monde

@+

Commentaire n°13 posté par mrdo le 26/03/2009 à 21h25

Merci vraiment!!

Commentaire n°14 posté par Pasco le 29/03/2009 à 08h15

bonjour Nathalie,

dans blogger je ne trouve pas l'onglet personnaliser ????
peux tu m'aider s'il te plait ???
merci

virginie

Commentaire n°15 posté par virginie le 06/05/2009 à 13h06

salut tout le monde

avant title ca marche nikel

Commentaire n°16 posté par youssef le 10/02/2010 à 15h41

****

sans ** bien sur

Commentaire n°17 posté par youssef le 10/02/2010 à 15h43

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

Commentaire n°18 posté par Cottich le 24/04/2010 à 22h49

Merci beaucoup pour ce tuto :)
ça a fonctionné parfaitement !

Commentaire n°19 posté par MlleCuisine le 19/07/2010 à 16h21