[CS3] Mettre une icône dans les favoris - FAVICON [Article] [Résolu]

SPM777 · 26/05/2007, 11h26

Bonjour,

Je voudrais mettre un petit sigle devant le nom de mon site, lorsque je suis dans les favoris.
Je voudrais mettre un petit poisson à la place du sigle internet, de façon à différencier mon site des autres lorsque les gens ont placé mon site dans leurs FAVORIS...mais je ne sais pas comment faire ?

Merci pour votre aide, je ne sais pas du tout par où commencer ?

Bonne journée!

arnolem · 26/05/2007, 16h11

Création d'icone devant l'adresse de la page

Le but de ce tutoriel est de vous permettre d'ajouter l'icône de votre choix devant la barre d'adresse de votre site internet ainsi que devant le nom de votre site une fois ajouté dans vos favoris.

Création simple de l'icône

Avant de chercher à mettre l'icône sur votre site web, il faut tout d'abord créer un symbole ou bien le logo de votre société ou de votre site en fichier icône.
Il est possible d'utiliser des logiciels payant tel que Gif Movie Gear mais nous allons voir une solution totalement gratuite.

Utilisation de Paint (Microsoft) fourni sous Windows afin de créer notre icône de base.
Astuce : si vous cherchez encore ou trouver Paint dans windows, il vous suffit de faire : Démarrer > Exécuter > taper : mspaint puis OK

Avant de commencer, nous allons créer un environnement propice à la création d'icône 16x16 utilisé pour cet exercice.
Réduisez l'espace de travail : Image > Attributs ...
Puis modifier les dimensions en 16 largeur / 16 hauteur
Ensuite grossissez le carré : Affichage > Zoom > Grande Taille

Maintenant, amusez vous à faire un beau dessin de ce carré blanc en coloriant point par point votre futur logo.

Il ne reste plus qu'à enregistrer ce logo au format icone. Pour cela, faites : Fichier > Enregistrez sous > nommez le favicon.bmp et choisissez de préférence le format bitmap 256 couleurs.

Vous remarquez que ceux fichier n'est pas au format icône mais bitmap, en fait, dans autre exemple ça ne change rien car nous n'avons pas joué avec la transparence par exemple.
Renommé manuellement le fichier favicon.bmp en favicon.ico et le tour est joué.
Astuce : Il se peut que votre image ne se nomme pas favicon.bmp mais favicon tout cours ! Dans se cas, c'est que votre windows n'est pas configuré pour vous permettre de modifier des extensions de fichier. Pour parer au problème, ouvre le poste de travail puis faites : Outils > Option des dossiers > Affichage > puis décocher la case [] masquer les extensions de fichier dont le type est connu.

Ajout de l'icône au site web

Maintenant que vous disposez d'un fichier favicon.ico qui à pour dimensions 16x16. Il est nécessaire de le copier à la racine de votre site pour simplifier les démarches. Certain hébergeur on intégré la fonction dans leur service afin que vous n'ayez rien d'autre à faire, c'est le cas de Free.
Pour les autres et dans le cas le plus courant, vous etes obligés de spécifier dans vos pages, l'icône qui est utilisé pour votre site. Pour cela, il suffit d'ajouter la ligne suivante entre les balises <HEAD></HEAD> de vos pages internet:

Astuce : vous avez la possibilité d'utiliser un icône présent sur un autre site internet ou bien présent dans un dossier de votre site même s'il ne se nomme pas favicon.ico, pour cela, il suffit de modifier la partie : href="favicon.ico" par le lien complet pointant vers le fichier icône.

J'espère avoir été clair

SPM777 · 29/05/2007, 23h11

Merci, j'ai suivi vos instructions. Logo impeccable, renommé, puis mis sur la racine du site, puis code collé dans ma page...mais il ne s'affiche pas !!
j'ai encore besoin d'aide..pourquoi je ne le vois pas ????merci..

arnolem · 29/05/2007, 23h37

donne nous le lien vers ton site
merci

SPM777 · 30/05/2007, 16h13

www.salutpourlemonde.com

arnolem · 30/05/2007, 17h42

ça marche très bien.
Les favicons fonctionnent parfaitement sur firefox.
Si tu as internet explorer 6.0, je crois qu'il faut ajouter le site à tes favoris

