Wie kann ich Anfragen von favicon.ico verhindern?

551

Ich habe keine favicon.ico, aber der IE stellt immer eine Anfrage dafür.

Ist es möglich zu verhindern, dass der Browser von meiner Website aus eine Anfrage für das Favicon stellt? Vielleicht etwas META-TAG im HTML-Header?

favicon Daniel Silveira
quelle
21
+1 gute Frage, aber es scheint, als ob die einfachste Lösung darin besteht, nur ein gültiges Favicon hinzuzufügen :-) Dies ist sicherlich ein einminütiger Job und Ihre Website sieht sofort professioneller aus?
Matt Wilko
4
Sie können auch eine leere Datei favicon.ico haben. Dadurch werden die Anforderungen (nach der ersten) gestoppt, der Browser jedoch nicht veranlasst, ein leeres Favicon zu rendern, in dem normalerweise das Standard-Symbol gerendert wird.
mxcl
38
Ich muss sagen , dass ich mit dem Fragestellers impliziten Punkt völlig einverstanden: zu welchem Zweck würde etwas Extra gemacht werden obligatorisch ? und wie kommt es, dass wir der Antwort nicht einfach einige Metadaten hinzufügen können, die sagen: "Verhalten Sie sich genau so, als hätten Sie eine favicon.ico angefordert und eine 404 erhalten. Stellen Sie die Anfrage nur nicht und fragen Sie erst wieder." Diese Seite ändert sich ".
Daniel
36
Das ist so ein Schmerz. Ich habe einen Webservice, der nur JSON bedient und nicht einmal die grundlegende Fähigkeit besitzt, Dateien ohne einige Änderungen zu bedienen (für den Anfang benötigt jede Methode ein Authentifizierungstoken, um ein 401/403 zu vermeiden). Ich protokolliere fehlgeschlagene Anfragen, damit ich sie später analysieren kann. Die Protokolle werden ständig mit Anfragen nach einem Favicon überflutet.
Basic
3
Es ist 2015. Gibt es Neuigkeiten dazu?
Jonathan Prates

Antworten:

575

Ich werde zuerst sagen, dass ein Favicon auf einer Webseite (normalerweise) eine gute Sache ist.

Dies ist jedoch nicht immer erwünscht, und manchmal benötigen Entwickler einen Weg, um die zusätzliche Nutzlast zu vermeiden. Zum Beispiel würde ein IFRAME ein Favicon anfordern, ohne es anzuzeigen. Am schlimmsten ist jedoch, dass in Chrome und Android ein IFRAME drei Anfragen nach Favoriten generiert:

"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

Das Folgende verwendet Daten-URI und kann verwendet werden, um gefälschte Favicon-Anforderungen zu vermeiden:

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

Referenzen finden Sie hier:

Der Chrome-Fehler / das Chrome-Verhalten wird wahrscheinlich in kommenden Versionen behoben.

Hier ist die Fehlerübermittlung, über die Sie abstimmen können:

UPDATE 1:

Aus den Kommentaren (jpic) geht hervor, dass Firefox> = 25 die obige Syntax nicht mehr mag. Ich habe auf Firefox 27 getestet und es funktioniert nicht, solange es noch auf Webkit / Chrome funktioniert.

Hier ist also der neue, der alle aktuellen Browser abdecken sollte. Ich habe Safari, Chrome und Firefox getestet:

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

Ich habe den Namen "Verknüpfung" aus dem Attributwert "rel" weggelassen, da dies nur für ältere IE gilt und Versionen von IE <8 DataURIs ebenfalls nicht mögen. Nicht auf IE8 getestet.

UPDATE 2:

Wenn Sie Ihr Dokument zur Validierung anhand von HTML5 benötigen, verwenden Sie stattdessen Folgendes:

<link rel="icon" href="data:;base64,iVBORw0KGgo=">
Diego Perini
quelle
1
Brillant. Ich muss vermuten, dass die Tatsache, dass Sie so wenige Stimmen erhalten haben, nur damit zu tun hat, dass seit der Frage mehrere Jahre vergangen sind und weniger kluge Antworten mehr Zeit hatten, um Stimmen zu sammeln.
Bilderstürmer
21
Ihr UPDATE 2 hatte Probleme mit Lollipop ... das Hinzufügen <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">scheint das Problem zu lösen.
Alko
2
Wenn ich es richtig verstanden habe, kann ich es data:image/png;base64,iVBORw0KGgo=im Browser öffnen und als favicon.icoaka speichern . Leere PNG-Datei und speichere sie im Website-Stammverzeichnis. Recht?
Martin
3
@Alko Diese leere PNG-Datei ist immer noch ungültig. Wenn es nur darum geht, eine Daten-URL zu erstellen, die eine leere Datei beschreibt, verwenden Sie: <link rel = "icon" href = "data :,">
vog
2
Browser fordern das Favicon in der Regel an, auch wenn die Datei index.html keine Verweise darauf enthält. Wie würde diese Lösung dies verhindern? Insbesondere habe ich gesehen, dass Firefox sehr aggressiv ist, wenn es darum geht, es anzufordern, sobald Sie eine Domain besuchen. Andere Browser tun dies möglicherweise später, möglicherweise nachdem die Indexdatei den Header geladen hat (jemand, der mehr über die Interna von Browsern weiß, kommentiert dies bitte). Kein Favicon zu haben hat mögliche Nebenwirkungen, googeln Sie es einfach oder: stackoverflow.com/questions/4269695/…
juanheyns
131

