Chagement en cours ...

Favicon, la meilleur methode pour creer une Favicon personnelle dans Blogger

La Favicon est la petite icône qui apparaît à gauche de l'adresse d'un site dans la barre d'adresse du navigateur. Par défaut, la favicon c'est le B de Blogger.

favicon Bloggerfavicon Blogger
Je vous présente ici, le moyen le plus rapide, le plus facile et le plus sûr pour créer une favicon personnelle pour votre blog Blogger.

Avec cette méthode vous pouvez utiliser n'importe quel type d'image : *.jpg, *.PNG, *.gif, *.ico ... Mais Internet Explorer n'accepte que le format *.ico comme Favicon. Vous pouvez créer une image *.ico à partir de tout autre format, ici.  Allez dans Mise en page, Modifier le code HTML, cochez la case "Développer des modèles de gadgets" et recherchez (Ctrl + F) le code suivant:
Connectez vous à Blogger, Allez dans "Mise en page", "Modifier le code HTML", cochez la case "Développer des modèles de gadgets", et recherchez (Ctrl + F) le code suivant: </head> et juste avant ajouter le code suivant :
<link href="http://L'URL_DE_VOTRE_IMAGE_ICI" rel="shortcut icon" type="image/vnd.microsoft.icon"></link>
Remplacez le code en rouge par l'URL de votre image et c'est fini. Votre blog à une Favicon personnelle.

Pour obtenir l'URL de votre image qui va être affichée comme favicon, il faut l'héberger (uploader) dans un site comme MyDataNest.
favicon Blogger
Partager cet article Les nouveautés
Gogle Buzz Facebook Delicious FeedBurner email Google Reader Netvibes

71 Commentaires

incognito a dit…

=)) le machin "&alt;/head>" c'est < /head > :))

The Perfect a dit…
Ce message a été supprimé par l'auteur.
zoboob a dit…

Merci, nickel mais dans IE il y a le e :-/

Yumeless a dit…

Je n'ai pas de < \head> pour ma part, mais un < head> oui. Du coup, avant ou après < head>?

Yumeless a dit…

Oups, j'ai rien dit ^^

Yumeless a dit…

Mais ça ne marche pas quand même...

Soufiane LeBlogger a dit…

@ Yumeless ;)
Je viens de jeter un coup d'œil sur ton site et il y a une favicon, tout baigne :? tu confirmes :?

Yumeless a dit…

Non xD je vois rien moi...
Argh ça me stress, pourquoi rien ne s'affiche jamais chez moi...?

Soufiane LeBlogger a dit…

@ Yumeless
c'est bien pour ton site http://www.yaoi-ouji.fr/ :?

Il y a un "y" et le symbole de la femme ou de l'homme, je sais plus :o

Yumeless a dit…

Oui c'est bien ça tout à fait.
Et c'est celui de l'homme. lol

C'est bon j'ai résolu mon problème. Mais j'ai quand même un peu galèré pour trouver un hebergeur d'image qui accecpte les .ico
Si tu en connais un qui garde l'imae plus d'un mois je suis preneuse.
(dans le lien que tu as donné il tranforme en .ico, nous donne un code tout pourri qui marche pas (enfin pas chez moi xD), mais pas d'url. Enfin, je l'ai pas trouvé...)

The Perfect a dit…

Merci... ça marche !!
:D

Soufiane LeBlogger a dit…

@ Yumeless
J'ai mis le site où tu peux "Uploader" l'image *.ico c'est celui que j'utilise.
pour les autres type d'image PHOTOBUCKET est le meilleur.
Pour le premier site il sert qu'a créer une image au format .ico et c'est tout. code :? url :?

Soufiane LeBlogger a dit…

@ The Perfect
c'est bien :)) :)) :))

Yumeless a dit…

Dans le site qui te donne ton .ico il te donne un code (qui ressemble au tien) à mettre avant < /head>.
Ok, je vais utiliser hotlinkfiles, merci.
++

Soufiane LeBlogger a dit…

