18041 sujets

Questions générales et questions de débutants

[Résolu] Favicon ne s'affiche pas, code correct

Bonjour,

Voici mon souci :
J'utilise fréquemment des favicons pour mes différents sites avec le code suivant : 
<link rel="shortcut icon" type="$type-mime-de-mon-image" href="$path/$nomdufavicon.$extension" />

Ce qui, dans le cas d'un exemple concret, donnerait par exemple le classique
<link rel="shortcut icon" type="image/gif" href="favicon.gif" />


D'habitude, tout marche.

Or, pour l'un de mes sites, impossible de l'afficher (j'utilise à temps plein Firefox).
Ce qui est étrange, c'est qu'en local, le favicon apparaît correctement, animé et tout et tout. Mais sur le serveur distant, que je mette un chemin relatif ou absolu ou encore un lien externe, pas moyen de le voir.
J'ai bien entendu essayé en le mettant en favori etc.

J'ai essayé divers formats, animés ou non : JPEG, GIF, ICO, en leur associant les types MIME appropriés chaque fois.. mon path est bon, j'attaque mes images en lien direct dans le navigateur..

Je tourne en rond..
J'ai même vérifié les associations de types MIME de mon serveur mais tout est là. D'ailleurs, tout marche pour les autres sites. Même en copiant-collant le code, au même endroit, à la première ligne du <head>, rien ne marche.



Une idée ?
Merci beaucoup d'avance (je deviens fou ^^)..
Modifié par LordHk (19 Jul 2007 - 08:54)
C'est vrai, ça m'étais sorti de la tête.
Voilà la page en ligne :
(je vais me faire gronder pour mon radicalisme anti-IE temporaire ^^)
I2H2.net, visible uniquement sous FF.
Vous trouverez les favicons (oui, il y en a plusieurs, animés ou non, dans différents types de fichiers, toujours en 16x16) aux adresses suivantes :
favicon.ico
i2h2.gif

Ma css : CSS
Et la css créée en 3 secondes pour bloquer IE Smiley confused : CSS-IE

En espérant vous avoir fourni de quoi pouvoir vous prendre la tête sur mon pb Smiley biggrin

Merci encore.
Ton site est avec des "Frame" donc il faut t'assurer d'insérer le code suivant :
<link rel="shortcut icon" href="favicon.ico" /> ou

<link rel="icon" type="image/png" href="http://www.tonsite.com/favicon.ico" />

dans le 1er frame rencontré (le fichier maître) par le browser (ou copie tout simplement la ligne de code (dans le <head>) sur toutes les pages html qui compose ta page d'accueil).

T'assurer également de placer le fichier favicon.ico (nommé comme tel) dans le root du site.

J'avais déjà rencontrer ce problème auparavant et je l'ai résolu comme ça.

J'espère que ça t'aidera ... Smiley ravi
Salut LordHk et bienvenue sur Alsacreations Smiley smile ,

petite parenthèse en passant :

LordHk a écrit :
(je vais me faire gronder pour mon radicalisme anti-IE temporaire ^^)
I2H2.net, visible uniquement sous FF.


Bah, t'inquiètes pas, on va pas te mattraquer pour ça, même si c'est quand même un peu problématique vu que une fois arrivé sur ton site, si jamais on utilise IE, on tombe sur un message qui dit que le site ne fonctionnes pas avec ce navigateur, autrement dit, tu prive une partie des utilisateurs de visiter ton site. Donc, sur un site comme Alsacréations qui s'évertue à promouvoir l'accessibilité, ça l'fait pas trop quoi Smiley langue

Ca fait à peu près l'effet Jvachez Smiley langue dans le sens inverse.

Sache que même si FF est beaucoup mieux que IE pour pas mal de choses, FF n'est quand même pas non plus le navigateur parfait (de toute façon, la perfection n'existe pas).

De toute façon, même si FF était parfait, il resterait toujours un pourcentage non négligeable de gens qui serviraient de IE pour voyager sur la toile.

Voilà, fin de la parenthèse, je laisse maintenant la place aux autres pour se pencher sur ton problème de favicon. Smiley cligne
sperron a écrit :
Ton site est avec des "Frame"



Euh merci pour le coup de main mais j'utilise pas de frames lol ^^
C'est que des div, d'où la charge de travail (j'aurais pu faire ça en TABLE, TR, TD aussi pendant que j'y étais Smiley ravi )..

Mais merci qd mm c'est vrai que c'est le genre d'oublis qu'on peut facilement faire..

Non, le site n'est qu'une page principale avec des fonctions PHP qui appellent un fichier en include (config.inc.php) sans BDD, les posts sont des readfile en HTM... enfin j'ai essayé d'automatiser ça à ma façon (full codé avec mes ptites mimines et pareil pour le design meme si c'est encore en travaux)..

En espérant mieux vous avoir guidés Smiley biggrin
Merci pour l'attention que vous portez à mon petit pb.

(edit)J'ai oublié de préciser que j'ai utilisé des commentaires conditionnels IE pour atribuer une CSS différente, CSS qui est d'ailleurs temporaire comme je l'ai indiqué, et qui sert à prévenir les utilisateurs d'IE (que je ne compte pas exclure, loin de là) que mon site n'est pas encore prêt pour eux. Toutefois, j'ai décidé ne retirer la valeur "hidden" de l'attribut "visibility" des Div pour que vous puissiez constater l'éternel problème dans le comptage des pixels des bordures et les problèmes de float sous IE.
Je suis d'ailleurs en train de m'atteler à la création de la CSS pour IE Smiley smile
D'autre part, je n'ai jamais dit que FF était parfait Smiley ravi A mon sens, c'est cependant le meilleur des navigateurs imparfaits, mais les goûts et les couleurs ne se discutent pas ^^

Et pour la personne qui me conseille de mettre le favicon à la racine du site, eh bien ce n'est pas obligatoire, heureusement, car j'héberge différents sites sur mon serveur, et ces sites ont leurs favicons respectifs.
Toutefois, tout conseil est bon à prendre mais j'ai déjà effectué le test de placer le favicon à la racine du serveur et toujours rien (j'ai par conséquent remis la favicon d'origine au server root).
Merci pour vos remarques (: (/edit)
Modifié par LordHk (18 Jul 2007 - 10:10)
Bonjour,

J'ai aussi plusieurs sites avec des favicon.ico , je voulais dire à la racine respectif du site concerné.

Je sais que des icons animés ça existe pour les favicon mais je n'en ai jamais vu encore, et je sais aussi que plusieurs navigateurs n'aime pas d'autres extensions que .ico

As-tu une adresse avec un icon animé, j'aimerais voir ça...

Merci !
Bonjour et bienvenue LordHk Smiley smile

Apparemment j'ai des soucis pour charger ton site, je ne sais pas ce qui se passe derrière mais j'ai du quitter la page...

Des favicons animés Smiley eek Pitié pour nos yeux s'il plait...
Alors, d'abord, le lien vers un site où fonctionne un favicon animé :
Pixtyle

Ensuite, @Dominique, favicon animé ne signifie pas forcément favicon de mauvais gout ! Smiley cligne
Je vous vois venir avec à l'esprit les GIF à la JVachez ou les trucs qui clignotent.. non, c'est juste car je manque de place pour afficher "I2H2" dans un carré de 16x16 (:

Enfin, avec ma page, que le favicon soit animé ou non, là n'est pas le problème : il ne s'affiche pas Smiley decu

Je travaille actuellement sur les pages et sur le serveur, peut-être est-ce la source des quelques perturbations sur le site, je vous prie de m'en excuser à l'avance.
Modifié par LordHk (18 Jul 2007 - 15:55)
bonjour,

ton site est bien constitué de frames pourtant :


<frameset rows="100%,*" border="0">
11 <frame src="http://kumo.ws/i2h2ws/v4/" frameborder="0" />
12 <frame frameborder="0" noresize />
13</frameset>

sinon je ne comprends pas grand chose ..!
Alors là ya un souci o.O !!
Ca c'était la V3.. je pige pas comment tu as pu obtenir cette source..

Bon, apparemment il se passe des trucs bizarres..
Voilà mon code entier pour l'index :

index.php

<html>
<head><title>Hideux Hordeux @ Rashgarroth</title>
<link rel="icon" href="http://www.i2h2.net/i2h2.gif" type="image/gif" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15">
<link type="text/css" rel="stylesheet" href="base.css" />
<!--[if IE]>
<link type="text/css" rel="stylesheet" href="base-ie.css" />
<![endif]-->
</head>

<body>
<!--[if IE]>
<h1>Ce site est optimisé pour Firefox 2.0</h1>
<h2>Internet Explorer étant par nature obsolète, il interprète très mal les Feuilles de Style CSS et propose donc un affichage indigne d'un vrai navigateur en décalant 
les div avec attributs "float", en comptant mal les espaces et les largeurs lorsque l'on met des bordures, en alignant le contenu selon son envie, sans respecter la CSS comme
il le devrait. De ce fait, il illustre mal la quantité de travail fournie en présentant un affichage horrible.<br />
Je vous invite par conséquent à visiter <a href="http://mozilla.com">le site de Mozilla</a> pour récupérer Firefox 2.0, autrement plus performant, le temps que je
crée une CSS spécifique à l'affichage sous IE.<br />Merci à vous.</h2>
<br />
<h3>Moëbius</h3>
<![endif]-->

<div id="contour">
<center><div id="hrow"><img src="i2h2ban.png" /></div></center>
<div id="hrow2"><b><u>Actu</u> :</b> Bienvenue à Cosme et Mitsu ! [smile]</div>

<div id="colg">
    <div id="menu">Menu</div>
	<div class="menucontent">
    <a href="http://i2h2.net">Index</a><br />
	<a href="http://kumo.ws/i2h2forum/">Forum</a><br />
	<!--<a href="http://i2h2.net/livredor/">-->Livre d'Or<!--</a>--><br />
	<a href="mailto:moebius@I2H2.NET">Contact</a>
    </div>
</div>


<div id="cold">
    <div class="itemd">
		<div class="titreitemd">Image :</div>
		<div class="menucontent">
		<center><a href="i2group.png" target="_blank" style="margin-left:-5px;"><img src="pic.png" /></center>
		<center>Hideux Hordeux are coming. Be prepared.</a></center>
		</div>
	</div>
	<div class="itemd">
		<div class="titreitemd">Liens :</div>
		<div class="menucontent">
			<a href="http://www.wownightmare.net/guilde/bc.htm" target="_blank">Avancée PVE HL Rashgarroth</a><br />
			<a href="http://www.lootup.com" target="_blank">Lootup</a><br />
		</div>
	</div>
	<div class="itemd">
		<div class="titreitemd">Loots :</div>
		(Exemple [smile]
			<table>
			<tr>
				<td><script src="http://www.poploot.com/popup.php?obj=29988&size=4" type="text/javascript"> </script></td>
				<td><a>La clé du Nexus</a></td>
			</tr>
			<tr>
				<td><script src="http://www.poploot.com/popup.php?obj=29990&size=4" type="text/javascript"> </script></td>
				<td><a>Couronne du soleil</a></td>
			</tr>
			<tr>
				<td><script src="http://www.poploot.com/popup.php?obj=29756&size=4" type="text/javascript"> </script></td>
				<td><a>Gants du héros déchu</a></td>
			</tr>
			</table>
	</div>

</div>

<?php include "config.inc.php"; ?>

<div id="col">
	<div id="post">Dame de Vertu down !!</div>
    <div class="text">
		<?php legend("Shamak","shamak@I2H2.NET","9 juillet 2007","19:40"); ?>
		<?php readfile("damedevertu.htm"); ?>
	</div>
</div>
<div id="col">
	<div id="post">La v4 est arrivée !!</div>
    <div class="text">
		<?php legend("Moëbius","moebius@kumo.ws","4 juillet 2007","18:10"); ?>
		<?php readfile("firstpost.htm"); ?>
	</div>
</div>

<div id="footer">
	Powered by <a href="mailto:moebius@kumo.ws">Moëbius</a> - Hideux Hordeux (i2h2.net). Inspiré de Loots.fr mais aucun plagiat de code. Optimisé pour FireFox 2.0
</div>

</div>
</body>
</html>





et voilà la css qui y est associée : (pas encore optimisée)
base.css

/*** CSS Document ***/
html, body, p{
	margin: 0;
	padding:0;
	}
	
body{
	font-family:Tahoma;
	font-size:10pt;
	text-align: center;
	background-image: url('trame.png');
}

div#hrow{
	position: relative;
	top: -3px;
	left: -3px;
	overflow: hidden;
	width: 800px;
	border: none;
	background: white;
	}

div#hrow2{
	border: none;
	border-top: 1px solid black;
	border-bottom: 1px solid black;
	margin: -3 -3 10 -3;
	background-image: url('titlebar.png');
	background-repeat: no-repeat;
	line-height: 20px;
	}

div#menu{
	margin: -3 -3 3 -3;
	border: none;
	border-bottom: 1px solid black;
	background-image: url('titlemenured.png');
	background-repeat: no-repeat;
	font-weight: bold;
	}

div.titreitemd{
	margin: -3 -3 3 -3;
	border: 1px solid black;
	background-image: url('titlemenured.png');
	background-repeat: no-repeat;
	font-weight: bold;
	}

div.itemd{
	left: -2px;
	margin: 0px;
	margin-left: -2px;
	padding: 2px;
	border: 1px solid black;
	margin-bottom: 25px;
	background: white;
	width: 150px;
	}
	
div#colg{
	top: 0px;
	right: 10px;
	width: 150px;
	height: auto;
	float: left;
	line-height: 20px;
	background: white;
	display: inline;
	}
	
div#cold{
/*	top: 0px; */
	padding: 0px;
	padding-right: 4px;
	left: 10px;
	width: 150px;
	height: auto;
	float: right;
	line-height: 20px;
	border: none;
	display: inline;
	}

