Comment créer un favicon personnalisé pour votre blog?

Le favicon: finition d'un blog et signature

Une (un?) favicon, c'est quoi? Il s'agit d'une toute petite image qui viendra s'inscrire en haut à gauche de la barre d'adresse de votre navigateur, et sur le coin gauche de vos onglets de navigation. Une "signature", qui remplace le logo de votre plateforme d'hébergement de blog (qui remplace le logo blogger, par exemple).

Mon nouveau favicon: une petite fleur vert nature (j'ai décliné la même image aux couleurs de mon second blog, pour que mes visiteurs identifient en un clin d'oeil qu'ils sont toujours "chez moi", lorsqu'ils passent de l'un de mes blogs ou sites à l'autre.)

Le favicon renforce la personnalisation de votre blog. Avec internet, notre mode de communication évolue et devient très visuel. On appréhende de plus en plus l'information sous forme d'images, de pictogrammes... Un favicon, c'est donc une information instantanée qui personnalise et distingue votre blog d'un autre. Il doit à la fois être représentatif ou suggestif de votre contenu et de votre personnalité. Tout un programme en un petit carré de 16x16 pixels!

Masculin ou féminin, le/la favicon? (parenthèse culturelle)

On pourrait traduire favicon par "icône de favori". UNE icône pour UN favori... Et pour couronner le tout, en anglais, le mot favicon est... neutre! Il y a quelques temps, il me semble que l'on l'utilisait presque exclusivement au masculin. En faisant quelques recherches la semaine passée, je me suis rendue compte que de plus en plus de sites ou blogs écrivaient maintenant "une" favicon.
J'ignore si l'académie française a ou va bientôt statuer sur le genre de ce mot, et en attendant, je continue de lui attribuer le genre qu'il affichait à sa naissance: masculin.

Créer son propre favicon:

Pour que votre blog s'orne d'un favicon, il faut commencer par créer une image de 16x16 pixels. Pas évident, et pour compliquer les choses, il faudra que votre image soit au format .ico (au lieu d'une image en jpeg, gif ou png). Ce format .ico est indispensable pour qu'Internet Explorer reconnaisse votre favicon, mais peu de logiciels de dessin le lisent.
Il existe sur la toile plusieurs sites de création d'images .ico en ligne. J'en ai trouvé un qui vous permet de dessiner votre favicon pixel par pixel, mais qui vous offre aussi la possibilité de transformer n'importe quelle image ou photo carrée en jpeg en un favicon de 16x16 px format .ico:

http://www.favicon-generator.de/

Ce générateur d'icônes favicon est gratuit, sans inscription. Vous dessinez ou téléchargez et retouchez votre image, puis vous cliquez sur OK.
Il présente un gros avantage: vous dessinez votre favicon "en grand", mais vous avez un aperçu à taille réelle en direct de vos modifications.

Cliquez ensuite sur le lien "Das fertige Favicon hier herunterladen (Rechtsklick>Ziel speichern unter...)" (le site est allemand). Vous ouvrez votre image dans une nouvelle fenêtre. Vous pouvez alors l'enregistrer dans votre ordinateur.

Insérer un favicon dans votre blog:

Étape suivante: il faut héberger votre favicon tout neuf sur internet, chez un hébergeur d'images qui accepte le format .ico. Une fois votre image hébergée, elle aura une adresse web, et c'est cette adresse qu'il faudra insérer dans le code de votre blog.
Le problème, c'est que certains hébergeurs d'images ne lisent pas le .ico. Et malchance: Picasa (associé par défaut à blogger) ne reconnaitra pas votre favicon (Il faut donc l'héberger ailleurs, voir lien en fin d'article si vous n'avez pas d'hébergeur).

Une fois votre image hébergée, notez son adresse. Allez ensuite dans l'administration de votre blog. Cliquez sur "présentation" puis rendez-vous dans "Modifier le code HTML".
Avant toutes interventions dans votre code, pensez à développer les gadgets et sauvegardez votre blog. Vous pourrez toujours revenir à votre ancien code en cas de problème.

Installation du favicon:

• Décochez "développer les gadgets".
• Votre favicon s'installe avant la fin de head:
• Recopiez le code bleu, en remplaçant le rouge par l'adresse de votre favicon.

<link href='http://adresse-de-votre-image.ico' rel='shortcut icon' type='image/vnd.microsoft.icon'/>

<head/>

Capture d'écran de votre code HTML, après insertion du code "Favicon:

Dans le rectangle gris: le code à recopier pour installer votre favicon. Attention à recopier exactement ce code: n'oubliez aucun espace, apostrophe ou balise.
(clic droit pour afficher en grand dans une nouvelle fenêtre)

Recopiez le code surligné en gris en remplaçant le rouge par l'adresse de votre propre favicon.
Faites un aperçu (si vous avez oublié de fermer une balise, blogger vous signalera votre erreur). Si l'aperçu s'ouvre sans problème, enregistrez.

Vérifiez ensuite que votre favicon apparait dans la barre d'adresse et dans les onglets.


Remarques:

• Il est possible que votre favicon n'apparaisse pas immédiatement, à cause du cache de votre navigateur. Patientez un peu et videz votre cache ou actualisez.

• J'ai trouvé plusieurs codes très proches sur internet, pour insérer un favicon. Celui que j'ai utilisé, qui figure sur dans cet article, est inspiré de celui proposé par le blog Leblogger. Dans son article "Installer une favicon", vous trouverez également un lien vers un hébergeur d'images gratuit d'images au format .ico.

• Si vous utilisez une image en jpeg (ou gif, png...), votre favicon ne sera pas visible par vos visiteurs qui utilisent Internet Explorer. Par contre, il sera affiché dans Firefox et Chrome.

__________________________________________________________________

D'autres articles sur la personnalisation de votre blog? (Débutants)

• Créer des onglets avec les nouveaux modèles de l'éditeur blogger
• Indiquer son adresse mail sans risque de spam
• Un logiciel gratuit pour signer vos photos (texte, filigrane...)
• Présentation des principaux gadgets blogger

La liste de tous les tutoriels création personnalisation blog