@ Yumeless
Peut être, mais je ne sais pas si le code marche avec un blog blogger. de toute façon il faut uploader l'image. j'ai juste oublié de préciser que les autres sites de stockage n'acceptaient pas les *.ico :)

Alors comme ça tu es une fille :?

Yumeless a dit…

Mdr oui je suis une fille, mais c'est pas nouveau tu sais xD

Soufiane LeBlogger a dit…

@ Yumeless
je pouvais pas deviner non plus :))

yaelle a dit…

Bonsoir

j'aimerais bien moi aussi avoir un favicon mais je suis allée sur favicon et après je me suis perdue??? oups!!! je n'y comprends rien.
Désolée est que vous pourriez m'aider???. Merci vous avez d'excellentes idées mais après cela donne envie de les mettre en pratique.. Or là je ne sais plus.... encore merci....

Soufiane LeBlogger a dit…

@ Yaelle
tu as une image sur ton ordi que tu veux utiliser comme favicon. n'importe quel type d'image et n'importe quelle taille, ok.

il faut héberger (uploader) cette image dans un site comme celui que je propose http://www.hotlinkfiles.com/upload
Une fois que tu l'auras hébergé, le site te donnera un lien vers cette image du genre http://www......jpg
C'est ce lien qu'il faut ajouter au code que tu vas copier/coller dans ton Template.

Internet explorer n'acceptes que les images dont le format est *.ico, donc si tu veux que ton image apparaissent dans internet explorer il faut la convertir grâce au premier lien que j'ai donné.
Tu vas dans http://htmlkit.com/services/favicon/ il y a un bouton "parcourir", tu cliques dessus et tu sélectionnes l'image que tu veux utiliser. tu cliques sur "generate Favicon.ico" dans la page qui s'ouvre il y a "Download FavIcon Package" tu cliques dessus et tu télécharges le fichier qui contient ton image au format *.ico
Ensuite il faut héberger....

J'espère que j'ai été assez claire,
Et dit moi ce que ça donne. :D

yaelle a dit…

Re coucou
bon pour ce soir j'abandonne je suis allée sur
hotlinkfiles upload il me donne une url et j'en fais quoi après.. je ne suis pas blonde... juste débutante.... je crois que je n'ai pas tout capté??? Oh secours!! je me noie.... une
explication de +++ s v p... mille excuses....=((

Soufiane LeBlogger a dit…

@ Yaelle
Bon tu as eu l'url,
logger, Allez dans "Mise en page", "Modifier le code HTML", cochez la case "Développer des modèles de gadgets", et recherchez (Ctrl + F) le code suivant: </head> et tu ajoute ceci :

<link href="L'URL_DE_VOTRE_IMAGE_ICI" rel="shortcut icon" type="image/vnd.microsoft.icon"></link>

yaelle a dit…

Bonjour,
Merci j'ai déjà fait tout cela également le link à la fin il me le refuse je parle de google je l'ai mis juste avant head mais il accepte bien link href.... mais point de favicon... Peut-être est-ce que je fais encore des bêtises. Si tu as unr nouvelle petite idée... snif trop triste de pas réussir....:p

yaelle a dit…

Bon je reviens encore car je suis tenace.... voilà ce que me répond goo votre modèle ne peut-être analysé car sa structure... message d'erreur XML : open quote is expected for attribute "{1]" associated with an element type "href". Ze n'y comprends +++ rien... :(

yaelle a dit…

Me revoilou... free direct hotlink Files il donne deux codes le 1er {http//www......{ima}
et http/....gif{/ima]{/url} j'ai essayé d'abord 1 puis les deux
et voilà ce que répond bloggger xml: element type "link" must be followed by either attribute specificationsJ'ai la tête comme "zébulon" please une petite aide... je n'y comprends rien.:p

Soufiane LeBlogger a dit…

@ Yaelle
Une url est de cette forme:
http://www.hotlinkfiles.com/files/2616791_5crya/LeBlogger.gif
Tout ce qui est devant ou à la fin, ne sert à rien et il faut l'enlever (dans hotlinkfiles il y a un bouton "Just the direct URLs" pour avoir l'URL uniquement).
Il faut ajouter ce lien après le href=" et ajouter le tout avant </head> dans blogger

si tu n'y arrives pas, envoie moi ton image et je te donnerais le code a copier/coller directement dans le Template :)

Soufiane LeBlogger a dit…

@ Yaelle
Voilà copie ce code dans ton Template avant </head> et non <head>

<link href="http://www.hotlinkfiles.com/files/2678392_h7e81/animated_favicon1_021109.gif" rel="shortcut icon" type="image/vnd.microsoft.icon"></link>

Soufiane LeBlogger a dit…

@ Yaelle
je viens de voir ton blog, et tu as bien une facivon, donc tout baigne :)
comme c'est une image au format *.gif elle ne s'affichera pas dans internet explorer.

yaelle a dit…

Bonsoir,
je ne comprends rien ce que j'aimerais grâce à ton aide géniale c'est que le *gros B* de blogger disparaisse de notre vue et que j'ai une jolie petite toute petite image... comment dois-je faire alors??? je te remercie pour ton aide si précieuse... trop triste de voir ce BBB de blogger.... help me please!!!!:p

Soufiane LeBlogger a dit…

@ Yaelle
Envoie moi l'image que tu veux utiliser comme favicon à mon email leblogger{at}leblogger.com
et je ferais le reste, ça ira beaucoup plus vite .......

yaelle a dit…

Bonjour
YOUPI j'ai enfin élucider le problème et toute seule je suis assez fière... mais merci pour ton CODE... tes idées sOnt lumineuses. BRAVO....=)):)):-/

Soufiane LeBlogger a dit…

@ Yaelle
Très cool, je vois que tu utilises enfin une image .ico Bravo :))