div#col{
/*	position: relative;
	top: 0px;*/
	background: white;
	overflow: hidden;
	width: 450px;
	height: auto;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 25px;
	line-height: 20px;
	border-top: none;
	}

div#post{
	margin: -3 -3 3 -3;
	border: none;
	border-bottom: 1px solid black;
	border-top: 1px solid black;
	background-image: url('titlepost.png');
	background-repeat: no-repeat;
	font-weight: bold;
}

div.text{
	position:relative;
	left:15px;
	margin-right:30px;
	padding:10px;	
	border:none;
	text-align: justify;
	padding-bottom: 30px;
	}
		
div{
	padding:3px;
	border:1px solid black;
	text-align: left;
	}
	
div#contour{
	margin-top: 10px;
	border: 1px solid black;
	padding: 3px;
	width: 800px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 20px;
	background: gainsboro;
	background-image: url('i2h2trame.png');
	}

div#footer{
	margin: -4px;
	margin-top: 10px;
	text-align: center;
	font-size: 8pt;
	border-top: 1px solid black;
	background: white;
	}
	
div.menucontent{
	position:relative;
	left: 5px;
	border:none;
	overflow:hidden;
	margin-bottom: 10px;
	}

td{
	font-family:Tahoma;
	font-size:10pt;
	vertical-align: center;
	}
	
