Comment installer une favicon sur votre blog WordPress

Je me doute bien que pour pas mal d’entre vous le sujet peut paraître simplissime, mais voyez-vous, il y a peu, je ne savais même pas ce qu’était une favicon. Alors, je me suis dit que je me devais de partager ce petit truc en plus avec tout le monde ! ;)

Alors qu’est-ce qu’une favicon ? Voilà la réponse de Wikipédia !!

“Une favicon est une icône mise à disposition par un site Web pour enjoliver, en particulier dans les navigateurs Web, les endroits où ce site est mentionné. Cette icône pourra être utilisée dans la barre d’adresses ou de titre, les favoris (le terme est d’ailleurs un mot-valise né de la contraction de « favorites » et « icon »), les onglets, ou autres raccourcis.

Le nom vient du fait que ce concept a commencé à être utilisé avec le navigateur Internet Explorer de Microsoft, où il fallait utiliser un fichier /favicon.ico placé à la racine du site.”

OK ? Alors pour faire simple, la favicon c’est la petite icône que l’on voit à gauche de l’adresse URL dans votre navigateur.

Et comment fait-on pour l’installer ?

En fait, c’est assez simple. Vous devez insérer le code suivant dans le de votre document:

Bien sûr, n’oubliez pas de modifier le nom de votre fichier .png pour y mettre l’URL de votre icône. Sur WordPress, il suffit d’aller dans l’ongletr “Présentation”, “Editeur de Thèmes”, choisir le fichier “Entête” ou “header” (header.php) et y coller ce morceau de code entre les deux balises “head”. On mets à jour le fichier et le tour est joué !

Pour la taille du fichier, je vous conseille du 16 x 16 pixels.

A bientôt

fran6

Si cet article vous a plu, n’hésitez pas à vous abonnez au blog !

powered by performancing firefox