SPM777 · 31/05/2007, 14h24

MERCI; mais j'ai ajouté le site aux favoris et je ne vois toujours l'icone...d'ailleurs je n'ai aucune icone (style air france, michelin...) je suis sur internet 6, mais il ya peut-être une case à décocher qq part ???

Toi tu vois l'icone de la petite croix à côté de l'URL ?

Merci de tes réponses.

arnolem · 31/05/2007, 18h06

oui, sur firefox, j'ai bien la croix

Ouija33 · 14/11/2007, 15h37

même chose pour moi, sous firefox c'est nickel mais sous IE 6 ou 7, nada...

titiweb · 25/01/2008, 15h40

Bonjour,

Le souci chez mois ses le transfer de mon logo, j'ai suivis tous les démarche trouvée sur ce forum (code standart ou non, ico, png,) et rien ne marche sous IE et FF, mes c'est normal que lorseque je trensffair l'icon favicon.ico sure le serveur que l'icone passe automatiquement en icone qui na pas de programme dissponible pour l'ouvrrire.

Mon ftp est FTP Expert, lia t'il une facon de remédier a ce problème?
Vient t'il de la?

Merci pour vos réponces

titiweb

arnolem · 25/01/2008, 16h43

Désolé, je n'ai rien compris.

Il faut mettre ton fichier (*.ico) sur le serveur et modifier ta page html.

titiweb · 25/01/2008, 17h51

Bonjour,

Alors je vais essayer de mieux m’expliquer
Je transfère mon favicon et ma page nommé index avec le code sur le serveur avec FTP expres a la racine de mon site.

Pour se faire, je sélectionne la page dans la fenêtre de gauche et la transfère dans celle de droite qui représente mon espace web.La, pas de problème, l’icon IE est présente des deux cotés.

Idem pour mon ico mais la, après le transfère sur le serveur, donc la fenêtre de droite, l’icône s'est changé en icône comme celle-ci,

Voila pour les codes.Je les ai placés et essayés pour IE - FF un par un et les deux également comme ceci

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<link rel="shortcut icon" type="image/x-icon" href="http://www.minigolf.be/favicon.ico"; />
<link rel="icon" type="image/png" href="http://www.minigolf.be/favicon.png"; />

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<link rel="icon" type="image/png" href=http://minigolf.be/favicon.png />

avec une image 'png' qui elle gardais son icone une fois transféré

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<link rel="icon" type="image/png" href="favicon.png" />

et j'an passe, bien entendut entre les balises <head></head>
A chaque fois, j'ai vidé le cache, mia en favoris, réactualiser la page et tous et tous et rien a faire d'ou ma question, n'est-ce pas ce fameux changement d'icone après le transfère sur le serveur? Si ça peut influencer votre réponse, je pence ne pas l'avoir écrit mais l'espace web m'est imposé et je ne sais rien faire d'autre que d'y mettre le site, j'utilise comme éditeur html Frontpege, http://www.minigolf.be

Merci pour votre réponce

titiweb

arnolem · 25/01/2008, 18h32

ce n'est pas un problème si tu ne vois pas l'icone avec le bon dessin

titiweb · 25/01/2008, 19h52

Citation:

Envoyé par arnolem

ce n'est pas un problème si tu ne vois pas l'icone avec le bon dessin

Merci,

Citation:

Astuce : vous avez la possibilité d'utiliser un icône présent sur un autre site internet ou bien présent dans un dossier de votre site même s'il ne se nomme pas favicon.ico, pour cela, il suffit de modifier la partie : href="favicon.ico" par le lien complet pointant vers le fichier icône.

là, je patauge un max. J'ai fait celle-la également mes rien a faire. Pour quelque chose de simple à accomplir comme indique mes nombreuses recherches sur les forums. La création de mon icon offer est validé par de nombreux sites. Beaucoup d' utilisateurs butent dessus. c'est pas croyable! J'ai lu quasi tous les postes de se forum. C'est le seul qui affiche le plus de cas résoluts et je reste en rade malgré tout. c'est assez frustrant.

je ne vois vraiment plus quoi faire pour coller se

de favicon. a sa soulage

sure mon url.

Enfin si quelqu'un a encore une petite idée, c'est avec plaisir que je le lirai.

