Cocktail Web

Actualité des outils du Web



Faire un favicon: 8 sites pour créer un favicon et mode d’emploi

10/04/2017 ( photo ) 13 avis


   

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.

générateur de favicon

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

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;

exemple de favicon

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é.

exemple de favicon

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.

Sachez que de plus en plus de thème wordpress vous permet de télécharger votre image sans passer par FTP, dans ce cas, on télécharge puis le code est automatiquement généré par le thème wordpress et placé au bon endroit du blogue. 

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

ma ligne de code est par exemple:

<Link rel= »SHORTCUT ICON » HREF= »http://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 

Étiquettes :




Ecrit par Thierry Roget

------------

» Suivez les commentaires de ce billet par RSS

Commentaires

» Abonnez vous au flux RSS des commentaires de ce billet

Commentaire de Thomas |

Moi j’ai fais le mien avec PhotoShop, en prenant un petit carré zoomé à 1600% puis j’ai écrit les initiales (BM pour Blog-Marrant) dessus.
 

Commentaire de Chasseur immobilier Toulouse |

Excellent, je vais pouvoir remplacer les miens

Commentaire de jerome F. |

Bonne info pour mon blog—-merci 😉

Commentaire de Pantalon blanc |

Allez hop, c’est rajouté dans les favoris, ca peut toujours servir.

Commentaire de Thierry Roget |

il faut le faire, faut pas attendre 😉

Commentaire de Benoît |

Petite remarque : la plupart des navigateurs vont chercher tout seul l’icône (même si le code de la page ne le demande pas).
L’intérêt d’avoir une balise link de type , c’est qu’on peut avoir des balises différentes selon les pages du site. En ce qui me concerne, j’ai plusieurs « sites » sur le même serveur avec des présentations, des sujets et des favicones différents.

En fait, on peut mettre n’importe quel format d’image (ou de vidéo type mpeg mais on entend pas le son !) avec les navigateurs modernes.

bonne journée

Benoît

Commentaire de Thierry Roget |

merci de ce détail important! je ne savais pas!

Commentaire de Benoît |

Bonsoir Thierry,
le out de code html que j’avais inclus n’est pas passé à l’affichage. Désolé. C’était pour indiquer qu’on peut changer le chemin de l’icône selon les pages.

Commentaire de ngin.de éditer un icone en ligne |

[…] un icone de taille plutôt restreinte c’est à dire 16X16 pixel, donc utile pour faire des favicons voir des […]

Commentaire de Nern |

Merci pour cet article, c’est plus simple que d’installer un soft

Commentaire de Générateur de favicon pour : Windows , Ios, Android, Window 8 tile |

[…] dans un blogue, il faudra faire une manipulation décrite en bas de l’article suivant : Faire un favicon: 10  sites pour les créer et mode d’emploi. Notez que les bons thèmes wordpress offrent l’option d’ajour de favicon sans pour […]

Commentaire de Un favicon timer |

[…] aller plus loin, vous pouvez consulter la page sur l’art et la manière de créer un favicon? . Pour trouver d’autres timer et compte à rebours rendez-vous sur la page ”  12 […]

» Abonnez vous au flux RSS des commentaires de ce billet

Ecrire un commentaire