1668 votes

Comment forcer l'actualisation d'un favicon ?

J'ai une application Grails qui fonctionne localement en utilisant son propre tomcat et je viens de changer le favicon pour un nouveau. Le problème est que je ne peux le voir dans aucun navigateur. L'ancienne favicon s'affiche ou je n'ai pas de favicon du tout, mais pas ma nouvelle favicon. Je ne pense pas qu'il s'agisse d'un problème de Grails en soi, mais plutôt d'un problème de favicons.

Que doit-on faire avec les favicons ? Comment sont-elles censées fonctionner ? J'ai de nombreux signets dans mon navigateur qui ont les mauvaises icônes et ils ne semblent jamais être rafraîchis. Comment puis-je forcer le serveur/navigateur à ne plus les mettre en cache ? Il semble assez stupide de toujours les mettre en cache étant donné qu'elles ne font normalement que 16x16. Pourquoi ne pas simplement les télécharger à chaque visite de la page ? Ce n'est pas exactement une énorme surcharge.

15 votes

La solution acceptée et fortement votée n'est PAS la vraie solution. La vraie raison pour laquelle refresh ne fonctionne pas se trouve dans la solution de cette question : stackoverflow.com/questions/8616016/ --- le cache des icônes est dans un fichier sqlite DB, indépendant du cache du navigateur !

10 votes

La solution acceptée et fortement approuvée est la solution pour la production, ou dois-je écrire un tutoriel pour les utilisateurs sur la façon de vider leur cache de favicon lorsque nous mettons à jour le favicon pour la production ?

2 votes

N'est pas une solution générale. Que faire si vous utilisez l'emplacement par défaut du favicon sans toucher à votre code ? C'est-à-dire qu'un favicon.ico dans votre répertoire de documents.

2230voto

Mark Points 7406

Pour rafraîchir la favicon de votre site, vous pouvez forcer les navigateurs à télécharger une nouvelle version en utilisant la balise link et une chaîne de requête sur votre nom de fichier.
Ceci est particulièrement utile dans les environnements de production pour s'assurer que vos utilisateurs reçoivent la mise à jour.

<link rel="icon" href="http://www.yoursite.com/favicon.ico?v=2" />

39 votes

Cela a fait l'affaire pour moi. J'ai dû enlever type="image/x-icon" de mon code, contrairement à de nombreuses sources. J'ai utilisé un horodatage de modification de fichier pour la fonction v?=2 de la requête.

0 votes

Le navigateur Chrome affiche toujours la mauvaise favicon lorsque la page contenant cette balise de lien est chargée à partir du cache. L'utilisateur doit actualiser manuellement la page, ou la page doit être supprimée du cache avant de la visiter, pour que la favicon soit mise à jour.

10 votes

J'ai constaté que dans certains navigateurs, la favicon ne se mettait pas à jour, à moins que je ne supprime l'historique. Ensuite, le nouveau favicon est enregistré.

874voto

alex Points 2735

Adapté de réponse de lineofbird beloew vous pouvez faire ce qui suit :

  1. Accédez directement à l'URL du favicon dans la barre d'adresse en tapant son adresse. par exemple

    • www.yoursite.com/favicon.ico
    • www.yoursite.com/apple-touch-icon.png
    • etc.
  2. Naviguez vers l'url en appuyant sur Enter

  3. Rafraîchir avec Ctrl + F5

  4. Redémarrez votre navigateur (par exemple, Chrome, Firefox).

0 votes

Pour mémoire, ne faites pas ctr+f5 si vous travaillez dans une VM sous ubuntu, vous siwtch ttys. vous aurez besoin de ctr+f ? où ? est le bon numéro pour récupérer votre gui.

0 votes

Que diriez-vous de shift+F5 ou stackoverflow.com/questions/12633425/

0 votes

J'ai découvert que le simple fait de visiter la favicon dans le navigateur web ( exemple.com/favicon.ico ) et le fait de rafraîchir une fois pour voir la nouvelle favicon a fonctionné dans Chrome.

60voto

Renommez le fichier favicon et ajoutez un en-tête html avec le nouveau nom, tel que :

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

4 votes

Je suppose que le navigateur peut voir si le nom du favicon est le même. Si c'est le cas, il ne demandera pas à le télécharger à nouveau et utilisera celui qui est déjà en cache, mais si vous changez le nom, il supposera qu'il a changé et le demandera au serveur.

0 votes

J'ai eu le même problème avec l'IE8. Il n'utilisait pas le favicon.ico placé dans un sous-dossier. L'ajout de l'attribut "shortcut" a réglé le problème.

3 votes

Ce n'est pas du tout un rafraîchissement, c'est un changement complet.

60voto

Felix Wienberg Points 108

Si vous utilisez PHP, vous pouvez également utiliser le MD5-Hash de la favicon comme chaîne de requête :

<link rel="shortcut icon" href="favicon.ico?v=<?php echo md5_file('favicon.ico') ?>" />

De cette façon, la Favicon sera toujours actualisée lorsqu'elle aura été modifiée.

Comme indiqué dans les commentaires, vous pouvez également utiliser la date de dernière modification au lieu du hachage MD5 pour obtenir le même résultat et économiser un peu sur les performances du serveur :

<link rel="shortcut icon" href="favicon.ico?v=<?php echo filemtime('favicon.ico') ?>" />

2 votes

Sympa, cela évite d'avoir à changer le href à chaque fois que je mets à jour le favicon, cette réponse devrait avoir plus de votes !

47 votes

Le problème avec cette réponse est que vous calculez ce hachage à chaque requête, ce qui est inutile et peut nuire aux performances du site (si les utilisateurs sont nombreux).

1 votes

Ce n'est pas si grave dans les deux sens du terme... une favicon ne représente que quelques kilobytes... Je veux dire, ce ne sera pas moins de stress sur le serveur que d'avoir à serveur le favicon à chaque fois ...

35voto

Maxim Mazin Points 824

Dans Chrome sur Mac OS X, on peut supprimer le fichier avec le cache du favicon.

${user.home}/Library/Application Support/Google/Chrome/Default/Favicons

1 votes

Cette solution a fonctionné pour moi. Pour une raison quelconque, la favicon ne s'actualisait pas avec les méthodes mentionnées ci-dessus, qui ont reçu beaucoup plus de votes. Merci donc à Maxim Mazin. Je voulais seulement me débarrasser d'un ancien favicon qui, je le savais, ne pouvait plus exister sur mon nouvel hôte.

2 votes

Cette approche a également fonctionné pour moi sur Windows, où j'avais supprimé le favicon de mon application, mais où chrome l'affichait toujours. Fermez Chrome, supprimez " C:\Users\ {utilisateur} \AppData\Local\Google\Chrome\User Données \Default\Favicons "puis redémarrez Chome. L'ancien favicon indésirable a disparu.

2 votes

Je n'avais rien sous "Default" mais j'ai fini par trouver cette variation : ${user.home}/Library/Application Support/Google/Chrome/Profile 1/Favicons

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X