Accueil Tutoriels webmasters Insérer un(e) favicon
Insérer un(e) favicon
Niveau :
tout public
- Catégorie : Gestion de contenu - Publié par jeremy-vaucher le 24/03/2009
Une (ou un) favicon sert a embellir un navigateur. Elle est visible à coté de la barre d'adresse mais également dans le gestionnaire des favoris et dans les onglets.
1Créez votre icône
Vous trouverez facilement des favicons sur Internet, mais vous apprécierez sûrement de la créer vous même.
-Attention au format : Vous devez utiliser une image de 16x16 ou 32x32 pixels.
-Votre icône doit être au format .ico pour fonctionner sous différents navigateurs.
Pour transformer votre image.gif en image.ico, vous avez deux possibilités:
-Soit vous utilisez un générateur d'icônes (par exemple : http://www.wikistuce.info/doku.php/favicon)
Une fois générée, enregistrez l'icône sur votre disque dur.
-Soit vous ouvrez votre image.gif et vous l'enregistrez en image.ico
2Enregistrez l'icône
E-monsite vous permet d'héberger des photos et des fichiers.
L'icône récemment créée est au format .ico, elle est donc considérée comme un fichier.
Pour la télécharger, rendez vous dans Site > Stockage Images et fichiers > Vos fichiers
Une fois enregistrée, cliquez insérer sur le fichier en question.
Copiez l'adresse qui se trouve dans le cadre "lien direct".
3Insérez l'icône
Allez dans Configuration > Zones éditables et descendez jusqu'à Balises META supplémentaires.
Insérez (sans ajouter <head></head>, qui est mis d'office) la ligne de code suivante : <link rel="shortcut icon" href="adresse de votre favicon">
A la place de "adresse de votre favicon", insérez le lien direct de votre fichier (voir l'image ci dessus)
Enfin, cliquez sur Enregistrer.
Vous avez désormais votre favicon personnalisée.
Merci à ger-art et à cie-lesbaladins qui ont contribué à la réalisation de ce tutoriel.
Commentaires
Posté par geyderther - le 01/04/2009
ça fonctionne pas, .ico impossible à charger +autre format ne donne rien, code obsolète ?
Posté par jeremy-vaucher - le 03/04/2009
Tout fonctionne mais il faut insérer la favicon dans "Espace de stockages > Fichiers" (et non "Images")
Posté par lylytopstar - le 03/04/2009
hi c'est moi je essaye de l'insère mais sa fonctionne pas et vous cash racom
Posté par ger-art - le 03/04/2009
bonjour,
il y a comme qui dirais un bug dans cette page... il faut apres avoir DL le fichier, recliquer sur "ajouter un fichier" et descendre la souris pour voir apparaitre la liste de fichiers telecharges...
et il faut aussi attendre un peu avant de voir le rajout effectue
Posté par gamerwiietps2 - le 04/04/2009
Merci beaucoup pour ce tuto , grace à lui j'ai réussi à faire ce que je voulait ! MERCI !!!!!!!!!!!
Posté par creamel - le 06/04/2009
merci beaucoup, je viens de le mettre en place, et ça fonctionne,
merci !!
Posté par cuma-alliance-guipry - le 11/04/2009
Depuis le temps que je m'arrache les cheveux pour mettre ce sacré " icône " et voilà enfin un tuto pour le créer et l'intégrer 
Pas si compliqué que ça finalement quand l'on a le mode d'emploi
Merci à vous et si vous avez d'autres idées,je prends
Bonne continuation
Posté par motopassionmcr - le 13/04/2009
Bonsoir
Merci pour ce tuto. J'ai créé mon favicom avec Gimp et enregistré en format Gif.
Ca fonctionne.
Encore merci
Gégé
Posté par medsenhaji - le 14/04/2009
salut a tous les amis bienvenue au site
Posté par mariepourvous - le 16/04/2009
merci beaucoup
Posté par hello-creas - le 19/04/2009
Merci ! ça marche super bien !
Posté par mosaiques2ladyhawke - le 20/04/2009
Bonjour ! Merci ça marche ! Youpi !
C'est simple d'être content dans la vie parfois !
J'ai remarqué que ça fonctionne instantanément sur firefox mais po sur IE ?
pas grave, c'est peut être une question de temps !
en tous cas merci !
Posté par larestanque - le 24/04/2009
Bonjour
C'est génial ! Merci pour tous ces commentaires qui m'ont été utile pour créer mes FAVICONS ! C'est simple finalement, il suffit de s'y pencher et d'être patient ! Ils n'apparaissent pas tous de suite lorsque l'on les enregitre dans le fichier... Au départ, j'ai recommencé l'opération à plusieurs reprises et finalement, je me suis aperçu que j'avais enregistrer plusieurs fois la même choses donc j'ai dû suprimer ensuite le surplus... A bientôt et bonne continuation !
Posté par mickael002 - le 27/04/2009
Impossible ça ne marche pas, j'ai même essayer avec un autre hébergeur de Fichier.
Toujours l'icone de IE.
Posté par patcollet - le 28/04/2009
Super, ca marche
Posté par grimoire-magic - le 10/05/2009
super, j'ai essayé et sa a super bien marché. Très bonne idée de tuto
Posté par sacros - le 11/05/2009
Bonjour à tous,
J'ai mis un peu plus d'une heure, et j'ai réussi.
Ne vous découragez pas. Sur IE8, ? les fichiers se mettaient tout en bas, puis au bout de quatre, ils ne voulaient pas se faire approchés.
J'ai réussi (ou le temps)à les choper. Mais l'adresse est venue sur un autre onglet.
Je l'ai copié là.
Puis la suite normale.
Rien. J'ai fermé la page, pour je l'airéouverte. Et là c'était fait.
C'est pour cela qu'il faut insister.....Bon courage, vous y arriverez.
Cordialement à tous..
sacros
Posté par stmartin-de-valamas-laretappe - le 12/05/2009
Vos explications sont claires et nettes, je n'ai eu aucun problème pour insérer le favicon, encore merci!!!
Posté par paulinel - le 17/05/2009
je comprends rien commetn on met au format .ico (je suis nul en informatique je sais pas si il y a besoin de le precser -___-')
Posté par paulinel - le 17/05/2009
eu moi je bug a la partie inserer un fichier ca me met que le fichier a ete enregistrer avec succes mais auccun fichier ne s'afiche
Posté par anti-travail - le 27/05/2009
Merci beaucoup :D
Ça marche parfaitement!
http://anti-travail.e-monsite.com/accueil.html
Posté par ange-livre - le 03/06/2009
mais comment trouvé l'adresse de l'icone
Posté par oursdebearland - le 19/06/2009
bonjour ! pas moyen d'avoir mon mettre mon favicon mon icône est bien enregistrée mais elle n'apparait pas en final qui peut m'aider? je suis avec Firefox . merci
Posté par dylancorreia - le 23/06/2009
bonjour j'ai pa compris c'es quoi maiplus de truc
[b][img][url][center]
Posté par panik-canada - le 28/06/2009
Super, on peut pas faire plus clair =)
Merci
Posté par team-cobratek - le 29/06/2009
bonjour a tout,
après énormément de manipulation, j'ai trouvé un code qui fonctionne avec Firefox et Internet Exploreur (peut-être d'autre navigateur mais je ne sais pas ^^ et compatible avec IE 8 et 7 mais pas avec les versions antérieurs).
les ligne sont:
<link rel="icon" type="image/png" href="adresse du favicon" />
<!--[if IE]><link rel="shortcut icon" href="adresse du favicon" /><![endif]-->
la première ligne est dédié à Firefox (ou autre) mais laisser [type="image/png"] même si votre favicon est au format *.ico* car moi ça fonctionne très bien
et la deuxième ligne est dédié pour Internet Exploreur (v7 et v8)
bonne continuation
<a href="http://www.team-cobratek.com">
Posté par comitedesjeunesacgm - le 10/07/2009
Merci beaucoup ! On peut vraiment en faire des choses sur ce site !
Merci infiniment !!
Posté par martinpierre - le 15/07/2009
Merci pour ce tutoriel fruit d'un travail collaboratif.
Nota : ça a marché avec Firefox pour l'apparition dans "Mes Fichiers" mais jamais avec ie8. C'est quand même un monde merveilleux le html...
Posté par milobellus - le 30/07/2009
Merci beaucoup ! C'est super !
Posté par wweffansdelawwe - le 04/08/2009
merci pour ce tutoriel.
g mis une favicone sur mon site.
merci beaucoup
Posté par clubbassethound - le 06/08/2009
Bravo pour ce tuto limpide!!
Ca faisait longtemps que je voulais le faire et ca y est: ça marche.
Posté par fccl - le 12/08/2009
c super merci coooooool
Posté par medsein - le 26/08/2009
Super cela marche du premier coup avec firefox ! c'est super clair et facile !
merci pour le truc ! !
Posté par blablablapokemon - le 26/08/2009
C'est super !
Pour l'instant ma favicon ne marche pas mais d'apres certains d'entre vous il faut attendre donc j'attends
Merci ;)
Posté par benoitgeorgespierre - le 27/08/2009
ça fonctionne sur firefox, mais pas sur IE !
Posté par akatsuki-gold - le 29/08/2009
C'est super ! MAis je voudrais savoir comment on en fait un qui bouge ...
Posté par ankaraglamnail - le 02/09/2009
TOP merci. Super facile et depuis le temps que j'en voulais un ... Super contente !
Posté par xaroskarma - le 16/09/2009
bonsoir,
pour créer votre favicon vous devriez aller sur http://www.favicon.cc/
c'est très simple.
il vous suffit de telecharger cotre image puis vous optiendrez un le code vous le copier puis vous inserer a l'endroit indiquer sur ce site et ça marche.
Posté par golfejuan - le 20/10/2009
Bonjour,
C'est nickel, j'ai galéré un peu pour l'adresse du favicon mais ça marche nickel !
ça marche sur firefox mais apparemment pas sur avant browser.
Merci
Posté par platoner - le 21/10/2009
Un grand MERCI, ça marche avec IE et firefox juste faut pas etre pressé pour voir apparaitre le fichier téléchargé. Bravo et encore merci
Posté par latrompette - le 21/10/2009
Cool ce tuto ! merci !
Posté par belleetzenenbio - le 22/10/2009
Super !
Posté par cuisnetouria - le 25/10/2009
merci ç a bien marché
Posté par queen-art - le 27/10/2009
merci beaucoup au debut sa ne marchait car il ne charger pas les .ico mais je l'ai mit sous .gif et sa a marcher super le tuto merci beaucoup
Posté par archi-texture - le 06/11/2009
Bon moi ça ne marche tjs pas!! :(
mon image est bien en .ico
mais quand je veux la télécharger sur le site dans "stockage" ça me dit "upload_err_filetype"
Je sais pas comment faire.
Aidez moi s'il vous plaie.
Posté par archi-texture - le 06/11/2009
Alors comme le dit queen-art, il ne faut pas la mettre en .ico mais .gif
e-monsite ne prend pas en compte le .ico
Merci quand mm pour le tuto
Posté par nintendomino - le 08/11/2009
J'ai réussi à créer une favicon en partie grace à ton tuto.
Mais bon, il y a du avoir une mise à jour depuis la publication de ton tuto, car les fichiers ico. ne sont plus acceptés par e-monsite.
Mais bon, grace au code et au lien que tu as donné au début, j'ai pu générer une favicon en gif animée qui marche très bien (j'ai testé sur Firefox)
Merci quand-même.
Posté par leptitdressingdepat - le 08/11/2009
Bonsoir,
Toute nouvelle sur le site, je suis heureuse qu'il y ait des personnes comme vous pour guider, pas à pas, "les novices" comme moi, avec des mots et des explications simples.Il y a tellement de choses à apprendre...
Mais grâce à vous, j'ai réussi à installer mon petit favicon et je vous en remercie énormément.
Cordialement,
Patydu59.
Ajouter un commentaire :
Veuillez vous connecter afin de poster un commentaire sur ce tutoriel.
