Un favicon, c’est une photo « iconisée » avec une extension en .ico que vous trouvez la plupart du temps devant l’url qui se trouve dans les onglets de votre navigateur. Cette « photo » est d’une dimension plutôt petite 16X16 pixels, il faudra dont bien choisir la forme de cette icone pour que ça ressemble à quelque chose. Sur mon blogue il est possible de voir cette photo à gauche de l’url et de l’onglet (firefox) ou à gauche de l’onglet pour chrome.

Tous les sites ne possèdent pas de favicons et c’est bien dommage car, quand on a une bonne dizaine d’onglets ouverts, le favicon à gauche de l’url permet de bien repérer la page.  Le favicon est aussi un signe caractéristique tout comme votre avatar ou votre logo.

Voilà une selection de plusieurs service en ligne  qui vous offrent la fabrication d’un favicon à partir d’une photo, d’un logo ou carrément une customisation pixel pas pixel.

Notez que certains thèmes wordpress de haute facture comme le thème DIVI de chez Elegantthemes  offre un outil de génération incorporé de génération de favicon.

Pour fabriquer un bon favicon, il faut surtout choisir une image qui ait une format simple. Sinon, le résultat est plutôt un pâté de couleur sans vraiment de signification. Dans mon cas, il s’agit de mon avatar, légèrement reconnaissable par la casquette jaune, uniquement reconnaissable par ma personne, mais qu’on pourra distinguer tout de même.

Icoconvert.com (conversion d’image)

Iconvert propose une série de traitement de l’image avant la conversion de l’image en favison comme le rognage de l’image (crop), le choix d’un gabarit (forme de coeur, contour, rond…), le format et la taille de la conversion (pour notre problème, on prendre l’option « Ico » bien sûr et pour finir la taille 16×16 ou autre taille.

Il existe d’autres outils de conversion disponibles comme la conversion jusqu’à vingt image en favicon…

Xiconeditor.com (très didactique)

De loin le plus complet des sites pour créer un .ico et surtout très didactique car il offfre une interface graphique  qui permet de changer l’image pixel par pixel.  On pourra aussi dessiner soi-même le favicon grâce à l’outil de dessin fourni avec l’outil.

Favigen.com

Ce site permet, à partir d’une photo, de créer votre favicon en un coup de clic.  Il explique sur la droite comment utiliser ce favicon sur votre site en vous fournissant la ligne de code à insérer dans le header.

Realfavicongenerator.net

Non seulement le site permet de fabriquer les favicons classiques, mais il offre aussi des favicon pour android, iphone. Pour finir, l’outil vous propose de télécharger un pack complet en format .zip avec les différents formats à utilise pour Android (chrome), apple touch, le code xml 4 taille de favison, un format PNG et SVG (format vetoriel).

Iconverticons.com

Vous télécharger un outil de conversion ou le faire en ligne, pour l’exercice on fera la conversion en ligne bien sûr. La conversion offre plusieurs taille d’icone de 16×16 à 128×128 pixel

Dagondesign.com

Pour les gens pressés, avec dagondisign il suffit de charger la photo (poids inférieur à 100 ko) et vous avez après quelques secondes, un fichier en .ico à télécharger.

Favicon-generator.de

On entre maintenant de la personnalisation pixel par pixel du favicon. C’est plutôt utile quand on veut arriver à un résultat plus fin, même si le site est en allemand, on comprendra facilement le fonctionnement. Attention tout de même, il faut avoir adobe flash player pour que ça marche et sur chrome, ça ne marche pas chez moi;

Degraeve.com/favicon

De la même façon que le précédent, c’est la personnalisation au pixel qui apporte une belle plus value au résultat. Sachez aussi que le site offre une fultitude d’outil en ligne. En fait, il semble que degraeve.com soit un dinausaure de l’internet qui a toujours existé.

Prodraw.net :Pic-to-icon

Plutôt simple d’utilisation, vous pouvez également choisir d’autres formats que l’extension .ico sur ce service (png, gif, jpg, bmp)

_______________________

Mode d’emploi

Une  fois que vous avez enregistré votre fichier *.ico  sur votre disque dur, il vous faudra faire un ftp pour télécharger votre favicon chez votre hébergeur à la racine du blog (par exemple), il faudra ensuite insérer la ligne de code suivante dans le header de votre blog.

<Link rel= »SHORTCUT ICON » HREF= »http://votresite.fr/fichier.ico » />

ma ligne de code est par exemple:

<Link rel= »SHORTCUT ICON » HREF= »https://roget.biz/2012.ico » />

Sur la plateforme blogger,  l’option est maintenant disponible de base dans les options.

Ce billet est remis à jour de temps en temps, car les choses bougent en permanence sur Internet. D’ailleurs on assiste à un véritable rétrécissement des offres depuis déjà quelques années, les petits créateurs abandonnent petit à petit la création de service en ligne, terrassé par la suprématie des grands de l’internet. Aujourd’hui qui crée encore des blogues?

• dernière  mise à jour 23 février 2014 

• avant dernière mise à jour :  Dec 10, 2010 @ 2:00