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

Tous les blogs ne possèdent pas de favicon et c’est bien dommage car quand on a une bonne dizaine d’onglets ouverts, on aime bien se repérer grâce au favicon. Voilà 4 sites qui vous offrent la fabrication d’un favicon à partir d’une photo, d’un logo ou carrément une customisation au pixel.

   

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= »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 

Editeur d’image en pixel en ligne : 5 outils

Si le gif est un dinosaure qui a survécu au web2.0, on peut presque en dire autant des images créées en pixel. En fait toutes les images sont faites de pixels, mais quand on parle de l’art du pixel, on parle en fait de dessiner une image pixel par pixel (point par point) , comme on peut le voir dans la figure de gauche.

Commençons par expliquer ce qu’est un pixel ! Le pixel  est l’unité de base permettant de mesurer la définition d’une image numérique matriciellePour faire plus simple : le pixel est un point lumineux. Chaque point lumineux ajouté à un autre point forme une image. Au fur à mesure des évolutions technologiques, on a commencé par le premier pixel qui ne pouvait prendre que deux états, le noir et le blanc et qui prenait en mémoire 1 seul bit! (C’est l’époque où la mémoire des ordinateurs manquait cruellement ). Puis on a créé un pixel à 4 bits et donc à 16 couleurs (4 à la puissance 2), puis 8 bits avec 256 couleurs, 16 bits avec 65 mille couleurs et maintenant 24 bits avec 16 millions de pixels. Avec 24 bits, on est plus fort que l’oeil, donc on aura plus aucune évolution en terme de pixel.

  • Exemple FF FF FF qui est le blanc, en binaire ça fait 16 bits à 1111 1111 1111 1111 1111 1111
  • Exemple 00 00 00 qui est le noir, en binaire ça fait 0000 0000 0000 0000 0000 0000 .

Bref, nous les vieux geeks, le pixel est pratiquement gravé& dans notre DNA. Pour les plus jeunes, il s’agit d’un truc vaguement familier.  Mais nous les vieux geeks on s’accroche à la partie nostalgique, c’est un peu comme les taxis face à UBER, on s’accroche, mais contrairement à Uber, les jeunes peuvent tout de même s’intéresser au vieux pixels car en fait le pixel n’est pas prêt de mourir et  à ce titre, je viens de dresser une liste de service en ligne qui offrent une option de dessin au pixel.

Piskelapp.com

On commence par le meilleur, car en terme d’image, on peut créer des animations au pixel qui vont prendre un minimum de mémoire sur une application de jeu par exemple.

Dessin au pixel 1

On aura donc une grande facilité à créer une animation comme celle qui suit :

On pourra se référer la fiche : Créer une animation en pixel et sauvegarde en GIF qui explique plus en détail cet outil.

Piq.codeus.net/draw

Cet outil en ligne est assez sophistiqué, même si on ne traite que du pixel. On pourrait même dire que c’est le photoshop du dessin au pixel, car il y a déjà une notion de calque, ce qui va faciliter grandement l’élaboration du dessin. De plus, les nombreuses options disponibles permettront un rendu de dessin optimum.

Dessin au pixel 2

Si on est doué, on pourra vraiment réaliser de petite oeuvre numérique de qualité. Dans mon cas, mon essai n’est pas concluant. Dommage qu’on ne puisse pas importer des photos et les retoucher avec cet outil.

Pixieengine.com/pixel-editor

Dessin au pixel 3 en gif

Avec cet outil, on est plutôt dans le spartiate ou le minimalisme, en fait on revient à la source de l’édition de pixel avec très peu d’options. On prendra soin de bien définir la taille du dessin. En effet,  si on commence à dessiner avec un dessin de 16X16 pixels, c’est un peu petit.

Sur la gauche voilà une animation qui fait un peu mal aux yeux qui permet de résumer un peu ce qu’on peut faire avec cet outil

L’avantage de cet outil c’est qu’on peut importer une image et la modifier.  Attention toutefois à ne pas importer des images trop grosses sous peine de blocage.

Makepixelart.com

Cet outil est encore plus simple d’usage, il faudra donc passer un peu plus de temps pour faire un truc assez valable. L’avantage, c’est qu’on peut faire une sauvegarde en format PNG ce qui permet de pouvoir faire des dessins avec des zones transparentes (alha) , ce qui sera très utile pour la superposition d’image.

Dessin au pixel 4

 

Make8bitart.com

Cet outil en ligne est encore plus simple d’usage et la simplicité implique aussi un résultat très simple, comme son non l’indique on a le droit à 8bits en terme de couleur soit 256 couleurs plus la couleur alpha qui permet l’option transparent. On appréciera le grand espace disponible pour faire des

Dessin au pixel 5

Avec l’outil on a le droit au minimum : la pipette, le remplissage et le crayon avec une taille variable. Avec un peu de patience, on pourra faire un truc simple et bien meilleur que ce que j’ai réalisé pour le test.

Un sujet voisin le Favicon

Un favicon, c’est une photo « iconisée » (extension en .ico) que vous trouvez la plupart du temps devant un url. Cette « photo » est d’une dimension petite de 16X16 pixels.  Vu la petitesse de la photo, on peut vraiment créer un favicon grâce aux outils que je viens de décrire ci-dessus.

Vous pourrez donc aussi consulter la liste de 10 outils qui permettent de créer des favicons.

exemple de favicon pixel

Conclusion : malgré la prolifération des mémoires et des images de 20 millions de pixels, il existe toujours un créneau pour la création d’image en pixel. Cet univers appartient surtout à la section des icones qu’on voit dans les logiciels et les jeux vidéos. Noramlement une image en pixel doit être sauvegardée en format bitmap, ou PNG, mais pas en JPG qui a une facheuse tendance à compresser les images. 

 

 

 

 

Transformer une photo en emoji

Une petite brève avant de partir en weekend : le service en ligne  image 2 emoji.com offre la transformation de votre photo en un ensemble d’icones emoji.  Pour éviter un grand discours, voilà ce qu’on peut faire (avant après).

Thierry Roget en emoji

Ça ne sert pas à grand chose, mais c’est fun. Si on fait un zoom sur la photo transformée, on pourra trouver les figurines emoji très connu des fanatique de jeu japonais.

Après transformation à vous ensuite de récupérer l’image et de la rogner pour arriver à créer un avatar de 400X400 pixels, ce qui est un peu juste pour le web.

Pour ceux qui ne savant pas ce qu’est un emoji :

Emoji (prononcé [emod?i]) est le terme japonais qui désigne les émoticônes utilisées dans les messages électroniques et les pages web japonaises. Signifiant à l’origine pictogramme, le mot emoji signifie littéralement « image » (e) + « lettre » (moji). Ces caractères sont utilisés de la même façon que les émoticônes ASCII. 

source wikipedia

http://www.image2emoji.com

Pour aller plus loin :

Dans le même genre nous avons aussi les favicons et vous avez aussi des services de de création de mosaique, sans oublier les transformations de photos en code ASCII dont j’ai déjà testé 12 services. N’oubliez pas non plus tous les services de création d’AVATAR en ligne où j’en compte déjà presque 30 services.  ha! et bien sûr le création de GRAVATAR

Pin It on Pinterest