Installer un favicon pour son blog en 10 minutes

Dans ce post je vais vous montrer comment ajouter facilement un favicon, animé en plus, à votre blog si vous avez déjà un logo. C’est très facile.

Mais tout d’abord, un favicon c’est quoi ?

C’est la petite image que vous pouvez voir à gauche de l’url de la page visualisée dans votre navigateur web. Parfois elle bouge. C’est un favicon animé. Je vous propose de vous montrer comment en ajouter un à votre blog.

Uploader une image pour créer le favicon

Ouvrez la page http://favicon.htmlkit.com/favicon/ dans votre navigateur web.

Cliquez dans le champ proposant le téléchargement de l’image ou sur le bouton Parcourir et sélectionnez votre logo grâce à la fenêtre qui s’ouvre pour trouver un fichier sur votre disque dur.

Une fois sélectionné cliquez sur le lien Download FavIcon Package.

Comme vous pouvez le voir sur ce site, vous pouvez customiser le favicon.

Enregistrez le fichier ZIP, dézippez-le. Dedans il y a 3 fichiers. Deux images et un fichier instruction.

Installer le favicon sur votre blog

Avec votre client FTP, téléchargez les deux images à la racine de votre blog.

Puis, dans la console WordPress, cliquez sur le menu Appearance / Editor.

Sélectionnez le thème Mystique grâce à la liste déroulante en haut à droite intitulée Select theme to edit (il faut cliquer sur le bouton Select).

Dans la liste des liens à droite cliquez sur Header.

Cela va vous permettre d’éditer le fichier qui affiche l’entête de votre blog.

Placez les lignes suivantes avant la balise </head>.

   <link rel="shortcut icon" href="favicon.ico" >
   <link rel="icon" type="image/gif" href="animated_favicon1.gif" >

Et cliquez sur le bouton Update File.

Ça y est, votre favicon est installé. Vous pouvez aller voir sur votre blog le favicon s’afficher et s’animer.

Attention : les modifications seront écrasés si vous mettez à jour le thème Mystique.

La prochaine fois nous verrons comment modifier la feuille de style de votre blog.

À bientôt.

 

Crédits images :

Master isolated images / FreeDigitalPhotos.net

Comments ( 5 )

  1. ReplyChafik
    Bonjour, Intéressant ton article ! J'ai une question : Pour ceux qui n'ont pas le thème mystique, est-ce qu'ils procèdent de la même façon, c-a-d éditer le ficher header ? Cordialement, Chafik
    • ReplyMichel de Changer Gagner
      @Chafik : bonjour ! On peut modifier le header ou d'autres fichiers, mais ce n'est pas recommandé si vous voulez mettre à jour le thème chaque fois (ou ne serait-ce qu'une fois) qu'une nouvelle version sort car les fichiers modifiés risquent d'être écrasés. La bonne méthode est de modifier le thème fils (Mystique - extend ou autre selon le thème) quand il y en a un.
      • ReplyChafik
        Bonjour Michel, Bin, c'est la problème ! A chaque mise à jour, il faut tout refaire. C'est quoi un thème fils ? :) Chafik
        • ReplyMichel de Changer Gagner
          Dans Mystique il y a un Mystique - extend (c'est le thème fils). On peut éditer un seul fichier : style.css afin de modifier les styles. Pour le reste, en cas de mise à jour il me semble aussi qu'il faille tout refaire. Pour faire bien il faudrait une copie du site (peut-être en local sur son PC) pour tester les nouvelles versions avant de déployer en "prod". Il faut aussi être rigoureux dans la traçabilité des modifications que l'on effectue sur le code source des thèmes... J'ai lu qu'il y avait un plugin Wordpress permettant de tester un autre thème... Cela me semble être encore sujet aux problèmes de compatibilité entre versions...
  2. ReplyChafik
    Ok, merci pour toutes ces explications ! :) A bientôt. Chafik

Leave a reply

Your email address will not be published.

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

CommentLuv badge