Merci beaucoup

kais derouiche · 25/01/2009, 17h06

Bonjour,
j'ai ajouté la ligne de code suivante dans mon master page comme a été décrit dans l'explication,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<head>
<link rel="SHORTCUT ICON" href="http://www.ethnocom.com/ethnocom.ico" /> 
</head>

quand je fait des testes locaux l'icone aparait très bien!!!
mais lors de ma publication il n'apparait pas

(
j'ai pas copmris pkoi !!!
merci d'avance

HiRoN · 25/01/2009, 22h52

Salut,

Avec :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

<link rel="SHORTCUT ICON" href="img/favicon.ico" />

Cela fonctionne sous FF 2/3, IE7, Safari 3.x, Google Chrome (quand site en favori), Opera 9.x (je n'ai pas testé sous ie6)

titiweb · 28/01/2009, 15h31

Citation:

Envoyé par kais derouiche

Bonjour,
j'ai ajouté la ligne de code suivante dans mon master page comme a été décrit dans l'explication,

<head>
<link rel="SHORTCUT ICON" href="http://www.ethnocom.com/ethnocom.ico" />
</head>

quand je fait des testes locaux l'icone aparait très bien!!!
mais lors de ma publication il n'apparait pas

(
j'ai pas copmris pkoi !!!
merci d'avance

Salut,

http://www.dailymotion.com/video/x4k...vicon_business

Tres bien.

titiweb · 01/07/2009, 00h19

Bonjour a tous

Et bien voila on ma confier un autre espace ou mètre le site avec beaucoup plus de possibilités, et mon favicon es la sans problème sur IE et les favori de Mozilla, vau mieux tard que jamais, comme coi il ne faux jamais désespérer

A Bientôt

26/05/2007, 11h26	#1
SPM777 Invité régulier Inscription : février 2007 Messages : 25 Détails du profil Informations forums : Inscription : février 2007 Messages : 25 Points : 6 Points : 6	Mettre une icône dans les favoris - FAVICON Bonjour, Je voudrais mettre un petit sigle devant le nom de mon site, lorsque je suis dans les favoris. Je voudrais mettre un petit poisson à la place du sigle internet, de façon à différencier mon site des autres lorsque les gens ont placé mon site dans leurs FAVORIS...mais je ne sais pas comment faire ? Merci pour votre aide, je ne sais pas du tout par où commencer ? Bonne journée!
	00

26/05/2007, 16h11	#2
arnolem Rédacteur/Modérateur Inscription : février 2005 Messages : 2 798 Détails du profil Informations personnelles : Âge : 26 Informations forums : Inscription : février 2005 Messages : 2 798 Points : 2 673 Points : 2 673	Création d'icone devant l'adresse de la page Le but de ce tutoriel est de vous permettre d'ajouter l'icône de votre choix devant la barre d'adresse de votre site internet ainsi que devant le nom de votre site une fois ajouté dans vos favoris. Création simple de l'icône Avant de chercher à mettre l'icône sur votre site web, il faut tout d'abord créer un symbole ou bien le logo de votre société ou de votre site en fichier icône. Il est possible d'utiliser des logiciels payant tel que Gif Movie Gear mais nous allons voir une solution totalement gratuite. Utilisation de Paint (Microsoft) fourni sous Windows afin de créer notre icône de base. Astuce : si vous cherchez encore ou trouver Paint dans windows, il vous suffit de faire : Démarrer > Exécuter > taper : mspaint puis OK Avant de commencer, nous allons créer un environnement propice à la création d'icône 16x16 utilisé pour cet exercice. Réduisez l'espace de travail : Image > Attributs ... Puis modifier les dimensions en 16 largeur / 16 hauteur Ensuite grossissez le carré : Affichage > Zoom > Grande Taille Maintenant, amusez vous à faire un beau dessin de ce carré blanc en coloriant point par point votre futur logo. Il ne reste plus qu'à enregistrer ce logo au format icone. Pour cela, faites : Fichier > Enregistrez sous > nommez le favicon.bmp et choisissez de préférence le format bitmap 256 couleurs. Vous remarquez que ceux fichier n'est pas au format icône mais bitmap, en fait, dans autre exemple ça ne change rien car nous n'avons pas joué avec la transparence par exemple. Renommé manuellement le fichier favicon.bmp en favicon.ico et le tour est joué. Astuce : Il se peut que votre image ne se nomme pas favicon.bmp mais favicon tout cours ! Dans se cas, c'est que votre windows n'est pas configuré pour vous permettre de modifier des extensions de fichier. Pour parer au problème, ouvre le poste de travail puis faites : Outils > Option des dossiers > Affichage > puis décocher la case [] masquer les extensions de fichier dont le type est connu. Ajout de l'icône au site web Maintenant que vous disposez d'un fichier favicon.ico qui à pour dimensions 16x16. Il est nécessaire de le copier à la racine de votre site pour simplifier les démarches. Certain hébergeur on intégré la fonction dans leur service afin que vous n'ayez rien d'autre à faire, c'est le cas de Free. Pour les autres et dans le cas le plus courant, vous etes obligés de spécifier dans vos pages, l'icône qui est utilisé pour votre site. Pour cela, il suffit d'ajouter la ligne suivante entre les balises <HEAD></HEAD> de vos pages internet: Astuce : vous avez la possibilité d'utiliser un icône présent sur un autre site internet ou bien présent dans un dossier de votre site même s'il ne se nomme pas favicon.ico, pour cela, il suffit de modifier la partie : href="favicon.ico" par le lien complet pointant vers le fichier icône. J'espère avoir été clair __________________ Besoin d'un site internet ? Contactez Wixiweb Suivez Moi sur GOOGLE+ Mes articles - Chargée d'étude, aménagement et développement du territoire - Camp de basket - Passion Sans Frontiere -
	00

29/05/2007, 23h11	#3
SPM777 Invité régulier Inscription : février 2007 Messages : 25 Détails du profil Informations forums : Inscription : février 2007 Messages : 25 Points : 6 Points : 6	problème visuel Merci, j'ai suivi vos instructions. Logo impeccable, renommé, puis mis sur la racine du site, puis code collé dans ma page...mais il ne s'affiche pas !! j'ai encore besoin d'aide..pourquoi je ne le vois pas ????merci..
	00

29/05/2007, 23h37	#4
arnolem Rédacteur/Modérateur Inscription : février 2005 Messages : 2 798 Détails du profil Informations personnelles : Âge : 26 Informations forums : Inscription : février 2005 Messages : 2 798 Points : 2 673 Points : 2 673	donne nous le lien vers ton site merci __________________ Besoin d'un site internet ? Contactez Wixiweb Suivez Moi sur GOOGLE+ Mes articles - Chargée d'étude, aménagement et développement du territoire - Camp de basket - Passion Sans Frontiere -
	00

30/05/2007, 17h42	#6
arnolem Rédacteur/Modérateur Inscription : février 2005 Messages : 2 798 Détails du profil Informations personnelles : Âge : 26 Informations forums : Inscription : février 2005 Messages : 2 798 Points : 2 673 Points : 2 673	ça marche très bien. Les favicons fonctionnent parfaitement sur firefox. Si tu as internet explorer 6.0, je crois qu'il faut ajouter le site à tes favoris __________________ Besoin d'un site internet ? Contactez Wixiweb Suivez Moi sur GOOGLE+ Mes articles - Chargée d'étude, aménagement et développement du territoire - Camp de basket - Passion Sans Frontiere -
	00

30/05/2007, 16h13	#5
SPM777 Invité régulier Inscription : février 2007 Messages : 25 Détails du profil Informations forums : Inscription : février 2007 Messages : 25 Points : 6 Points : 6	www.salutpourlemonde.com
	00

31/05/2007, 14h24	#7
SPM777 Invité régulier Inscription : février 2007 Messages : 25 Détails du profil Informations forums : Inscription : février 2007 Messages : 25 Points : 6 Points : 6	MERCI; mais j'ai ajouté le site aux favoris et je ne vois toujours l'icone...d'ailleurs je n'ai aucune icone (style air france, michelin...) je suis sur internet 6, mais il ya peut-être une case à décocher qq part ??? Toi tu vois l'icone de la petite croix à côté de l'URL ? Merci de tes réponses.
	00

31/05/2007, 18h06	#8
arnolem Rédacteur/Modérateur Inscription : février 2005 Messages : 2 798 Détails du profil Informations personnelles : Âge : 26 Informations forums : Inscription : février 2005 Messages : 2 798 Points : 2 673 Points : 2 673	oui, sur firefox, j'ai bien la croix __________________ Besoin d'un site internet ? Contactez Wixiweb Suivez Moi sur GOOGLE+ Mes articles - Chargée d'étude, aménagement et développement du territoire - Camp de basket - Passion Sans Frontiere -
	00

14/11/2007, 15h37	#9
Ouija33 Membre habitué Développeur informatique Inscription : mars 2003 Messages : 201 Détails du profil Informations personnelles : Âge : 33 Informations professionnelles : Activité : Développeur informatique Informations forums : Inscription : mars 2003 Messages : 201 Points : 143 Points : 143	même chose pour moi, sous firefox c'est nickel mais sous IE 6 ou 7, nada... __________________ \\|/ que la force soit avec vous
	00

25/01/2008, 15h40	#10
titiweb Invité régulier Inscription : janvier 2008 Messages : 18 Détails du profil Informations forums : Inscription : janvier 2008 Messages : 18 Points : 9 Points : 9	Bonjour, Le souci chez mois ses le transfer de mon logo, j'ai suivis tous les démarche trouvée sur ce forum (code standart ou non, ico, png,) et rien ne marche sous IE et FF, mes c'est normal que lorseque je trensffair l'icon favicon.ico sure le serveur que l'icone passe automatiquement en icone qui na pas de programme dissponible pour l'ouvrrire. Mon ftp est FTP Expert, lia t'il une facon de remédier a ce problème? Vient t'il de la? Merci pour vos réponces titiweb
	00

25/01/2008, 16h43	#11
arnolem Rédacteur/Modérateur Inscription : février 2005 Messages : 2 798 Détails du profil Informations personnelles : Âge : 26 Informations forums : Inscription : février 2005 Messages : 2 798 Points : 2 673 Points : 2 673	Désolé, je n'ai rien compris. Il faut mettre ton fichier (.ico) sur le serveur et modifier ta page html. __________________ Besoin d'un site internet ? Contactez Wixiweb* Suivez Moi sur GOOGLE+ Mes articles - Chargée d'étude, aménagement et développement du territoire - Camp de basket - Passion Sans Frontiere -
	00

25/01/2008, 18h32	#13
arnolem Rédacteur/Modérateur Inscription : février 2005 Messages : 2 798 Détails du profil Informations personnelles : Âge : 26 Informations forums : Inscription : février 2005 Messages : 2 798 Points : 2 673 Points : 2 673	ce n'est pas un problème si tu ne vois pas l'icone avec le bon dessin __________________ Besoin d'un site internet ? Contactez Wixiweb Suivez Moi sur GOOGLE+ Mes articles - Chargée d'étude, aménagement et développement du territoire - Camp de basket - Passion Sans Frontiere -
	00

25/01/2009, 22h52	#16
HiRoN Membre Expert Développeur Web Inscription : août 2007 Messages : 2 014 Détails du profil Informations personnelles : Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur) Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : août 2007 Messages : 2 014 Points : 2 439 Points : 2 439	Salut, Avec : Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part <link rel="SHORTCUT ICON" href="img/favicon.ico" /> Cela fonctionne sous FF 2/3, IE7, Safari 3.x, Google Chrome (quand site en favori), Opera 9.x (je n'ai pas testé sous ie6) __________________ Pensez à utiliser les ressources disponibles en Dev. Web : (x)HTML : Cours (X)HTML / FAQ (X)HTML CSS : Cours CSS / FAQ CSS / Galerie CSS Javascript : Cours / FAQ / Sources Mon site : HiRoN's Place
	00

01/07/2009, 00h19	#18
titiweb Invité régulier Inscription : janvier 2008 Messages : 18 Détails du profil Informations forums : Inscription : janvier 2008 Messages : 18 Points : 9 Points : 9	Sa marche au poille Bonjour a tous Et bien voila on ma confier un autre espace ou mètre le site avec beaucoup plus de possibilités, et mon favicon es la sans problème sur IE et les favori de Mozilla, vau mieux tard que jamais, comme coi il ne faux jamais désespérer A Bientôt
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email