La favicon est la petite icône qui apparaît à gauche de l'adresse du blog, dans la barre d'adresse du navigateur. Par défaut, c'est le B de Blogger :
Sous Internet Explorer 6 (IE6) et ses versions inférieures, elle n'apparaît que si l'adresse du site est enregistrée dans les favoris. Pour les navigateurs récents (IE 7 ou Firefox 2), elle apparaît systématiquement.
Internet Explorer n'accepte que le format *.ico, alors que sous Firefox, on peut utiliser tous les formats graphiques habituels (*.jpg, *.gif, *.png), et même une petite vidéo en format *.mpg
Créer l'icône
Enregistrer l'icône
Elle ne peut pas être enregistrée sur Blogger. Il faut utiliser un hébergeur, par exemple Google Page, qui accepte le format *.ico.
Le code html
Il faut créer un lien qui signale au navigateur la présence d'une favicon :
<link type="..." rel="URL de l'icone" />
Le code complet
IE n'acceptant que le format *.ico, il faut une entrée pour IE et, si l'on veut une favicon dans un autre format, une entrée pour FF.
Un exemple de code, à insérer après la balise '<head>', avec un hébergement sur liens-du-vin.ch :
<link href="http://www.liens-du-vin.ch/favicon1.ico" type="image/x-icon" rel="shortcut icon" />
<link href="http://www.liens-du-vin.ch/favicon.png" type="image/png" rel="icon" />
Et le résultat sur mon blog : http://viti-vino.blogspot.com
Un complément (novembre 2008)
Blogger ajoute une balise <link rel='icon' dans la source du blog (novembre 2008) :
<link href='http://www.blogger.com/favicon.ico' rel='icon' type='image/vnd.microsoft.icon'/>
Pour que vos propres balises link agissent, les placer juste avant la balise </head> (c'est la derniere balise qui prime)
Pour IE 9 (décembre 2011)
Pour IE9, la première balise link est prise en compte. Il faut donc placer la balise suivante, juste après <head> :
<link href='URL/favicon.ico' rel='icon' type='image/x-icon'/>
Article connexe
Un WebClip pour son Blog
Articles
39 commentaires:
génial! je cherchais cela depuis longtemps! je ne savais plus comment cela s'appelait...
merci merci...
Les grands esprits se rencontrent , je viens juste de faire un sujet la-dessus sur le Google Group!! :D
Faut croire que c'est un sujet interessant^^
Un complément d'information :
Si l'icône *.ico est hebergée sur Google Page Creator (GPC), il ne faut pas la nommer favicon.ico (c'est un nom réservé par GPC).
Bonjour à tous,
Ben j'ai essayé. Ca marche au poil avec Firefox mais y'a point avec IE! Grrr!
a+
BB.
Genial :) Merci beaucoup !
Merci beaucoup pour ton article, j'avais déjà un favicon qui n'était visible qu'avec firefox, je ne savais pas qu'il était possible de faire de même avec IE
bonne continuation
Merci de ton aide j'ai reussi a mettre ce fichu truc.
¨^^
merci c'est nickel:
pour ceux chez qui ca ne marcherait pas,
IL FAUT imperativement coller le code, juste aprés HEAD.
J'avais collé ça 3 lignes plus bas et ca ne fonctionnait pas.
là ca marche impec!
merci
ps: pour info j'ai hebergé le favicon chez free...ca marche
Merci, très utile. Je ne sais pas si ça fonctionne avec Internet Explorer, mais je m'en fous un peu...
ben en ce qui me concerne, ça a marché deux jours et puis le logo blogger est revenu...
Bonsoir Paul
Sous IE 6 c est normal !! Le favicon ne s affiche que si le site est dans les favoris
moi ca amarché pendant 2 ans et depuis 2 semaines plus rien ! et sur mes 2 blogs !! :S
Bonjour Nomadi
Voir votre code
LINK :
href='http://telefat.free.fr/favicon.ico' rel='shortcut icon' type='image/x-icon'
puis 3 lignes plus bas :
LINK href='http://www.blogger.com/favicon.ico' rel='icon' type='image/vnd.microsoft.icon'
supprimez le deuxieme link et cela rentrera dans l ordre !!
Bonne soiréee
c'est que le 2e code :LINK href='http://www.blogger.com/favicon.ico' rel='icon' type='image/vnd.microsoft.icon'
le favicon de blogger donc, je ne peux pas le supprimer puisqu'il n'apparaît pas dans "modifier le code html"... il y a quelque chose qui m'échappe
Bon en colant le code juste après /title>
ça marche, le code généré par blogger n'apparaît plus... je suppose que ça va encore marcher deux jours et hop retour du B orange mais bon...
bonne soirée...
paul
Bonsoir
J ai corrigé le message du blog, pour contrer cette nouveauté de Blogger : Placer les balises link personnelles juste avant /head
Bravo et merci du conseil , je n'avais plus ma favicon depuis la modif de blogger !
Comme les favicon ne marchaient plus sur Blogger, j'ai fais un tuto qui fonctionne : http://dicocolight.blogspot.com/2008/06/logo-dans-la-barre-d-adresse-blogger.html
Encore une foi merci beaucoup,
tres bien explique
Salut depuis la Colombie
Merci !!!
Ça fonctionne merci beaucoup !
Merci pour cette astuce.
merci beaucoup, comme c'est genial!
Salut tout le monde je vois ke tt le monde a l air satisfait mais pas moi mon adresse de blog c est: http://didizekid.blogspot.com/ et je ne suis pas capable de mettre l icone ke je veux ni aucune d ailleurs
OU CE TROUVE LE FAMEUX "HEAD"??????
est ce k il le faut effacer la ligne correspondant à l icone du B (de blogger) pour la remplacer par celle ke je veux?
est ce k il faut aller ds "modifier le code html" ds mon blog ou putot ds firefox?
Comment le site va reconnaitre la photo ke j ai moi ds mon ordi????
excusez moi j ai l air con mais c comme ca!!! CHUIS TT NOUVEAU
Aidez moi svp
voila le message ke je reçois a chake fois ke j ajoute klk chose ds "modifier le code html"
"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."
g été sur le site favicom from pics g choisis la photo ca a été transformé en favicon j ai enregistré et g eu l ekivalent d une petite photo de 16*16...j en fais koi de cette petite photo enregistré ds mon bureau?? comment l intégrer en tant k icone ds mon blog?
ds emplacement g ca :"C:\Documents and Settings\Didi\Bureau\Tel\favicon_153802"
pliz help!
g tt compris grâce à ce mec
http://www.youtube.com/watch?v=BUqhcMdK3XE&feature=related
franchement ct un jeu d enfant
Merci beaucoup !
J'ai suivi à la lettre au moins 4 tutoriels différents et ne suis jamais arrivée à installer mon favitrèscon
Bonsoir
Je confirme le complément de nov 2008. Le link vers la favicon personnelle doit etre place apres le link de blogger
[link href='http://www.blogger.com/favicon.ico' rel='icon' type='image/vnd.microsoft.icon'/]
et la meilleure position c est juste avant /head
Cdt
J'arrive pas à le faire parce qu'il y a des chose que je comprend pas et d'autre qui ne sont plus valide comme par exemple Google Page n'existe plus alors je suis allé sur un autre site hébergeur et ensuite je ne comprends pas
Il faut créer un lien qui signale au navigateur la présence d'une favicon :
C'est ou qu'on doit créer ce lien???
enfin bref si quelqu'un pouvais expliquer plus en détail et clairement ça serait sympa.
Ivy
Bonsoir
@ivy
- C est juste Google Pages n existe plus. Il faut trouver un hebergeur qui accepte le format *.ico
Le lien c est l instruction le tag link a placer entre head et /head
Cdt
Bonsoir
@ivy
- C est juste Google Pages n existe plus. Il faut trouver un hebergeur qui accepte le format *.ico
Le lien c est l instruction le tag link a placer entre head et /head
Cdt
En complément de cet excellent billet
http://blogatiere.blogspot.com/2010/10/changer-favicon-blogspot.html
Avec la solution pour que ça fonctionne sous IE
Merci beaucoup! C'est super clair!! =)
Je constate qu'avec IE9, ça ne fonctionne plus (l'icone reste celle de Blogger)
Pas de problème avec IE8 et Firefox
Dommage !
Très bon article qui m'a aider plus, surtout pour blogger, je ne savais pas que le format "ico" est incompatible avec Picassa
Bonjour...1er blog et peu d'expérience= beaucoup d'interrogations !
est il normal que le favicon ne s'affiche pas dans le profil de l'auteur du blog ?
...il s'affiche néanmoins aussi bien avec ie ou ff en entête de page.
Merci.
Enregistrer un commentaire