Tout est dans le détail.
On a vu que le design d’un blog est très important pour se faire une première impression et même donner envie d’y rester.
Dans cet article, je vous parle du favicon, qui permet de personnaliser votre blog et de le rendre reconnaissable parmi les autres sites.
Personnaliser son blog avec un favicon
Le favicon, qui vient des mots favoris et icône, est la petite image que l’on retrouve à côté du titre dans le navigateur Internet, à côté de l’url ou dans les favoris (d’où le nom).
Il symbolise le site web et doit être unique pour permettre de l’identifier rapidement entre les différents sites sur les autres onglets.
Mon favicon est l’espèce d’apostrophe qui fait un rappel de mon logo, avec la couleur principale de mon blog.
Vous pouvez aussi voir le favicon que j’avais fait pour le blog de Gwenadeco.
Comment créer un favicon ?
L’image doit faire 16 x 16 pixels et être au format .ico (et non pas .jpg ou .png).
Vous pouvez le créer de 2 manières différentes :
- soit en créer un directement en allant sur le site favicon.cc et le dessiner pixel par pixel: vous verrez qu’un carré correspond à 1 pixel.
- soit le créer en png depuis un logiciel d’image et l’importer sur ce site en cliquant sur « Import image ». Remarque importante : il est préférable de créer votre favicon en png et non en jpg si celui-ci n’a pas de forme carrée ou rectangle sinon il y aura du blanc autour de votre icône car le jpg ne gère pas le transparent.
Dans les 2 méthodes, vous pourrez voir le rendu final grâce au « Preview » en bas de la page :
Une fois que vous êtes satisfait de votre rendu, cliquez sur « Download favicon », vous avez ainsi votre fichier favicon.ico
Comment ajouter le favicon à son blog ?
Vous avez besoin du logiciel Filezilla qui vous permet d’accéder aux fichiers qui constituent votre blog.
1e étape : Téléchargez le fichier favicon.ico vers votre dossier www.
2e étape : Modifiez le fichier header.php de votre thème WordPress et ajoutez la ligne de code suivante entre les balises <head> et </head> en modifiant le nom de votre blog :
(Je ne vous met pas le lien à copier-coller car avec WordPress les guillements Anglais se transforment automatiquement.)
3e étape : Être patient ^^ Le favicon peut mettre jusqu’à 24h pour s’afficher.
Si c’est un peu trop technique pour vous, vous pouvez toujours utiliser une extension qui fera ça, il suffit de rechercher « favicon » dans la bibiothèque des extensions. Heroic Favicon Generator me semble pas mal mais je ne l’ai pas testé.
Pour ma part, j’essaie d’éviter au maximum les extensions si possible pour éviter d’alourdir encore plus mon blog et ralentir son temps de chargement.
Vous avez dû le comprendre, cette manipulation n’est possible que si vous avez un blog avec WordPress.org.
Sur les plateformes de blogs gratuites, vous avez le favicon par défaut et pour certaines vous pouvez avoir une option pour ajouter votre propre favicon.
Ci-dessous les favicons par défaut de Blogger, Canalblog et Over-Blog pour ne citer qu’eux.
Mais si ce n’est pas possible de changer votre propre favicon et que vous souhaitez migrer votre blog vers WordPress, la procédure est ici ! ^^
A vous de jouer
Et vous, est-ce que vous avez votre propre favicon ? Par quelle technique l’avez-vous créée ? Partagez avec nous vos astuces dans les commentaires ci-dessous.
Mia
Ancienne responsable e-commerce pour une marque de luxe, elle est l'auteure du livre "Augmenter le trafic de son blog" paru aux Editions Eyrolles.
Elle s'adresse à tous ceux dont la passion est le moteur.
Voir sa description détaillée.
Les derniers articles par Mia (tout voir)
- Je vous invite dans ma bibliothèque (plein de cadeaux pour vous) - 2 avril 2019
- Je suis maman, blogueuse, guitariste, sportive et bien d’autres… - 28 mars 2019
- Le blog a 5 ans ! Un jeu-concours pour fêter ça - 8 mars 2019
Super, je m’y suis mise, mais à partir de la phrase : « Vous avez besoin du logiciel Filezilla qui vous permet d’accéder aux fichiers qui constituent votre blog. » et aussi » 1e étape : Téléchargez le fichier favicon.ico vers votre dossier www. »
je n’ai plus rien compris… qu’est-ce que Filezilla et comment télécharger le fichier favicon vers le dossier www ? cela restera un mystère…
Je crois que j’ai atteint mes limites !
Pour mon favicon, j’ai pu l’intégrer grâce aux options du thème choisi pour mon blog.
J’ai fais le mien avec Heroic generator favicon, ça a mit plusieurs jours avant de s’afficher mais je suis ravie du résultat. Pour voir ma favicon : http://www.beaauuu.com
Merci Mia 🙂
Ben, je n’en ai pas parce que je suis une non geek par excellence. Je n’y comprends pas grand chose à tout ça, et parfois ça me désespère. Je suis persuadée que je manque quelque chose à ne pas m’y connaître dans le domaine de l’informatique.
J’en ai un, qui est tout simplement le logo que je me suis dessiné pour mon activité de création de bijoux. Par contre je n’ai pas eu à le créer. Je suis sur Blogger, et suffit juste d’insérer une image de moins de 100ko pour que ça créer le favicon. Par contre je m’aperçois qu’il est actuellement visible dans Firefox, mais sous Chrome c’est encore mon ancien qui apparaît…
Perso, c est une tâche… Mon autoportrait en fait. Et je crois que mon design me le permettait de le mettre ! Il me semble du moins !
salut
pour l’instant aucune d’idée de favicon en vue, je met donc ton article dans mon favoris au cas où si un jour il me vient une idée lumineuse 😉
Super je vais faire de même .merci pour tes articles je me lance dans la rédaction dun blog sur WordPress ..et tes conseils sont vraiment utiles..
Hello,
Petite précision, il n’est pas nécessaire d’attendre pour voir apparaître le favicon. Une purge du cache du navigateur devrait suffire!! Et si vous voulez une icone qui marche sur tous les OS, allez voir par ici http://realfavicongenerator.net/
🙂
ah bon? car moi ça a pris quelques heures pour s’afficher. ça dépend si t’avais déjà un favicon avant que tu as remplacé non?
et je savais pas que le favicon ne marchait pas sur certains navigateurs, le mien s’affiche partout il me semble 🙂 en tout cas merci pour le site!
je m’en crée un tout de suite