Comment empêcher les requêtes favicon.ico?

551

Je n'ai pas de favicon.ico, mais IE en fait toujours la demande.

Est-il possible d'empêcher le navigateur de faire une demande de favicon depuis mon site? Peut-être un peu de META-TAG dans l'en-tête HTML?

favicon Daniel Silveira
la source
21
+1 bonne question mais il semble que la solution la plus simple consiste simplement à ajouter un favicon valide :-) ce n'est sûrement qu'un travail d'une minute et votre site a l'air plus professionnel tout de suite?
Matt Wilko
4
Vous pouvez également avoir un fichier favicon.ico vide. Cela arrêtera les requêtes (après la première), mais n'entraînera pas le navigateur à rendre un favicon vide où il rend généralement quelle que soit son icône par défaut.
mxcl
38
Je dois dire que je suis entièrement d'accord avec le point implicite du questionneur: dans quel but quelque chose de plus serait-il rendu obligatoire ? et en outre, comment se fait-il que nous ne pouvons pas simplement ajouter des métadonnées à la réponse en disant "se comportent exactement comme si vous aviez demandé un favicon.ico et obtenu un 404, mais ne faites pas réellement la demande et ne demandez pas plus avant cette page change ".
Daniel
36
C'est une telle douleur. J'ai un webservice qui ne sert que JSON et n'a même pas la capacité de base de servir des fichiers sans quelques modifications (pour commencer, chaque méthode nécessite un jeton d'authentification pour éviter un 401/403). J'enregistre les demandes ayant échoué afin de pouvoir les analyser plus tard - les journaux sont constamment inondés de demandes de favicon.
Basic
3
Nous sommes en 2015. Des nouvelles à ce sujet?
Jonathan Prates

Réponses:

575

Je dirai d'abord qu'avoir un favicon dans une page Web est une bonne chose (normalement).

Cependant, ce n'est pas toujours souhaité et parfois les développeurs ont besoin d'un moyen d'éviter la charge utile supplémentaire. Par exemple, un IFRAME demanderait un favicon sans le montrer. Pire encore, dans Chrome et Android, un IFRAME générera 3 demandes de favicons:

"GET /favicon.ico HTTP/1.1" 404 183
"GET /apple-touch-icon-precomposed.png HTTP/1.1" 404 197
"GET /apple-touch-icon.png HTTP/1.1" 404 189

Les éléments suivants utilisent l'URI de données et peuvent être utilisés pour éviter les fausses demandes de favicon:

<link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">

Pour les références, voir ici:

Le bug / comportement de Chrome sera probablement corrigé dans les prochaines versions.

Voici la soumission de bug pour que vous puissiez voter:

MISE À JOUR 1:

D'après les commentaires (jpic), il semble que Firefox> = 25 n'aime plus la syntaxe ci-dessus. J'ai testé sur Firefox 27 et cela ne fonctionne pas alors qu'il fonctionne toujours sur Webkit / Chrome.

Voici donc le nouveau qui devrait couvrir tous les navigateurs récents. J'ai testé Safari, Chrome et Firefox:

<link rel="icon" href="data:;base64,=">

J'ai omis le nom de "raccourci" de la valeur d'attribut "rel" car ce n'est que pour les anciens IE et les versions d'IE <8 n'aiment pas non plus les dataURI. Non testé sur IE8.

MISE À JOUR 2:

Si vous avez besoin que votre document soit validé par rapport à HTML5, utilisez plutôt ceci:

<link rel="icon" href="data:;base64,iVBORw0KGgo=">
Diego Perini
la source
1
Brillant. Je dois deviner le fait que vous avez obtenu si peu de votes a à voir uniquement avec le fait que plusieurs années se sont écoulées depuis la question, et les réponses moins intelligentes ont eu plus de temps pour recueillir des votes.
iconoclaste
21
Votre UPDATE 2 a eu des problèmes avec Lollipop ... l'ajout <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">semble résoudre le problème.
Alko
2
Si je l'ai bien compris, je peux l'ouvrir data:image/png;base64,iVBORw0KGgo=dans le navigateur, l'enregistrer comme favicon.icoaka. fichier PNG vide et stockez-le dans la racine du site Web. Droite?
Martin
3
@Alko Ce fichier PNG vide n'est toujours pas valide. S'il s'agit simplement de créer une URL de données décrivant un fichier vide, utilisez: <link rel = "icon" href = "data:,">
vog
2
Les navigateurs ont tendance à demander le favicon même s'il n'y a aucune référence dans le fichier index.html, alors comment cette solution empêcherait-elle cela? Plus précisément, j'ai vu Firefox être très agressif quant à sa demande dès que vous visitez un domaine. D'autres navigateurs peuvent le faire plus tard, peut-être après que le fichier d'index a chargé l'en-tête (quelqu'un qui a plus de connaissances sur les internes des navigateurs, veuillez commenter). Ne pas avoir de favicon a des effets secondaires potentiels, il suffit de google, ou: stackoverflow.com/questions/4269695/…
juanheyns
131

Ajoutez simplement la ligne suivante à la <head>section de votre fichier HTML:

<link rel="icon" href="data:,">

Caractéristiques de cette solution:

  • HTML5 100% valide
  • très court
  • n'entraîne aucune bizarrerie à partir d'IE 8 et plus
  • ne fait pas interpréter le code HTML actuel par le navigateur comme un favicon (ce qui serait le cas avec href="#")
vog
la source
4
Si vous essayez simplement de fermer Chrome Devtools sur un projet local, c'est de loin la façon la plus simple et la plus propre de procéder.
Andrew
Veuillez développer ceci. Dois-je simplement l'inclure dans mon fichier HTML pour arrêter la demande de favicon?
Aakash Verma
2
@AakashVerma Oui, c'est tout. Rien d'autre n'est nécessaire. (Sauf si votre site doit prendre en charge Internet Explorer 8 ou une version antérieure.) J'ai amélioré ma réponse en conséquence.
VOG
@asynts Qu'entendez-vous par reserves space?
mvorisek
@Andrew Quel est le problème que Chrome DevTools a avec cette solution?
Flinsch
47

Je crois que j'ai vu ça (Je ne l'ai pas testé ou utilisé personnellement cependant):

<link rel="shortcut icon" href="#" />

Quelqu'un avait une expérience similaire?

ÉDITER:

Je viens de tester l'extrait ci-dessus et lors d'un rafraîchissement complet forcé, aucune demande de favicon n'a été vue dans Fiddler. J'ai testé contre IE8 (mode Compat comme les normes IE7) et FF 3.6.

