Come prevenire le richieste favicon.ico?

551

Non ho un favicon.ico, ma IE lo richiede sempre.

È possibile impedire al browser di effettuare una richiesta per la favicon dal mio sito? Forse qualche META-TAG nell'intestazione HTML?

favicon 
— Daniel Silveira
fonte
21
+1 buona domanda ma sembra che la soluzione più semplice sia solo quella di aggiungere una favicon valida :-) sicuramente questo è un lavoro di un minuto e il tuo sito sembra immediatamente più professionale?
— Matt Wilko,
4
Puoi anche avere un file favicon.ico vuoto. Ciò interromperà le richieste (dopo la prima), ma non farà in modo che il browser esegua il rendering di una favicon vuota dove di solito esegue il rendering di qualsiasi icona predefinita.
— MXC
38
Devo dire che sono completamente d'accordo con il punto implicito dell'interrogatore: per quale scopo sarebbe stato reso obbligatorio qualcosa in più ? e inoltre, come mai non possiamo semplicemente aggiungere alcuni metadati alla risposta dicendo "comportati esattamente come se avessi richiesto un favicon.ico e ottenuto un 404, solo in realtà non fare la richiesta e inoltre non chiedere più fino a quando questa pagina cambia ".
— Daniel,
36
Questo è un tale dolore. Ho un servizio web che serve solo JSON e non ha nemmeno la capacità di base di servire i file senza alcune modifiche (per iniziare, ogni metodo richiede un token di autenticazione per evitare un 401/403). Registro le richieste non riuscite in modo da poterle analizzare in seguito: i registri sono costantemente invasi da richieste di favicon.
— Base
3
È il 2015. Qualche novità al riguardo?
— Jonathan Prates,

Risposte:

575

Prima dirò che avere una favicon in una pagina Web è una buona cosa (normalmente).

Tuttavia, non è sempre desiderato e talvolta gli sviluppatori hanno bisogno di un modo per evitare il payload aggiuntivo. Ad esempio un IFRAME richiederebbe una favicon senza mostrarla. Peggio ancora, in Chrome e Android un IFRAME genererà 3 richieste di favicon:

"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

Quanto segue utilizza l'URI dei dati e può essere utilizzato per evitare false richieste favicon:

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

Per riferimenti vedi qui:

Il bug / comportamento di Chrome verrà probabilmente risolto nelle prossime versioni.

Ecco l'invio dei bug per il tuo voto:

AGGIORNAMENTO 1:

Dai commenti (jpic) sembra che Firefox> = 25 non gradisca più la sintassi sopra. Ho provato su Firefox 27 e non funziona mentre funziona ancora su Webkit / Chrome.

Quindi ecco quello nuovo che dovrebbe coprire tutti i browser recenti. Ho testato Safari, Chrome e Firefox:

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

Ho lasciato fuori il nome "scorciatoia" dal valore dell'attributo "rel" poiché è solo per IE meno recenti e anche le versioni di IE <8 non gradiscono dataURIs. Non testato su IE8.

AGGIORNAMENTO 2:

Se devi convalidare il tuo documento con HTML5, usa questo:

<link rel="icon" href="data:;base64,iVBORw0KGgo=">
— Diego Perini
fonte
1
Brillante. Devo indovinare il fatto che hai ottenuto così pochi voti ha a che fare solo con il fatto che sono trascorsi diversi anni da quando è stata posta la domanda, e le risposte meno intelligenti hanno avuto più tempo per raccogliere voti.
— iconoclasta,
21
Il tuo UPDATE 2 ha avuto problemi con Lollipop ... l'aggiunta <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">sembra risolvere il problema.
— Alko,
2
Se ho capito bene, posso aprire data:image/png;base64,iVBORw0KGgo=nel browser, salvarlo come favicon.icoaka. svuotare il file PNG e archiviarlo nella radice del sito Web. Giusto?
— Martin,
3
@Alko Quel file PNG vuoto non è ancora valido. Se si tratta solo di creare un URL di dati che descriva un file vuoto, utilizzare: <link rel = "icon" href = "data:,">
— vog
2
I browser tendono a richiedere la favicon anche se non ci sono riferimenti ad essa nel file index.html, quindi come potrebbe impedire questa soluzione? In particolare, ho visto Firefox essere molto aggressivo nel richiederlo non appena visiti un dominio. Altri browser potrebbero farlo in un secondo momento, forse dopo che il file indice ha caricato l'intestazione (qualcuno con una maggiore conoscenza degli interni dei browser può commentare). Non avendo una favicon ha potenziali effetti collaterali, basta google, o: stackoverflow.com/questions/4269695/...
— juanheyns
131