54 Commentaires pour “Comment installer une favicon sur votre blog WordPress”


  1. 1

    Très bon petit dictatiel! C’est simple, clair et efficace… bref comme un Macintosh ;)

  2. 2

    J’aurais plutôt tendance à dire UN favicon mais bon…

  3. 3

    Malheureusement ce n’est pas le cas ;) C’est bien UNE favicon, comme UNE icône…

  4. 4

    Hello et merci pour ce p’tit tuto! :)

    a+

    ps : sympa le contenu du site..

  5. 5

    Merci du compliment !!! A très bientôt
    Fran6

  6. 6

    De rien :)
    Je debarque dans ce monde rempli de PHP, SQL, wordpress, code, balises…
    Quand je trouve un truc interressant et clair, j’le dis :)

    bonne continuation!

    Tom

  7. 7

    C’est vrai que c’est pas toujours évident !!! :D Faut prendre son temps, pas se prendre la tête et scruter à gauche et à droite ce qui se fait… J’ai quelques longueurs d’avance peut-être mais c’est sûr que c’est long tout cet apprentissage !!!

  8. 8

    A qui le dis tu… (argh)

    a+
    Tom.

  9. 9

    Hello,

    Merci pour ton conseil mais pour moi cela ne marche pas! J’ai une interface pour laquelle je n’ai pas accès au header.php… Je crois qu’il faudrait pour cela que j’achète de quoi modifier le css non?

    NB: il ne s’agit pas du site que j’ai mis en lien ici mais un autre sur lequel je travaille et qui n’est pas encore pr^t…

    Merci pour le conseil en tout cas et d’avance pour ton aide! :-)

  10. 10

    Tiens merci ! :)

  11. 11

    Bonjour,
    Je vous félicite pour votre site.
    En réalité, j’ai un problème. Ce que vous me montrer sur cette page, l’onglet “Présentation”, “Editeur de Thèmes” je n’en dispose pas sur mon site d’admin wordpress. Comment dois-je faire pour pouvoir accéder à ces fonctions?

    D’avance, un très très grand merci!
    John

    John , le 3 mai 2008 à 0:14
  12. 12

    John > Elles sont normalement par défaut… Tu pourrais me faire une copie d’écran pour voir ce que ça donne ?

  13. 13

    Merci pour l’astuce. Par contre, essaie de penser la prochaine fois que les internautes bidouilleurs adorent pouvoir copier/coller des morceaux de codes…. ;)

  14. 14

    je suis hébergé par free et il y a déja un flavicon, quand j’insère la ligne de code ca me donne ca :

    donc si quelqu’un peut m’aider merci beaucoup d’avance :)

    Athalis , le 28 juil 2008 à 11:33
  15. 15

    Merci pour l’astuce. Pour info, j’ai tenté de mettre une icône au format .ico et ça semblait ne pas fonctionner bien que j’ai indiqué type=”image/ico”. Est ce que j’aurais fait une fausse manip ?

    En tout cas, ça fonctionne en png et c’est ce qui compte.

  16. 16

    Merci beaucoup, exactement le tuto que je cherchais :)
    Et comble de l’ironie: ce site n’a pas de favicon ^^

  17. 17

    Merci, merci, merci. Ça a fonctionné parfaitement! Je reviendrai, c’est sûr!

    alfr sjalfr , le 28 jan 2009 à 23:13
  18. 18

    Merci, super !

    Sauf qu’on peut pas copier coller ton code :(

  19. 19

    Pour moi aussi cela ne fonctionne pas !!!

    j’ai bien collé le lien

    entre les deux balises “head”.

    bien coller l’image la ou il faut !!!!

    mais bon . . . . .j’ai raté quelque chose ???

  20. 20

    Juste une tite remarque au passage.
    Dans l’attirbut “rel” la valeur devrait être “shortcut icon” et non “icon”.
    Et pour ceux qui veulent faire un .ico à la place d’un .png il faut spécifier type=”image/x-icon”.
    Sinon c’est très clair ;)

  21. 21

    Bonjour,
    D’abord merci pour tous ces conseils qui m’aident dans la mise en place de mon blog!
    Cependant, j’ai beau tout essayé, je n’arrive pas à retrouver mon image dans ma barre d’adresse… Rien n’y fait…
    Si tu as une idée, elle est la bienvenue!

    Mille mercis.

  22. 22

    Simple et efficace !!!

    Merci

  23. 23

    j’ ai pas trop compris où mettre l’ image? C’est à la place de “image/png” ?

  24. 24

    Merci pour le tuto, même si chez moi ça n’a pas marché :(

  25. 25

    Un petit remerciement au passage pour ce tutoriel clair et précis.

  26. 26

    De passage sur fran6art, un petit remerciement pour ce tutoriel clair et précis.

  27. 27

    Et pourquoi tu tu n’ en a pas toi de favicon?

  28. 28

    Voila j’ai suivi ton didacticiel très bien fait mais ma Favicon ne s’affiche que lorsque j’active la sidebar.

    J’utilise WordPress mais on m’a demandé de faire un site ne ressemblant pas a un Blog, j’ai donc désactivé le sidebar , excepté pour la section contact (pour avoir accès a la newsletter).

    Quelqu’un pourrait t-il m’aider et m’expliquer comment faire pour que la favicon s’affiche sur toutes les pages ?

  29. 29

    Pareil Mon favicon ne s’affiche que dans ma page d’accueil.
    (j’ai bien suivi le tuto et j’ai même changé le rel comme le conseille LeOL)

    Babator , le 27 mai 2010 à 12:48
  30. 30

    Tout simplement magique!
    On fait les 2-3 bricoles dans le code du site, on attend 30secondes, et hop! La voila !

    Merci beaucoup =)

  31. 31

    Super tuto très clair !
    Merci pour le coup de main !

  32. 32

    Merci 1000 fois !

  33. 33

    Super ! c’est vraiment mieux que la petite page blanche !

  34. 34

    Merci.
    Par contre, comme dit plus, un texte sélectionnable en lieu et place de l’image serait appréciable.
    Et un lien vers la source…
    http://codex.wordpress.org/Creating_a_Favicon

    samsoul , le 17 jan 2011 à 2:59
  35. 35

    nice, ! i just install it

  36. 36

    Merci beaucoup pour cette astuce !

  37. 37

    Valuable info. Lucky me I found your web site by accident, and I’m shocked why this accident didn’t happened earlier! I bookmarked it.

  38. 38

    Thanks for the publish. I have generally noticed that many people are desirous to lose weight as they wish to look slim along with attractive. Nevertheless, they do not usually realize that there are more benefits for losing weight additionally. Doctors declare that obese people are afflicted with a variety of illnesses that can be perfectely attributed to their own excess weight. The great news is that people who’re overweight plus suffering from a variety of diseases are able to reduce the severity of their particular illnesses by losing weight. You possibly can see a slow but noticeable improvement with health while even a negligible amount of weight reduction is realized.

    Neoma Baim , le 29 oct 2011 à 14:25
  39. 39

    Hello.This article was really fascinating, particularly since I was looking for thoughts on this matter last couple of days.

  40. 40

    merci BCP

  41. 41

    merci pour l’explication

    younes , le 7 mar 2012 à 11:55
  42. 42

    Bonjour, merci de votre tuto.

    J utilise WP 3.1.1 et thème TWENTY TEN

    Ayant suivi pas a pas vos conseils, le résultat n’est pas au rendez-vous …

    Faut-il bien déposer le fichier favicon.png dans le dossier : http://www.wp-admin/images ?

    Ci dessous la partie du fichier header.php correspondant.

    ….

    // Add a page number if necessary:
    if ( $paged >= 2 || $page >= 2 )
    echo ‘ | ‘ . sprintf( __( ‘Page %s’, ‘twentyten’ ), max( $paged, $page ) );

    ?>

    <link rel="stylesheet" type="text/css" media="all" href="” />
    <link rel="pingback" href="” />
    <?php

    Ou ais je fais une erreur ?

    merci de votre aide – Marc André

  43. 43

    Re

    Le texte du programme n a pas été pris … je tente de le coler à nouveau – Merci !

    // Add a page number if necessary:
    if ( $paged >= 2 || $page >= 2 )
    echo ‘ | ‘ . sprintf( __( ‘Page %s’, ‘twentyten’ ), max( $paged, $page ) );

    ?>

    <link rel="stylesheet" type="text/css" media="all" href="” />
    <link rel="pingback" href="” />
    <?php
    /* Always have wp_head() just before the closing
    * tag of your theme, or you will break many plugins, which
    * generally use this hook to add elements to such
    * as styles, scripts, and meta tags.
    */
    wp_head();

  44. 44

    impossible de coller ma sélection ici …. désolé ! Je vais certainement mourir idiot !
    Marc-André

  45. 45

    Bonjour Marc-André,

    Désolé WP gère très mal l’insertion de code ^^ Si vous utilisez Twenty ten, il faut gérer le favicon de la manière que le gère Twenty Ten. J’avoue que je ne me souviens plus très bien comment il gère ça, mais normalement, s’il n’y a aucune référence à un favicon, vous n’avez qu’à insérer le code ci-dessus dans le tutoriel et mettre votre favicon à la racine du site, c’est à dire au niveau des fichiers WP et non des fichiers du thème.

  46. 46

    <link rel="icon" type="image/png" href="/images/favicon.png” />

    mettre le favicon dans le dossier “images” du thème.

    britain , le 31 mar 2012 à 17:57
  47. 48

    bah moi ça ne marche pas du tout .

  1. 1 Un Favicon « MacOS X : Le système d’exploitation d’Apple. Pingback on 30 mai, 2007 à 17:16
  2. 2 Installer une favicon dans WordPress » daria blogue Pingback on 27 déc, 2007 à 19:03
  3. 3 Chez Lulu » Un Favicon sur le Blog Pingback on 11 mai, 2008 à 11:24
  4. 4 Le blog de Tom » Note de service: Une icône pour le blog Pingback on 22 juin, 2008 à 15:49
  5. 5 Ce n’est peut-être qu’un détail pour vous ! | Blog de Julien Dugué Pingback on 4 nov, 2008 à 23:54
  6. 6 Comment installer une favicon sur votre … « Cyril Mazard Pingback on 18 juin, 2009 à 13:15

Laisser un commentaire