mlhDev
la source
1
mes tests indiquent également que cette astuce fonctionne. Cependant, j'aurais le hreflien vers une ressource statique (mise en cache) que vous avez déjà chargée (par exemple, css ou fichier de script) - pour vous assurer qu'une page dynamique (non mise en cache) ne soit pas demandée deux fois. (Juste pour être sûr car href="#"pointe techniquement vers la page Web actuelle).
Már Örlygsson
2
J'ai essayé dans Safari. La demande de favicon apparaît à nouveau sur la page d'hébergement.
Morgan Cheng
27
Je ne suggérerais pas cela, car cela fait que le navigateur (Safari5 / Mac, peut-être d'autres aussi) demande deux fois la page Web au serveur.
Manav
2
@Manav Ce n'est plus le cas dans Safari6 / Mac.
Marcel
2
BOOM CECI! Merci: D maintenant, je ne verrai pas cette erreur gênante, jusqu'à ce que j'arrive enfin à faire cette icône hehe.
Leon Gaban
39

Tu ne peux pas. Tout ce que vous pouvez faire est de rendre cette image aussi petite que possible et de définir des en-têtes d'invalidation du cache ( Expires, Cache-Control) dans le futur. Voici ce que Yahoo! a à dire sur les demandes favicon.ico.

Ionuț G. Stan
la source
7
Il a dit qu'il n'avait pas de favicon. Ils ne deviennent pas beaucoup plus petits que ça. Et cela n'a aucun sens de mettre en cache des fichiers inexistants.
innaM
16
S'il n'a pas de favicon, alors il devrait en faire un, c'était mon point. Il n'y a pas de meilleure solution que celle-ci. N'est-ce pas logique? S'il n'y a aucune possibilité d'arrêter les demandes, à moins que vous n'utilisiez la mise en cache, que faites-vous?
Ionuț G. Stan
5

Vous pouvez utiliser .htaccess ou des directives serveur pour refuser l'accès à favicon.ico, mais le serveur enverra une réponse d'accès refusé au navigateur et cela ralentit toujours l'accès à la page.

Vous pouvez arrêter le navigateur demandant favicon.ico lorsqu'un utilisateur revient sur votre site, en le faisant rester dans le cache du navigateur.

Tout d'abord, fournissez une petite image favicon.ico, qui peut être vierge, mais aussi petite que possible. J'en ai fait un noir et blanc de moins de 200 octets. Ensuite, à l'aide de .htaccess ou de directives serveur, définissez l'en-tête Expires du fichier un mois ou deux plus tard. Lorsque le même utilisateur revient sur votre site, il sera chargé à partir du cache du navigateur et aucune demande ne sera envoyée à votre site. Plus de 404 dans les journaux du serveur.

Si vous contrôlez un serveur Apache complet ou peut-être un serveur virtuel, vous pouvez le faire: -

Si la racine du document serveur est / var / www / html, ajoutez-la à /etc/httpd/conf/httpd.conf:-

Alias /favicon.ico "/var/www/html/favicon.ico"
<Directory "/var/www/html">
    <Files favicon.ico>
       ExpiresActive On
       ExpiresDefault "access plus 1 month"
    </Files>
</Directory>

Ensuite, un seul favicon.ico fonctionnera pour tous les sites hébergés virtuels puisque vous l'aliasez. Il sera tiré du cache du navigateur pendant un mois après la visite des utilisateurs.

Pour .htaccess, cela fonctionnerait (non vérifié par moi): -

AddType image/x-icon .ico
ExpiresActive On
ExpiresByType image/x-icon "access plus 1 month"
Anon1
la source
N'oubliez pas d'activer le module: ~ / etc / apache2 # a2enmod expires && service apache2 restart
Sino Boeckmann
4

Une solution très simple est de mettre le code ci-dessous dans votre .htaccess. J'ai eu le même problème et cela résout mon problème.

<IfModule mod_alias.c>
    RedirectMatch 403 favicon.ico
</IfModule>

Référence: http://perishablepress.com/block-favicon-url-404-requests/

Marcio Mazzucato
la source
L'article lié à partir d'ici est très bon, mais je pense que la syntaxe de la réponse est incorrecte.
Erica Kane
4

si vous utilisez nginx 

# skip favicon.ico
#
location = /favicon.ico {
    access_log off;
    return 204;
}
Vincent-cm
la source
Cela n'empêche pas la demande, mais je l'aime comme alternative.
QasimK
Bien sûr, si vous pouvez contrôler le serveur Web.
jbruni
1

Dans Node.js,

res.writeHead(200, {'Content-Type': 'text/plain', 'Link': 'rel="shortcut icon" href="#"'} );
Visv M
la source
0

D'après notre expérience, Apache étant tombé à la demande de favicon.ico, nous avons commenté des en-têtes supplémentaires dans le fichier .htaccess.

Par exemple, nous avons défini l'en-tête X-XSS-Protection "1; mode = block"

... mais nous avions oublié d'avance les en-têtes sudo a2enmod. Commenter les en-têtes supplémentaires envoyés a résolu notre problème favicon.ico.

Nous avons également configuré plusieurs hôtes virtuels pour le développement et n'avons échoué qu'avec 500 erreurs de serveur interne lors de l'utilisation de http: // localhost et de la récupération de /favicon.ico. Si vous exécutez "curl -v http: //localhost/favicon.ico " et recevez un avertissement indiquant que le nom d'hôte n'est pas dans le cache du résolveur ou quelque chose à cet effet, vous pouvez rencontrer des problèmes.

Cela pourrait être aussi simple que de ne pas aller chercher (nous avons essayé cela et cela n'a pas fonctionné, car notre cause racine était différente) ou de chercher des directives dans apache2.conf ou .htaccess qui pourraient provoquer d'étranges 500 messages d'erreur de serveur interne.

Nous avons constaté qu'il avait échoué si rapidement qu'il n'y avait rien d'utile dans les journaux d'erreurs d'Apache et avons passé une matinée entière à changer de petites choses ici et là jusqu'à ce que nous résolvions le problème de la définition d'en-têtes supplémentaires alors que nous avions oublié de charger mod_headers!

J. Declan Young
la source
0

Parfois, cette erreur survient, lorsque HTML contient du code commenté et que le navigateur essaie de rechercher quelque chose. Comme dans mon cas, j'avais commenté le code d'un formulaire Web en flacon et je l'obtenais.

Après avoir passé 2 heures, je l'ai corrigé de la manière suivante:

1) J'ai créé un nouvel environnement python, puis il a lancé une erreur sur la ligne HTML commentée, avant cela, je n'ai reçu que l'erreur 'GET /favicon.ico HTTP / 1.1 "404'

2) Parfois, quand j'avais un code en double, comme un fichier python existant avec le même nom, alors je voyais aussi cette erreur, essayez de les supprimer aussi

ohsoifelse
la source
-10

Vous pourriez utiliser

<link rel="shortcut icon" href="http://localhost/" />

De cette façon, il ne sera pas réellement demandé au serveur.

Josh
la source
1
Il semble que certains navigateurs puissent envoyer des messages d'erreur effrayants.Vous devrez également faire attention à l'utilisation de cette astuce sur les pages qui pourraient être servies via HTTPS.
Brighid McDonnell
6
Utiliser about: blank c'est mieux.
Luke