Cocktail Web

Actualité des outils du Web



Faire un favicon: 10 sites pour créer un favicon et mode d’emploi: Maj [realfavicongenerator.net/]

23/02/2014 ( photo ) 13 avis


Un favicon, c’est une photo « iconisée » avec une extension en .ico que vous trouvez la plupart du temps devant un url. Cette « photo » est d’une dimenssion plutôt petite 16X16 pixel, il faudra dont bien choisir la forme de cet icone. 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 favicon 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. Voilà 10 sites qui vous offrent la fabrication d’un favicon à partir d’une photo, d’un logo ou carrément une customisation au pixel.

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, mais ce n’est pas une réussite!

Convertico.org

Ce nouveau site se veut un peu le couteau suisse de la conversion des fichier en .ico, mais il ne marchait pas très bien lors de l’essai. On se contentera donc de la conversion proposé en « homepage » qui consiste à convertir une image  en favicon.

Xiconeditor.com

De loin le plus complet des sites pour créer un .ico et surtout très didactique.

Cursorwiz.com

Avec ce site vous pouvez rapidement créer un fichier .ico de deux tailles et le sauvegarder sur votre pc. Aussi simple que ça.

Favigen.com

Ce site permet, à partir d’un photo, de créer votre favicon en un coup de clic.  Il explique sur la droite comment utiliser ce favicon sur un site internet.

générateur de favicon

Realfavicongenerator.net

Non seulement le site permet de fabriquer les favicon classique, mais il offre aussi des favicon pour android, iphone.

Iconverticons.com

Ce site vous offre plusieurs formats de conversion en PNG pour des dimensions carrées mais il offre également du format en .ico 16×16 et 32×32

fabrication d'icone

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.

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.

exemple de favicon


editpattern.com

Ce site ne vas pas vous créer directement un fichier en .ico, mais il s’agit d’un éditeur de pattern qui vous permet de sauvegarder l’image en format png. Libre à vous ensuite de transformer ce png en .ico

Prodraw.net :Pic-to-icon

Plutôt simple d’utilisation, vous pouvez également choisir d’autres formats que l’extension .ico sur ce service.

_______________________

Une  fois que vous avez enregistré votre ficher *.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= »http://roget.biz/2012.ico » />

Certains thèmes wordpress possèdebnt également l’option d’insertion du favicon

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

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

Étiquettes :




Delicious Sauvegardez sur delicious! 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