Aggiungi la seguente riga alla <head>sezione del tuo file HTML:

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

Caratteristiche di questa soluzione:

  • HTML5 valido al 100%
  • molto corto
  • non incorre in stranezze da IE 8 e precedenti
  • non consente al browser di interpretare l'attuale codice HTML come favicon (che sarebbe il caso di href="#")
— vog
fonte
4
Se stai solo cercando di zittire Chrome Devtools su un progetto locale, questo è di gran lunga il modo più semplice e pulito per andare.
— Andrew,
Si prega di espandere su questo. Devo solo includerlo nel mio file HTML per interrompere la richiesta favicon?
— Aakash Verma,
2
@AakashVerma Sì, tutto qui. Nient'altro è necessario. (A meno che il tuo sito non debba supportare Internet Explorer 8 o precedente.) Ho migliorato la mia risposta di conseguenza.
— Vog
@asynts Cosa intendi con reserves space?
— mvorisek,
@Andrew Qual è il problema che Chrome DevTools ha con questa soluzione?
— Flinsch,
47

Credo di averlo visto (Non l'ho ancora provato o usato personalmente):

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

Qualcuno ha avuto un'esperienza simile?

MODIFICARE:

Ho appena testato lo snippet di cui sopra e su un aggiornamento forzato completo, nessuna richiesta favicon è stata vista in Fiddler. Ho testato contro IE8 (modalità Compat come standard IE7) e FF 3.6.

— mlhDev
fonte
1
i miei test indicano anche che questo trucco funziona. Tuttavia, avrei il hreflink ad alcune risorse statiche (memorizzate nella cache) che hai già caricato (ad esempio css o file di script) - per garantire che una pagina dinamica (non memorizzata nella cache) non venga richiesta due volte. (Solo per sicurezza poiché href="#"tecnicamente punta alla pagina Web corrente).
— Már Örlygsson,
2
Ho provato in Safari. La richiesta favicon raggiunge nuovamente la pagina di hosting.
— Morgan Cheng,
27
Non lo suggerirei, perché consente al browser (Safari5 / Mac, forse anche ad altri) di richiedere due volte la pagina Web dal server.
— Manav,
2
@Manav Questo non è più il caso in Safari6 / Mac.
— Marcel,
2
BOOM QUESTO! Grazie: D ora non vedrò quel fastidioso errore, fino a quando non riuscirò finalmente a fare quell'icona hehe.
— Leon Gaban,
39

Non puoi. Tutto quello che puoi fare è rendere l'immagine più piccola possibile e impostare alcune intestazioni di invalidazione della cache ( Expires, Cache-Control) lontano in futuro. Ecco cosa Yahoo! ha da dire sulle richieste favicon.ico.

— Ionuț G. Stan
fonte
7
Ha detto che non ha una favicon. Non diventano molto più piccoli di così. E non ha senso memorizzare nella cache file inesistenti.
— innaM
16
Se non ha una favicon, allora dovrebbe crearne una, questo era il mio punto. Non esiste soluzione migliore di questa. Non è logico? Se non è possibile interrompere le richieste, a meno che non si utilizzi la memorizzazione nella cache, cosa si fa?
— Ionuț G. Stan,
5

Puoi usare .htaccess o le direttive del server per negare l'accesso a favicon.ico, ma il server invierà una risposta di accesso negata al browser e ciò rallenta comunque l'accesso alla pagina.

Puoi interrompere il browser che richiede favicon.ico quando un utente torna al tuo sito, facendolo rimanere nella cache del browser.

Innanzitutto, fornire una piccola immagine favicon.ico, potrebbe essere vuota, ma il più piccola possibile. Ne ho realizzato uno in bianco e nero con meno di 200 byte. Quindi, usando .htaccess o le direttive del server, imposta il file Expires header in un mese o due in futuro. Quando lo stesso utente torna sul tuo sito, questo verrà caricato dalla cache del browser e nessuna richiesta verrà inviata al tuo sito. Non ci sono più 404 nei log del server.

Se hai il controllo di un server Apache completo o forse di un server virtuale puoi farlo: -

Se il root del documento del server è / var / www / html, aggiungilo a /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>

Quindi un singolo favicon.ico funzionerà per tutti i siti ospitati virtuali dal momento che lo stai aliasando. Verrà estratto dalla cache del browser per un mese dopo la visita dell'utente.

Per .htaccess questo è segnalato per funzionare (non controllato da me): -

AddType image/x-icon .ico
ExpiresActive On
ExpiresByType image/x-icon "access plus 1 month"
— Anon1
fonte
Non dimenticare di abilitare il modulo: ~ / etc / apache2 # a2enmod scade && service riavvio apache2
— Sino Boeckmann
4

se usi nginx 

# skip favicon.ico
#
location = /favicon.ico {
    access_log off;
    return 204;
}
— Vincent-cm
fonte
Questo non impedisce la richiesta, ma mi piace in alternativa.
— QasimK,
Certo, se puoi controllare il web server.
— jbruni,
1

In Node.js,

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

Nella nostra esperienza, con Apache che cade su richiesta di favicon.ico, abbiamo commentato le intestazioni extra nel file .htaccess.

Ad esempio avevamo Header impostato X-XSS-Protection "1; mode = block"

... ma ci eravamo dimenticati di eseguire in anticipo le intestazioni di a2enmod. Commentare le intestazioni extra inviate ha risolto il nostro problema favicon.ico.

Avevamo anche diversi host virtuali configurati per lo sviluppo e non ci riuscivamo con 500 Internal Server Error durante l'utilizzo di http: // localhost e il recupero di /favicon.ico. Se si esegue "curl -v http: //localhost/favicon.ico " e si riceve un avviso in merito al nome host che non si trova nella cache del resolver o qualcosa in tal senso, potrebbero verificarsi problemi.

Potrebbe essere semplice come non recuperare (l'abbiamo provato e non ha funzionato, perché la nostra causa principale era diversa) o cercare le direttive in apache2.conf o .htaccess che potrebbero causare strani messaggi di errore del server interno 500.

Abbiamo riscontrato un errore così rapido che non c'era nulla di utile nei registri degli errori di Apache e abbiamo trascorso un'intera mattinata a cambiare piccole cose qua e là fino a quando non abbiamo risolto il problema di impostare intestazioni extra quando ci siamo dimenticati di aver caricato mod_headers!

— J. Declan Young
fonte
0

A volte questo errore si presenta quando HTML ha del codice commentato e il browser sta cercando di cercare qualcosa. Come nel mio caso, avevo commentato il codice di un modulo Web in pallone e lo stavo ottenendo.

Dopo aver trascorso 2 ore l'ho risolto nei seguenti modi:

1) Ho creato un nuovo ambiente Python e quindi ha generato un errore sulla riga HTML commentata, prima di questo mi è stato generato solo l'errore "GET /favicon.ico HTTP / 1.1" 404 "

2) A volte, quando avevo un codice duplicato, come un file Python esistente con lo stesso nome, allora ho visto anche questo errore, prova a rimuovere anche quelli

— ohsoifelse
fonte
-10

Puoi usare

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

In questo modo non verrà effettivamente richiesto dal server.

— josh
fonte
1
Questo potrebbe far sì che alcuni browser lancino messaggi di errore spaventosi, inoltre dovrai fare attenzione a usare quel trucco sulle pagine che potrebbero essere offerte su HTTPS.
— Brighid McDonnell il
6
Usando about: blank è meglio.
— Luca,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.