Tutoriels

Créer un favicon facilement pour un blog WordPress

creer-un-favicon-tutoriel

Dans l’identité graphique de votre blog WordPress, il y a un élément qui est parfois oublié, peut-être par sa petite taille, le favicon. Pour autant, il a son importance et nous allons voir comment le créer et l’installer sur un blog WordPress.

A noter : En dehors de quelques points dans la partie “Installer un favicon”, l’article vaut également pour tout autre blog ou site, quelque soit la plateforme utilisée.

Qu’est ce qu’un favicon

Ne soyez pas offensé si vous savez déjà ce qu’est un favicon, ce n’est peut-être pas le cas de tout le monde.

Un favicon est donc un petit icône qui s’affichera à plusieurs endroits dans votre navigateur :

  • Dans les onglets (à gauche du titre de la page)
  • Dans vos favoris (ou marques pages)
  • Dans la barre d’adresse pour Internet Explorer

Si vous vous demandez quelle en est l’utilité, posez-vous simplement la question suivante : Quand vous avez plusieurs onglets ouverts dans votre navigateur, comment identifiez-vous celui dans lequel est ouvert Facebook ou Gmail (par exemple) ? C’est tout simplement parce que le favicon de ces sites là vous est familier et vous donne un repère.

Sa taille est en règle générale de 16 x 16 pixels.

Comment créer un favicon

Pour la création de votre favicon, il n’y a pas besoin de se faire mal à la tête. Vous avez sûrement déjà un logo qui peut être exploité de nouveau. En effet, le logo et le favicon sont souvent identiques.

Cependant, le logo de votre blog WordPress est peut-être sous la forme d’un texte comme c’est le cas par exemple pour le site L’Équipe.fr. Sachant que la taille du favicon est vraiment petite, vous vous doutez bien que le texte ne peut rentrer. L’Équipe a pris le parti de ne garder que le É dans son favicon.

Si vous êtes dans ce cas là, il faudra donc ressortir un élément graphique de votre logo pour l’utiliser comme favicon. Si ce n’est pas le cas, reprenez votre logo comme j’ai pu le faire ici (même si on ne distincte pas bien le D et le B vous me direz).

Autre point à mentionner, le favicon, fichier en .ICO, sait gérer la transparence tout comme un fichier .PNG. Aussi, pour générer votre favicon utilisez bien ce dernier format plutôt qu’un . JPG. Cela sera plus joli dans le navigateur.

Pour vous montrez la différence, voici un petit test fait rapidement. A gauche, un favicon généré à partir d’un JPG, à droite à partir d’un PNG. Comme vous pouvez le voir, avec le JPG un carré blanc est ajouté.

test-favicon

Vous devriez maintenant avoir l’image qui va servir à créer le favicon de votre blog WordPress, il va donc falloir maintenant générer votre favicon à partir d’elle (image en format carré bien sur).

Pour cela nous allons utiliser le site favicon-generator.org. Notez qu’il existe de nombreux autres sites qui permettent de faire la même chose, une petite recherche sur le web vous le confirmera.

Le fonctionnement est très simple, il vous suffit de “Choisir un fichier” (donc votre image) puis de cliquer sur le bouton “Create favicon“. Et voilà, le tour est joué.

Installer un favicon sur un blog WordPress

L’installation du favicon sur votre blog peut se faire de différentes manières. Cela dépendra du thème que vous avez installé.

Installer un favicon via les options de votre thème

Beaucoup de thèmes proposent des options avancés, notamment les thèmes premium. Dans ce cas là, la mise en place d’un favicon est une formalité.

Il vous suffira de vous rendre dans les options du thème, généralement dans le menu Apparence ou alors dans le menu au nom du thème, puis de choisir le favicon précédemment généré.

Voici un exemple avec le thème premium Divi d’Elegant Themes.

divi-theme-options divi-theme-options-favion

Simplissime vous l’avourez !

Installer un favicon en remplaçant l’ancien

Certains thèmes fournissent un favicon mais n’offre pas la possibilité dans les options de le modifier. Le plus simple dans ce cas est de trouver dans les sous-dossiers du thème, le fichier favicon.ico et de le remplacer par le votre.

Installer un favicon en modifiant le chemin

Si aucune des deux options précédentes n’est possible, vous pouvez modifier le header de votre thème.

Éditez-le depuis NotePad+ par exemple et faites une recherche dedans sur les termes link rel=”shortcut icon. Vous devriez trouver la ligne ci-dessous :

<link rel="shortcut icon" href="http://www.nomdemonblog.com/chemin_vers_mon_favicon/favicon.ico" type="image/x-icon">

Il vous suffira, après avoir uploadé votre favicon dans vos médias, de modifier le chemin vers celui-ci.

Ce tutoriel sur comment créer un favicon puis l’installer sur son blog WordPress est terminé. J’espère avoir été clair, si vous avez toutefois des questions, n’hésitez pas à laisser un commentaire.

Si vous l’avez trouvé utile, n’oubliez pas de le partager, merci.

Envie d'être libre financièrement avec un blog? Mais tu n'as d'idée de blog?

Télécharge mon guide offert

 
Comme toi je haïs les spams.

Créer un favicon facilement pour un blog WordPress
Vous avez aimé l\'article? Laissez une note

encart-ET

1 Commentaire

  1. Vous faites bien de rappeler ces fondamentaux. On voit trop souvent des blogs avec un favicon par défaut.

    A l’ère des plateformes mobiles, le classique favicon.ico n’est plus suffisant. Il faut des icônes pour iOS, Android Chrome, Windows 8… Là ça secomplique. Il existe un plugin WOrdPress pour créer et installer tout cela en quelques clics: https://wordpress.org/plugins/favicon-by-realfavicongenerator/

    Alors oui, j’en suis l’auteur, c’est un peu facile 🙂 Mais à moins de ne pas avoir d’ambitions côté mobile, cet outil est un vrai plus.

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.