a,a:active,a:visited{
	color:black;
	text-decoration:none;
	}

a:hover{
	color: darkgrey;
	text-decoration:underline;
	overflow: hidden;
	}
	
img{
	border:none;
	}


La CSS est déséquilibrée au niveau des colonnes gauche et droite en ce sens que j'ai travaillé sur celle de droite pour permettre le multi-blocs (l'image, les liens) et pas encore sur celle de gauche donc il reste une incohérence à gauche.

Mais je suis sur le cul là, pour la source de la V3.. !
Eurêka !
Merci à tous, et particulièrement à sperron et rafale29 qui m'ont mis sur la voie..

Alors, explication (pourvu que ça serve si ça arrive à qqun d'autre) :

Cette source que l'on voit est due à un Masking Title by Frame, option souvent proposée par les registrar de noms de domaine. En effet, j'ai préféré choisir de toujours afficher "i2h2.net" dans la barre d'adresse au lieu des chemins complets, d'abord pour une raison esthétique, mais aussi car cela représente une toute petite sécurité supplémentaire.
Or, ce Masking Title by Frame génère ses propres balises Meta keywords, Meta descriptions, Title, etc.
Et, par conséquent, s'appropriant le head, elle y garde la priorité sur celui de la page, tout du moins pour les balises concernées.

Mon link de favicon ne figurant pas dans ce masque, et bien youpi tralala, tintin milou. Que dalle. Pas de fav.

Merci beaucoup encore à vous tous, je vais aller modifier ça chez le registrar, d'ici qques dizaines de minutes ça devrait être ok !
Modifié par LordHk (18 Jul 2007 - 17:04)
Sujet clos
Aller à