Au même titre que le choix des couleurs de son blog, mettre en place un favicon ou un logo fait partie de son identité visuelle. A force de partages sur les réseaux sociaux, on commence à vous reconnaître. Une uniformité dans les symboles et gamme de couleurs qui vous caractérisent identifieront votre blog WordPress encore plus facilement.
Récemment, j’ai modifié les couleurs de mon blog. A dire vrai, je n’avais pas encore trouvé mon identité visuelle (ou du moins celle qui me plaisait!). Maintenant que ma gamme de couleurs est définie, je dois modifier une chose: mon favicon.
Aujourd’hui, je vais donc vous donner les outils nécessaires pour créer un favicon et vous indiquer deux méthodes pour l’installer.
Au fait, c’est quoi un favicon ?
C’est cette petite image ou icône que l’on retrouve en haut à gauche de la barre d’adresse de votre navigateur préféré. Et également dans les onglets du même navigateur.
Pour WPFormation (je ne sais pas pourquoi j’ai choisi celui-ci !), cela ressemble à ceci :
Encore une fois, c’est un moyen visuel d’identifier un site ou un blog, voire son propriétaire. Ici c’est ce qui me fait dire « ah mais c’est bébé Fabrice donc c’est WPFormation !”.
Cela peut s’avérer très utile pour celles et ceux qui ouvrent plusieurs onglets et qui peuvent retrouver, rien qu’avec une simple image, le site qu’ils consultaient il y a quelques minutes.
Quelques outils pour créer facilement un favicon ?
- A partir des couleurs de votre blog, vous pouvez définir votre palette de couleurs grâce à ce lien (pour garder des tons qui se marient bien) : http://www.cssdrive.com/imagepalette/index.php
- Convertir des codes couleurs si nécessaire : http://www.kitsgraphiques.net/convertisseur-rvb-hexadecimal.html (utile pour Powerpoint que nous allons voir dans l’exemple ci-dessous).
- Un logiciel de retouche photos pour créer votre image comme : paint.net, photoshop, gimp ou … Powerpoint.
- Un site pour créer le fichier avec l’extension .ico, qui est représentative du favicon :
http://www.wikistuce.info/doku.php/favicon
http://favicon-generator.org/
http://www.favicon.co.uk/
Ces sites sont très utiles pour avoir un favicon aux bonnes dimensions, cela vous évitera des manipulations inutiles pour obtenir les mesures adéquates, cela s’appelle: Gagner du temps!
Un exemple pour créer un favicon ?
Etape 1 : on définit les couleurs
Pour ce faire, j’ai défini les couleurs, au vu de l’entête et du logo de mon blog. J’ai donc fait une capture d’écran et j’ai téléchargé cette image sur le site « cssdrive », voici le résultat :
Pour connaître le code de mes couleurs qui me servira pour la fabrication il me suffit de les identifier sur la droite.
Etape 2 : on crée son image :
Pour ma part, je souhaite utiliser le lettres “C”et “E” de Cyberentraide et lui donner des couleurs définies ci-dessus.
J’utilise Powerpoint et mon imagination. Un texte n’étant pas facile à rédiger pour expliquer tout cela, voici la vidéo :
Etape 3 : transformer votre image en favicon
Comme indiqué plus haut, peu importe la taille originale de votre image (enfin pas non plus une taille gigantesque et privilégier “le carré”), car en utilisant, par exemple, le site de wikistuce vous aurez un favicon de taille conventionnelle.
Il vous suffit:
- d’envoyer l’image créée à l’étape 2,
- de cliquer sur « générer », ce qui vous donnera trois fichiers, nous ne conserverons que le premier,
- de cliquer sur télécharger,
- et de renommer ce fichier favicon
Etape 4 : le but final : faire apparaître votre favicon
Pour avoir enfin l’immense joie de voir apparaître votre œuvre d’art sur la toile, vous avez deux méthodes.
Première méthode : envoyer le fichier favicon.ico dans le dossier images de votre serveur FTP et ajouter la ligne ci-dessous sur votre page d’accueil dans la partie “head”:
<LINK REL=”SHORTCUT ICON” href=”http://www.votresite.com/images/favicon.ico”>
Deuxième méthode : Utiliser un plugin WordPress : oui je sais encore un plugin qui va freiner l’ouverture du blog bla bla bla … malgré tout, cela a le mérite d’exister et d’être une solution donc le voici :
Où le trouver : https://wordpress.org/plugins/custom-favicon/
Celui-ci est tout simple à paramétrer. Il vous permet de mettre un favicon pour votre admin que seul vous voyez et un favicon vu sur internet (moi j’ai pris le même), en cliquant sur “upload an image”:
En conclusion
Vous voilà armé pour créer simplement un favicon et surtout le rendre visible à vos lecteurs et internautes.
Bien entendu, vous pouvez toujours déléguer cette tâche en faisant appel à un Freelance par exemple, mais bon … c’est quand même moins drôle!
On privilégiera les favicons de couleur assez vive et suffisamment visible
pour exemple et pour comparaison le favicon de wpannuaire(bleue et noir) est moins visible que wpformation (une image de bébé) autrement mettre un favicon ne servirai qu’a occuper l’espace ;-)
http://www.xiconeditor.com/ est assez bien pour réaliser un favicon car on verra le favicon en situation (le preview) et l’on pourra se rendre compte du résultat final avant téléchargement.
Pour le reste installer un favicon peut-être une galère, comme une facilité, les bon thème ont l’option favicon pour installer ça en 2 clics.
@+
Hello Franck
J’ai remarqué que le mien se voit bien aussi même si les couleurs ne sont pas vives et ne me dis pas non :)
Merci pour le lien, je vais aller voir ça.
Concernant les deux clics et l’installation facile sur certains thèmes, je confirme que c’est possible ! Notamment sur Canvas de Wootheme, mais sûrement sur beaucoup d’autres :)
Au plaisir
Anne Catherine
hello Anne,
Normalement si le thème est bien conçu, pas besoin de plugin pour insérer un favicon. Cela étant dit, c’est sympa d’avoir pensé à ceux et celles qui ont un thème non complet. Attention à ne pas prendre de couleurs trop agressives (ni pour le thème ni pour le favicon), j’ai déjà eu des remarques négatives mais constructives au sujet des couleurs avec un ancien thème. Enfin, je ne pense pas que différencier un favicon public d’un favicon privé soit indispensable.
Hello Seb
Concernant les couleurs d’un thème … du moment que tu restes cohérent avec les couleurs choisies,qu’elles soient vives ou plus soft, moi ça ne me dérange pas ! Adoptez les couleurs que l’on affectionne est pour moi une priorité. Pour différencier un favicon privé et public, je suis d’accord on s’en fiche un peu c’est juste pour NOUS :)
A noter également que le super plugin JetPack propose le module icône de site qui vous permet de créer une icône qui sera utilisée comme favicon, icône pour mobiles, et tuile pour les ordinateurs utilisant Windows 8+
Alors pour jetpack tu vas pouvoir peut être m’expliquer pourquoi il ne fonctionne pas pour l’icône chez moi :( il ne prend pas en compte l’image chargée mais une que j’avais en favicon il y a trois mois … si tu as une idée :) voilà pourquoi je n’en ai pas fait allusion dans l’article
Pour l’étape 4, je suggère https://wordpress.org/plugins/favicon-by-realfavicongenerator/ , et ce de façon pas du tout chauvine (ce n’est pas comme si j’atais l’auteur du plugin :-) ). Ce plugin repose sur http://realfavicongenerator.net/ , qui permet de designer le favicon plateforme par plateforme. Ca n’a pas l’air comme ça, mais dans les faits c’est indispensable. Une icône ne peut pas convenir à toutes les plateformes. Sans compter les petits détails, comme la couleur de fond des tuiles Windows Metro, à indiquer séparément…
@philippe :) Mais tu as bien raison de donner le lien de ton plugin et d’en faire l’article ! Il faut le mettre en avant au contraire …
Je vais essayer tiens et peut être un article sur mon blog cette fois ;)