L'image de marque d'un site est très importante sur le Web pour se démarquer des autres, montrer son côté professionnel. Cette image de marque passe entre-autres par le favicon.

Qu’est ce qu’un favicon ?

Un favicon est tout simplement la petite image qui s’affiche à côté de l’adresse du site, mais également au niveau des onglets, des favoris, marques pages…

L’avantage est qu’il permet de reconnaître immédiatement le site en question sans avoir à lire le titre du site…

Création et installation du favicon

  1. Commencez tout d’abord par créer une image de 16 pixels x 16 pixels dans n’importe quel logiciel d’édition d’image ;
  2. Exportez-la au format ICO ;
  3. Transférez votre fichier sur votre hébergeur Web via FileZilla ;
  4. Connectez-vous à votre administration WordPress ;
  5. Cliquez sur Apparence puis sur Éditeur ;
  6. Via la barre latérale droite, cliquez sur le lien Header ;
  7. Ajoutez cette ligne de code entre les balises <head> et </head>, et indiquez l’adresse de votre image :
    <link rel="shortcut icon" href="<?php bloginfo('template_url'); ?>/images/favicon.ico" type="image/x-icon" />
  8. Cliquez sur Mise à jour du fichier ;
  9. Ouvrez  la page d’accueil de votre site et admirez le résultat ;

Si votre logiciel ne gère pas le format ICO

  1. Exportezvotre image dans l’un des formats suivants : JPG, PNG, GIF ou BMP ;
  2. Ouvrezla page favicon.cc ;
  3. Importezvotre image en cliquant sur Parcourir… ;
  4. Cochez Keep dimensions ;
  5. Cliquez sur Upload;

    Mise en ligne de votre fichier image
    Mise en ligne de votre fichier image
  6. Dans la colonne Preview, cliquez sur Download favicon. Télécharger votre fichier ico
  7. Allez à l’étape 3 de la 1ère partie du guide (Création et installation du favicon).

Notez qu’il n’est pas nécessaire de posséder WordPress. Il suffit d’avoir accès au fichier header.php du site question. De plus, cette astuce fonctionne dans tous les navigateurs.

Crédits photo : Michael Nolan

22 commentaires
  1. Julie Navarro

    Enfin un tuto qui déchire pour les débutants !!

  2. Je savais le faire, et ton super tuto m’a permis de retrouver cette astuce for utile pour se démarquer.
    MERCI

    DavidT

  3. votre article est vraiment très utile ça m’a aidé à créer un favicon pour mon site.
    merciiiiiii infiniment

  4. Merci bcp
    j’ai une demande , tu peux faire un tuto pour montrer comment créer un menu déroulant (wordpress bien sure) comme celui de votre site, Merci bcp.

  5. Salut, bon, je suis un peu nulle et surtout pour créer mon site j’ai tout fait à partir d’un truc de wysiwyg et du coup à aucun moment je me sers de fillezilla, du coup y’a t’il un moyen de faire autrement qu’en utilisant fillezilla?
    Merci d’avance

    1. Aurélien Denis

      Tu peux toujours utiliser un plugin dans Extensions > Ajouter puis rechercher favicon. Cela dit, l’usage d’un client FTP comme FileZilla n’a rien de compliqué. Une fois connecté au serveur, il suffit d’envoyer un fichier ico et le tour est joué !

  6. WOW j’y avais pas pensé! Exact, avec une extension en 2 clique j’ai maintenant une favicon!
    C’est surement pas très compliqué et il faudra que je m’y mette mais je ne sait vraiment pas faire. D’ailleurs si je continue en me servant de fillezilla, ça ne va pas écraser mon thème et toutes mes modifications déjà en place? Est-ce vraiment utile pour quelqu’un qui ne sait pas coder du tout (à part 3/4 lignes de html) et qui n’utilise que du wysiwyg?
    Merci beaucoup de vos conseils et de votre disponibilité.

    1. Aurélien Denis

      C’est toujours bon de connaître l’utilisation même basique d’un client FTP, ne serait-ce que pour comprendre la façon dont est structuré WordPress.

      Vous pouvez également effectuer des sauvegardes facilement ou envoyer des fichiers volumineux.

  7. Le plus vieux tuto que j’ai lu sur ce sujet et surtout, le seul qui a fonctionné ! Merci

  8. Bonsoir et merci pour ce petit tuto, je sais le faire en html mais en php WP c’est moins évident, j’ai bien compris de mettre le fichier dans le dossier wp-content/themes/twentyeleven/images mais je coince l’emplacement à mettre dans ‘template_url’

    Car tel quel ça ne fonctionne pas

    Merci par avance pour vos lumières

    1. Aurélien Denis

      Il ne faut pas changer la ligne de code. Envoyez juste le favicon dans le dossier /images du thème et c’est bon. Vérifiez ensuite la source en front-end pour voir si l’URL est correcte.

  9. Excellent, merci pour l’info.
    Il existe aussi Favigen, OnlineIconMaker, Favicon-Generator ou encore Favicon Generator Tool pour créer des favicons.

  10. David BONNIN

    Bonjour,
    3 heures que je suis dessus, pas moyen qu’il comprenne la ligne de code…

    avec All in one Favicon – Réglages,

    le favicon.ico ne fonctionne que pour l’admin et pas pour le blog…
    idem si je met un png

    Mystère

    1. Aurélien Denis

      Bonjour David,

      le tutoriel n’évoque pas l’utilisation d’un plugin. Le plus simple est d’ajouter la ligne de code évoquée dans celui-ci.

  11. David BONNIN

    Bonjour Aurélien,
    J’ai le favicon qui apparait dans l’admin, elle est apparue sur le lien du site, puis remplacée quelques secondes par le favicon par défaut, et toujours rien …

Les commentaires sont fermés.