Fügen Sie einfach die folgende Zeile zum <head>Abschnitt Ihrer HTML-Datei hinzu:

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

Merkmale dieser Lösung:

  • 100% gültiges HTML5
  • sehr kurze
  • Ab IE 8 und älter treten keine Macken auf
  • Der Browser interpretiert den aktuellen HTML-Code nicht als Favicon (was bei href="#") der Fall wäre.
vog
quelle
4
Wenn Sie nur versuchen, Chrome Devtools für ein lokales Projekt zum Schweigen zu bringen, ist dies bei weitem der einfachste und sauberste Weg.
Andrew
Bitte erweitern Sie dies. Muss ich dies nur in meine HTML-Datei aufnehmen, um die Favicon-Anfrage zu stoppen?
Aakash Verma
2
@AakashVerma Ja, das ist alles. Sonst wird nichts benötigt. (Es sei denn, Ihre Website muss Internet Explorer 8 oder älter unterstützen.) Ich habe meine Antwort entsprechend verbessert.
Vog
@asynts Was meinst du damit reserves space?
Mvorisek
@ Andrew Was ist das Problem, das Chrome DevTools mit dieser Lösung hat?
Flinsch
47

Ich glaube ich habe das gesehen (Ich habe es nicht getestet oder persönlich verwendet)::

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

Hat jemand ähnliche Erfahrungen gemacht?

BEARBEITEN:

Ich habe gerade das obige Snippet getestet und bei einer erzwungenen vollständigen Aktualisierung wurden in Fiddler keine Favicon-Anfragen gesehen. Ich habe gegen IE8 (Compat-Modus als IE7-Standard) und FF 3.6 getestet.

mlhDev
quelle
1
Meine Tests zeigen auch, dass dieser Trick funktioniert. Ich hätte jedoch den hrefLink zu einer statischen (zwischengespeicherten) Ressource, die Sie bereits geladen haben (z. B. CSS- oder Skriptdatei), um sicherzustellen, dass eine dynamische (nicht zwischengespeicherte) Seite nicht zweimal angefordert wird. (Nur um sicher zu gehen, da href="#"technisch auf die aktuelle Webseite verwiesen wird).
Már Örlygsson
2
Ich habe es in Safari versucht. Die Favicon-Anfrage trifft erneut auf die Hosting-Seite.
Morgan Cheng
27
Ich würde dies nicht vorschlagen, da der Browser (Safari5 / Mac, möglicherweise auch andere) die Webseite zweimal vom Server anfordern muss.
Manav
2
@ Manav Das ist in Safari6 / Mac nicht mehr der Fall.
Marcel
2
BOOM DIESES! Danke: D jetzt werde ich diesen nervigen Fehler nicht sehen, bis ich endlich dazu komme, dieses Symbol zu machen, hehe.
Leon Gaban
39

Das kannst du nicht. Alles, was Sie tun können, ist, das Bild so klein wie möglich zu machen und einige Cache-Invalidierungs-Header ( Expires, Cache-Control) weit in die Zukunft zu setzen. Hier ist, was Yahoo! muss über favicon.ico Anfragen sagen .

Ionuț G. Stan
quelle
7
Er sagte, er habe kein Favicon. Sie werden nicht viel kleiner als das. Und es macht keinen Sinn, nicht vorhandene Dateien zwischenzuspeichern.
InnaM
16
Wenn er kein Favicon hat, sollte er eines machen, das war mein Punkt. Es gibt keine bessere Lösung als diese. Ist es nicht logisch? Was tun Sie , wenn es keine Möglichkeit gibt, Anforderungen zu stoppen, es sei denn, Sie verwenden Caching?
Ionuț G. Stan
5

Sie können .htaccess- oder Serveranweisungen verwenden, um den Zugriff auf favicon.ico zu verweigern. Der Server sendet jedoch eine Antwort mit verweigertem Zugriff an den Browser, wodurch der Seitenzugriff weiterhin verlangsamt wird.

Sie können den Browser anfordern, favicon.ico anzufordern, wenn ein Benutzer zu Ihrer Site zurückkehrt, indem Sie ihn im Browser-Cache belassen.

