Créer un favicon pour votre blog WordPress

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

24 commentaires

  1. Web, comment créer son favicon : JP, petit Web Rapporteur

    […] à votre site mais notre ami Geek&Tech a fait ça très bien, aussi je vous invite à lire son article. La méthode s’applique aussi à WordPress. Tags : favicon, Web, […]

  2. Sana

    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.

  3. marie

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

  4. marie

    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.

  5. Mario

    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

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

Laisser un commentaire