Francis Chouquet Lettering + Logo Design

Comment installer une favicon sur votre blog WordPress

0

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

64 Commentaires

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

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

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

  • Hello et merci pour ce p’tit tuto! 🙂

    a+

    ps : sympa le contenu du site..

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

  • 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

  • C’est vrai que c’est pas toujours évident !!! 😀 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 !!!

  • A qui le dis tu… (argh)

    a+
    Tom.

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

  • Tiens merci ! 🙂

  • John

    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 > Elles sont normalement par défaut… Tu pourrais me faire une copie d’écran pour voir ce que ça donne ?

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

  • Athalis

    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 🙂

  • Raph

    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.

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

  • alfr sjalfr

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

  • Merci, super !

    Sauf qu’on peut pas copier coller ton code 🙁

  • 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 ???

  • 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 😉

  • clara

    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.

  • Simple et efficace !!!

    Merci

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

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

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

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

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

  • 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 ?

  • Babator

    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)

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

    Merci beaucoup =)

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

  • Merci 1000 fois !

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

  • samsoul

    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

  • nice, ! i just install it

  • Merci beaucoup pour cette astuce !

  • 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.

  • Neoma Baim

    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.

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

  • coco

    merci BCP

  • younes

    merci pour l’explication

  • 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é

  • 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();

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

Success, your comment is awaiting moderation.