Marthe a dit…

Ouffff!!!! Je taponne depuis quelques heures et ça ne fonctionne pas..... :((
Je vois toujours le "B" de blogger.... je sais pas du tout pourquoi ça ne fonctionne pas... :(
J'ai suivi toutes tes instructions pourtant...(enfin... je crois bien....!)
Si tu peut m'aider, j'aimerais beaucoup!!! ;;)

dadapoulos a dit…

Nikel =d

Soufiane LeBlogger a dit…

@ Marthe
Qu'est ce qui va pas?? tu peux pas ajouter le code ou ça donne rien quand tu enregistres???

Soufiane LeBlogger a dit…

@ dadapoulos
c'est cool

Shehrazad a dit…

Merci ça marche !!!!!!!!!! ;;)

Soufiane LeBlogger a dit…

@ Shehrazad
Trop cool

totry a dit…

bonjour !
je me suis aussi lancée dans des essais et je ne comprends rien de rien ,j'ai ce message d'erreur : mpossible de prévisualiser votre modèle
Veuillez corriger l'erreur ci-dessous et renvoyer votre modèle.
Votre modèle ne peut pas être analysé, car sa structure n'est pas conforme. Vérifiez que tous les éléments XML sont bien fermés.
Message d'erreur XML : Element type "link" must be followed by either attribute specifications, ">" or "/>".

voici ce que j'ai inséré dans le code :


link href="http://www.picdo.net/fichiers/2009/9/18/ceafb8c8-efbf-4064-af59-a8d9aeed8937_Sans titre - 1.jpg'rel="shortcut icon"


juste avant head (avec les balises < et pour fermer />

peux tu m'aider?

Soufiane LeBlogger a dit…

@ totry
dans ton blog totry1 il y a bien une Favicon, (Donc tu as résolu ton problème) mais comme c'est une JPG elle ne s'affichera pas dans IE.
Au passage, tu as 0 articles dans ce blog.

Anaïs a dit…

TOP ! vraiment TOP ! merci beaucoup !

Jean-François a dit…

Salut Soufiane,

Mon favicon.ico fonctionne impeccablement. Cependant, si je visite certains blogues et que le mien s'y trouve, j'ai remarqué que mon favicon ne s'affiche pas partout. Mon site est dans mes favoris deux fois mais mon favicon ne s'affiche qu'une fois. Je ne saisis pas...

Admin@T.F a dit…

C'est beau,merci soufiane pour télécharger des films venez voir mon site http://telecharger-film.blogspot.com

Soufiane LeBlogger a dit…

@ Anaïs
Merci
@ JF
Merci ...
@ AdminTF
Merci

Yves.ESCUDERO a dit…

Bonjour Soufiane,
J'ai bien fait tout ce que tu as dit.... mais apparemment cela n'est pas reconnu. J'ai un blog 3 colonnes...;est ce que cela peut influencer?

Soufiane LeBlogger a dit…

@ Yves.ESCUDERO
Il faut juste vérifier l'URL de ton icône et pour que ça marche dans IE il faut qu'elle soit au format *.ico ....
c'est quoi ton blog ???

Soufiane LeBlogger a dit…

@ Philippe
Je peux pas utiliser Safari en ce moment (uniquement Firefox)
Vérifie uniquement ton hébergeur .... (utilise MyDatanest pour héberger l'image *.ico)
ça marche dans IE ???
il s'agit de quel blog, tu en a tellement ....

Francine a dit…

Bonjour,
`Si ça peut "encore" servir quelqu'un :
J'ai hébergé mon icône "ico" chez Free (ci-dessous) et j'ai eu en 2 secondes l'url de l'image

http://pmsc.free.fr/

Soufiane LeBlogger a dit…

@ Francine
Merci, je vais sûrement tester cela ....

Grégory Cassiau a dit…

Je viens de changer de thème de blog et impossible de me souvenir de cette astuce. Merci bien pour le précieux coup de main :)

http://pourquoipasmoi-greg.blogspot.com/

Soufiane LeBlogger a dit…

@Gregory
Yourwilkam =)(

Anonyme a dit…
Ce message a été supprimé par un administrateur du blog.
Anonyme a dit…

J'ai créé un site avec le logiciel WebCreator et je voudrais maintenant y ajouter un Favicon.
Quelqu'un pourrait-il m'indiquer la méthode à suivre.
Merci

Soufiane LeBlogger a dit…

Ajoute le code en haut dans la partie HEAD de ton code

Anonyme a dit…

Bonjour Soufiane,

J'ai suivi tes instructions à la lettre comme tu verras dans le lien au bas. Mon icone est hébergé par UrPix.fr, qui héberge des .ico. L'icone de Blogger est disparu, mais le mien n'apparait pas. Peux tu m'aider svp. Mon site est www.lebeukiri.com
Merci
René
Fidêle lecteur

http://urpix.fr/viewer.php?file=8igwgy2etzkvtcgu0z6o.jpg

Anonyme a dit…

Suite:

Ce que je ne comprend pas c'est que et tu verras sur l'image que j'ai envoyé...est que le code change quand j'enregistre les " deviennent des ' et le link a la fin disparait...c'est à ne rien comprendre.

René
LeBeuKiRi.com

Anonyme a dit…

Super, ça marche ! Merci pour toutes ces astuces à peu près accessibles aux débutants !

Soufiane LeBlogger a dit…

@René
Faut vérifier le code, c'est tout ...

pesgo a dit…

merci mon frere pour l'explication, j'ai pratiquer cette methode et tout va bien ca marche trés bien

malegria a dit…

Salut,
Dernier petit prb pr aujourd'hui.
J'ai créé et hébergé une favicon selon tes instructions et tout fonctionne bien; mais je viens de me rendre compte que celle-ci n'apparait pas dans Explorer (j'utilise mozilla), pourtant c'est bien une favicon que j'ai hébergée.
C'est pas très grave, mais si tu as une idée de ce qu'il faut faire pour qu'elle apparaisse aussi dans Explorer.
Merci d'avance pour ta réponse.

Soufiane LeBlogger a dit…

@malegria
Il faut utiliser une image au format .ico est ce le cas ;)

malegria a dit…

Effectivement j'avais bien lu que seule une image en .ico permettait l'affichage dans Mozilla ET Explorer; mon image hébergée est bien en .ico, d'où mon problème.
voilà tout, si t'as une idée...

Soufiane LeBlogger a dit…

J'ai Internet Explorer 8 sur Vista et je vois ta favicon ;)

malegria a dit…

Bonne nouvelle alors! De mon coté, je suis formel, sur mon ordinateur, je la vois dans Mozilla mais tjrs pas dans Explorer, bizarre! Si toi tu la vois, c'est que ça doit venir d'un pb de configuration chez moi?? En tout cas merci, un pb en moins à résoudre...

Soufiane LeBlogger a dit…

Tu vois la mienne ;)

malegria a dit…

ben oui!! elle apparait bien!
par contre, avec le mien: après avoir chargé la page, il y a normalement écrit tout en bas "terminé", quand j'ouvre mon blog avec IE, il y a écrit "terminé mais il existe des erreurs sur la page"!

Emilie a dit…

Bonsoir, bonsoir,

Je m'applique à suivre et appliquer tes améliorations sur mon site, pourtant je viens de changer de template et impossible de remettre l'image choisie.

Tu pourrais me guider ou essayer :
http://theoneonefive.blogspot.com/ mot de passe samusocial
Image : http://farm5.static.flickr.com/4035/4398378765_0b3f226c22_o.jpg


Si t'as le temps, vu l'ampleur du site tu dois être occupé ..

Malgré mon dos fourbu, souvent quand j'essaie d'ajouter un code htlm javascript même en suivant scrupuleusement toutes les étapes j'ai un écran blanc à la place, est ce du au MAC ou c'est parce que je ne comprend pas votre langage codé ?

Merci par avance

Cordialement


Emilie, bloggeuse pour le Samusocial de Paris.

Soufiane LeBlogger a dit…

Il faut utiliser la bonne taille et forme de l'image

Bernard Hardy a dit…

Bonjour Soufiane ! Je viens d'installer avec succès le favicon. J'ai vérifié sur le site... tout est ok. J'ai cependant rencontré un problème que j'ai solutionné.(mais je ne sais pas s'il est bien solutionné c'est pour cela que j'ai besoin de ton avis éclairé) En cochant la case "Développer des modèles de gadgets" pas moyen d'ajouter le code quand j'enregistre. J'ai le rejet suivant : "otre modèle ne peut pas être analysé, car sa structure n'est pas conforme. Vérifiez que tous les éléments XML sont bien fermés. Message d'erreur XML : The processing instruction must begin with the name of the target." Par contre en décochant la case cela passe tout seul lors de l'enregistrement et le favicon est bien en place. Est-ce normal ? A priori il n'y a pas de problème le favicon apparaît... Merci de vérifier ou de me dire si tout est ok @+ (http://grandescauses.blogspot.com) Merci pour tes conseils et ta disponibilité.

sur les traces de notre enfance a dit…

Bonjour
J'ai fait trois essais identiques en suivant vos conseils.
Ça marche très bien. Mais dès que l'ordinateur a été éteint et rallumé, le B de Blogger réapparait.
Je suis sous Mozilla Firefox.
Merci de votre réponse
Anne

Mike a dit…

Bonjour Sofiane,

J'ai suivi la procédure... sans succès. J'ai tjs ce B horrible en favicon.

Vois par toi meme : www.lesvoixsupremes.com

Mike a dit…

Ah autant pour moi, ça marche... par contre quelques fois le B revient !

Aurais tu une solution definitive ?

Ton site est terrible. Merci pour ton travail.

:) =)) :-T =(( :-L b-( :)( ;)) :( :x :z ;) :D :a :(( x( ;;) =)( :p :)) :-o :-* 8-) 8-(

Commentaire Exprimez-vous ! Déjà 71 commentaires-questions-reponses.

Un petit Lien pour aider LeBlogger

Il suffit de copier-coller ce texte quelque part dans votre blog :
<a target="_blank" href="http://www.LeBlogger.com">Le Blogger</a>
Ce qui donnera: Le Blogger
Merci...

BlogRoll

Blogger Themes - Attention la Terre - Blogger Tutorials - Bloggerica - Eweeb - Tomate Joyeuse

L'actu du Web