Stellen Sie zunächst ein kleines favicon.ico-Bild bereit, das leer, aber so klein wie möglich sein kann. Ich habe eine schwarz-weiße unter 200 Bytes gemacht. Stellen Sie dann mithilfe von .htaccess- oder Server-Anweisungen die Datei Expires-Header ein oder zwei Monate in der Zukunft ein. Wenn derselbe Benutzer zu Ihrer Site zurückkehrt, wird er aus dem Browser-Cache geladen und es wird keine Anfrage an Ihre Site gesendet. Keine weiteren 404 in den Serverprotokollen.

Wenn Sie die Kontrolle über einen vollständigen Apache-Server oder einen virtuellen Server haben, können Sie Folgendes tun:

Wenn das Stammverzeichnis des Serverdokuments "/ var / www / html" lautet, fügen Sie dies zu /etc/httpd/conf/httpd.conf:- hinzu.

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

Dann funktioniert ein einziges favicon.ico für alle virtuell gehosteten Sites, da Sie ein Aliasing durchführen. Es wird einen Monat nach dem Besuch des Benutzers aus dem Browser-Cache gezogen.

Für .htaccess wird berichtet, dass dies funktioniert (nicht von mir überprüft): -

AddType image/x-icon .ico
ExpiresActive On
ExpiresByType image/x-icon "access plus 1 month"
Anon1
quelle
Vergessen Sie nicht, das Modul zu aktivieren: ~ / etc / apache2 # a2enmod läuft ab && service apache2 restart
Sino Boeckmann
4

Eine sehr einfache Lösung ist der folgende Code in Ihrem .htaccess. Ich hatte das gleiche Problem und es löst mein Problem.

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

Referenz: http://perishablepress.com/block-favicon-url-404-requests/

Marcio Mazzucato
quelle
Der von hier verlinkte Artikel ist sehr gut, aber ich glaube, die Syntax in der Antwort ist falsch.
Erica Kane
4

wenn Sie Nginx verwenden 

# skip favicon.ico
#
location = /favicon.ico {
    access_log off;
    return 204;
}
Vincent-cm
quelle
Dies verhindert die Anfrage nicht, aber ich mag es als Alternative.
QasimK
Sicher, wenn Sie den Webserver steuern können.
Jbruni
1

In Node.js,

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

Nach unserer Erfahrung haben wir, als Apache auf Anfrage von favicon.ico umfiel, zusätzliche Header in der .htaccess-Datei auskommentiert.

Zum Beispiel hatten wir den Header X-XSS-Schutz auf "1; mode = block" gesetzt.

... aber wir hatten vorher vergessen, a2enmod-Header zu sudo. Das Kommentieren zusätzlicher gesendeter Header hat unser Problem mit favicon.ico behoben.

Wir hatten auch mehrere virtuelle Hosts für die Entwicklung eingerichtet und sind nur mit 500 Internal Server Error ausgefallen, wenn http: // localhost verwendet und /favicon.ico abgerufen wurde. Wenn Sie "curl -v http: //localhost/favicon.ico " ausführen und eine Warnung erhalten, dass sich der Hostname nicht im Resolver-Cache befindet oder etwas in diesem Sinne, können Probleme auftreten.

Es könnte so einfach sein, wie nicht abzurufen (wir haben das versucht und es hat nicht funktioniert, weil unsere Grundursache anders war) oder sich nach Anweisungen in apache2.conf oder .htaccess umzusehen, die möglicherweise seltsame 500 interne Serverfehlermeldungen verursachen.

Wir fanden, dass es so schnell fehlschlug, dass es in Apaches Fehlerprotokollen überhaupt nichts Nützliches gab, und verbrachten einen ganzen Morgen damit, hier und da kleine Dinge zu ändern, bis wir das Problem des Setzens zusätzlicher Header gelöst hatten, als wir vergessen hatten, mod_headers zu laden!

J. Declan Young
quelle
0

Manchmal tritt dieser Fehler auf, wenn HTML einen kommentierten Code enthält und der Browser versucht, nach etwas zu suchen. Wie in meinem Fall hatte ich Code für ein Webformular in der Flasche kommentiert und bekam diesen.

Nachdem ich 2 Stunden verbracht hatte, habe ich es folgendermaßen behoben:

1) Ich habe eine neue Python-Umgebung erstellt und dann einen Fehler in der kommentierten HTML-Zeile ausgegeben. Zuvor wurde nur der Fehler 'GET /favicon.ico HTTP / 1.1 "404' ausgegeben.

2) Manchmal, wenn ich einen doppelten Code hatte, wie eine Python-Datei mit demselben Namen, habe ich auch diesen Fehler gesehen. Versuchen Sie auch, diesen zu entfernen

ohsoifelse
quelle
-10

Du könntest benutzen

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

Auf diese Weise wird es nicht vom Server angefordert.

Josh
quelle
1
Dies scheint dazu zu führen, dass einige Browser beängstigende Fehlermeldungen auslösen. Außerdem müssen Sie darauf achten, dass dieser Trick auf Seiten angewendet wird, die möglicherweise über HTTPS bereitgestellt werden.
Brighid McDonnell
6
Mit about: blank ist besser.
Luke