18041 sujets

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

[Résolu] Favicon pas prise en compte

Modérateur
Ce problème a été résolu.
» Se rendre directement au message de synthèse

Salut à tous,

C'est un truc qui m'exaspère et que je n'arrive pas à comprendre. A chaque fois je me casse les dents sur ce petit détail qui portant a de l'importance. Comment faire "adopter" une favicon par tous les navigateurs...
Raphaël en parle ici : http://www.alsacreations.com/astuce/lire/59-icon-link-rel-favicon-ico-navigateur.html
Il donne même des liens très intéressants comme http://www.favicon.cc/ qui vous permet de générer votre fichier .ico à partir de votre .png.
Le code du head que j'utilise est "pompé" directement dans le code source d'Alsacreations :
<link rel="shortcut icon" href="<?php echo SITE_ROOT ?>favicon.ico" />
<link rel="icon" type="image/x-icon" href="<?php echo SITE_ROOT ?>favicon.ico" />
<link rel="icon" type="image/png" href="<?php echo SITE_ROOT ?>favicon.png" />


ET pourtant, la favicon n'apparaît pas. Ni sur IE 7 - 10, ni sur Firefox, Chrome, ...

En local (sur Wamp installé dans Win7), le png est bien pris en compte par Firefox, Chrome, mais le .ico ne s'affiche pas non plus dans IE.

Cela serait-il dû à mon serveur ?
Petite précision supplémentaire, favicon.ico et favicon.png ne se trouvent pas à la racine du site, mais dans un dossier qui contient les fichiers noyaux du site appelant les icônes.

Merci d'avance pour votre coup de pouce. Smiley smile
Modifié par jojaba (19 Jun 2013 - 08:12)
Administrateur
Bonjour,

il y a un cache parfaitement arbitraire dans les navigateurs, ce serait pas ça ? Genre attendre 2 jours ou créer un nouveau profil Firefox à chaque nouveau test (et l'effacer ensuite...)
salut,
je pense qu'il faut mettre tes favicon dans la racine si non ça ne prendra pas. Perso pour la conversion de fichiers, j'utilise ce site (je ne sais pas si c'est le même que donné par Alsacréations) mais il est bon.
Pour régler les questions de cache, il te suffit de créer des versions différentes à l'appelle de l’icône en ajoutant "?v=x" où x est un chiffre aléatoire.
Modérateur
Felipe a écrit :
il y a un cache parfaitement arbitraire dans les navigateurs, ce serait pas ça ? Genre attendre 2 jours ou créer un nouveau profil Firefox à chaque nouveau test (et l'effacer ensuite...)
Ben je vais attendre alors...
Zelalsan a écrit :
je pense qu'il faut mettre tes favicon dans la racine si non ça ne prendra pas.
Ça, ça ne pourra pas se faire. A moins de créer un sous-domaine, j'aviserai après les deux jours...
Zelalsan a écrit :
Pour régler les questions de cache, il te suffit de créer des versions différentes à l'appelle de l’icône en ajoutant "?v=x" où x est un chiffre aléatoire.
J'ai testé, ça ne fonctionne pas mieux. J'ai également testé en visionnant avec un nouveau profil Firefox, là encore, rien.
Merci. Je reviens ici fin de semaine...
==edit==
Ce que je ne comprends pas c'est que ça fonctionne en local (sur wamp) et pas à distance. Ça ne serait pas dû à mon hébergeur ?
==/edit==

==edit2==
ma favicon en png est en 32x32px
==/edit2==
Modifié par jojaba (16 Jun 2013 - 20:03)
Modérateur
Pas de mise en cache php en place.
Y-a-t-il une autre manière de mettre en cache (apache ?).
Modérateur
Zelalsan a écrit :
Avec ton .htaccess

Dans mon .htaccess à la racine de mon hébergement j'ai juste un ajout d'encodage par défaut, c'est tout :
AddDefaultCharset utf-8

En fait le site se trouve dans un dossier que j'ai nommé /annuaire/, on a donc comme adresse absolue :
http://mon_domaine.fr/annuaire/

Pas de .htaccess dans ce dossier-là.
Modérateur
Bon ça fait 2 jours et toujours pas de favicon d'affichée.
Je pense qu'effectivement il faut la placer à la racine, mais cela n'a aucune utilité en l'occurence puisque j'ai installé le site dans un dossier du domaine que je possède et qu'il m'est impossible de créer de sous-domaine sur cet hébergement.
D'autres pistes à suggérer ?
Est-il utile que je vous donne l'adresse du site ?
Modifié par jojaba (18 Jun 2013 - 21:21)
Modérateur
Stooooooop ! J'ai trouvé !

Au lieu de donner le chemin absolu vers les favicon :
<link rel="shortcut icon" href="<?php echo SITE_ROOT ?>favicon.ico" />
<link rel="icon" type="image/x-icon" href="<?php echo SITE_ROOT ?>favicon.ico" />
<link rel="icon" type="image/png" href="<?php echo SITE_ROOT ?>favicon.png" />

Il suffisait d'indiquer le chemin relatif :
<link rel="shortcut icon" href="favicon.ico" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link rel="icon" type="image/png" href="favicon.png" />


Ça fonctionne sur IE 7 - 10, Chrome et Firefox (dernières versions).
Ouf ! Smiley smile
Modérateur
Petit résumé pour ceux qui sont pressés et veulent rapidement trouver la solution...

1) Créer une icône png de 32x32 ou 16x16 pixels. Personnellement j'utilise Inkscape pour confectionner l'image, c'est un éditeur d'images au formag svg assez facile à utiliser permettant d'exporter les graphismes réalisés au format png.

2) Aller sur http://www.favicon.cc/ et convertir le png en ico. Pour cela, cliquer sur « Import image » puis uploader (envoyer sur le serveur) le png.

3) Le site génère une copie de votre .png au format .ico que vous pouvez télécharger (clic sur « Download Favicon » dans le cadre « Preview ».

4) Ajouter dans la section <head> de votre(vos) page(s) HTML les lignes suivantes :
<link rel="shortcut icon" href="favicon.ico" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link rel="icon" type="image/png" href="favicon.png" />
(Il faut que les favicon soient dans le dossier contenant vos fichiers html)

5) Envoyer tout ce qui a été ajouté/modifié vers votre site.

En principe la favicon devrait être visible immédiatemment sur Internet Explorer 7 - 10, sur Firefox, sur Chrome et probablement sur d'autres navigateurs...
Modifié par jojaba (19 Jun 2013 - 08:09)
Sujet clos
Aller à