Bagaimana cara mencegah permintaan favicon.ico?

551

Saya tidak memiliki favicon.ico, tetapi IE selalu membuat permintaan untuk itu.

Apakah mungkin untuk mencegah browser membuat permintaan untuk favicon dari situs saya? Mungkin beberapa META-TAG di header HTML?

favicon Daniel Silveira
sumber
21
+1 pertanyaan yang bagus tetapi sepertinya solusi paling sederhana adalah menambahkan favicon yang valid :-) tentu ini adalah pekerjaan satu menit dan situs Anda terlihat lebih profesional secara langsung?
Matt Wilko
4
Anda juga dapat memiliki file favicon.ico kosong. Ini akan menghentikan permintaan (setelah yang pertama), tetapi tidak menyebabkan browser membuat favicon kosong di mana biasanya membuat apa pun ikon defaultnya.
mxcl
38
Saya harus mengatakan bahwa saya setuju dengan poin tersirat si penanya sepenuhnya: untuk tujuan apa sesuatu tambahan akan menjadi wajib ? dan selanjutnya, bagaimana kita tidak bisa hanya menambahkan beberapa data meta ke respons yang mengatakan "berperilaku persis seperti jika Anda meminta favicon.ico dan mendapat 404, hanya saja tidak benar-benar membuat permintaan dan selanjutnya tidak bertanya lagi sampai halaman ini berubah ".
Daniel
36
Ini sangat menyakitkan. Saya memiliki layanan web yang hanya melayani JSON dan bahkan tidak memiliki kemampuan dasar untuk melayani file tanpa beberapa perubahan (sebagai permulaan, setiap metode memerlukan token auth untuk menghindari 401/403). Saya mencatat permintaan yang gagal sehingga saya bisa menganalisisnya nanti - log selalu dibanjiri dengan permintaan untuk favicon.
Dasar
3
Ini tahun 2015. Ada berita tentang itu?
Jonathan Prates

Jawaban:

575

Pertama-tama saya akan mengatakan bahwa memiliki favicon di halaman Web adalah hal yang baik (biasanya).

Namun itu tidak selalu diinginkan dan kadang-kadang pengembang membutuhkan cara untuk menghindari muatan tambahan. Misalnya, IFRAME akan meminta favicon tanpa menunjukkannya. Yang terburuk, di Chrome dan Android, IFRAME akan menghasilkan 3 permintaan untuk 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

Berikut ini menggunakan data URI dan dapat digunakan untuk menghindari permintaan favicon palsu:

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

Untuk referensi lihat di sini:

Bug / perilaku Chrome mungkin akan diperbaiki di versi yang akan datang.

Inilah kiriman bug yang bisa Anda pilih:

PEMBARUAN 1:

Dari komentar (jpic) sepertinya Firefox> = 25 tidak lagi menyukai sintaksis di atas. Saya menguji pada Firefox 27 dan tidak berfungsi saat masih bekerja di Webkit / Chrome.

Jadi di sini adalah yang baru yang harus mencakup semua browser terbaru. Saya menguji Safari, Chrome, dan Firefox:

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

Saya meninggalkan nama "jalan pintas" dari nilai atribut "rel" karena itu hanya untuk IE yang lebih lama dan versi IE <8 tidak menyukai dataURI juga. Tidak diuji pada IE8.

PEMBARUAN 2:

Jika Anda membutuhkan dokumen Anda untuk memvalidasi terhadap HTML5 gunakan ini sebagai gantinya:

<link rel="icon" href="data:;base64,iVBORw0KGgo=">
Diego Perini
sumber
1
Cemerlang. Saya harus menebak fakta bahwa Anda mendapatkan begitu sedikit suara hanya karena fakta bahwa beberapa tahun telah berlalu sejak pertanyaan diajukan, dan jawaban yang kurang pintar memiliki lebih banyak waktu untuk mengumpulkan suara.
iconoclast
21
UPDATE 2 Anda memiliki masalah pada Lollipop ... menambahkan <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">sepertinya menyelesaikan masalah.
Alko
2
Jika saya benar, saya bisa buka data:image/png;base64,iVBORw0KGgo=di browser, simpan sebagai favicon.icoalias. kosongkan file PNG dan simpan di root situs web. Baik?
Martin
3
@Alko File PNG kosong itu masih tidak valid. Jika ini hanya tentang membuat URL data yang menggambarkan file kosong, gunakan: <link rel = "icon" href = "data:,">
vog
2
Browser cenderung meminta favicon bahkan jika tidak ada referensi untuk itu di file index.html, jadi bagaimana solusi ini mencegah ini? Secara khusus, saya telah melihat Firefox menjadi sangat agresif dalam memintanya segera setelah Anda mengunjungi domain. Browser lain dapat melakukannya nanti, mungkin setelah file indeks memuat header (seseorang dengan pengetahuan lebih dalam tentang browser silakan berkomentar). Tidak memiliki favicon memiliki efek samping potensial, hanya google saja, atau: stackoverflow.com/questions/4269695/…
juanheyns
131

Cukup tambahkan baris berikut ke <head>bagian file HTML Anda:

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

Fitur dari solusi ini:

  • 100% HTML5 valid
  • sangat singkat
  • tidak menimbulkan kebiasaan apa pun dari IE 8 dan lebih lama
  • tidak membuat browser mengartikan kode HTML saat ini sebagai favicon (yang akan terjadi dengan href="#")
vog
sumber
4
Jika Anda hanya mencoba untuk menutup devtools chrome pada proyek lokal, ini adalah cara termudah dan terbersih untuk dilakukan.
Andrew
Perluas ini. Apakah saya hanya perlu memasukkan ini dalam file HTML saya untuk menghentikan permintaan favicon?
Aakash Verma
2
@ AashashVerma Ya, itu saja. Tidak ada lagi yang dibutuhkan. (Kecuali jika situs Anda perlu mendukung Internet Explorer 8 atau lebih lama.) Saya memperbaiki jawaban saya.
vog
@asynts Apa maksudmu reserves space?
mvorisek
@Andrew Apa masalah yang dihadapi Chrome DevTools dengan solusi ini?
Flinsch
47

Saya yakin saya sudah melihat ini (Saya belum mengujinya atau menggunakannya secara pribadi):

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

Adakah yang memiliki pengalaman serupa?

EDIT:

Saya baru saja menguji cuplikan di atas dan pada refresh penuh paksa, tidak ada permintaan favicon terlihat di Fiddler. Saya diuji terhadap IE8 (mode Compat sebagai standar IE7) dan FF 3.6.

mlhDev
sumber
1
tes saya juga menunjukkan bahwa trik ini berfungsi. Namun, saya memiliki hreftautan ke beberapa sumber daya statis (cache) yang telah Anda muat (mis. File css atau skrip) - untuk memastikan bahwa halaman dinamis (tidak-cache) tidak diminta dua kali. (Hanya agar aman karena secara href="#"teknis menunjuk ke halaman web saat ini).
Már Örlygsson
2
Saya mencoba di Safari. Permintaan favicon mengenai halaman hosting lagi.
Morgan Cheng
27
Saya tidak akan menyarankan ini, karena itu membuat browser (Safari5 / Mac, mungkin orang lain juga) untuk meminta halaman web dari server dua kali.
Manav
2
@Manav Itu tidak lagi terjadi di Safari6 / Mac.
Marcel
2
BOOM INI! Terima kasih: D sekarang saya tidak akan melihat kesalahan yang menjengkelkan itu, sampai akhirnya saya berhasil membuat ikon itu hehe.
Leon Gaban
39

Kamu tidak bisa Yang dapat Anda lakukan adalah membuat gambar sekecil mungkin dan mengatur beberapa header pembatalan cache ( Expires, Cache-Control) jauh di masa depan. Inilah yang Yahoo! katakan tentang permintaan favicon.ico.

Ionuț G. Stan
sumber
7
Dia bilang dia tidak punya favicon. Mereka tidak menjadi jauh lebih kecil dari itu. Dan tidak masuk akal untuk men-cache file yang tidak ada.
innaM
16
Jika dia tidak memiliki favicon maka dia harus membuatnya, itu maksud saya. Tidak ada solusi yang lebih baik dari ini. Bukankah ini logis? Jika tidak ada kemungkinan untuk menghentikan permintaan, kecuali jika Anda menggunakan caching, apa yang Anda lakukan?
Ionuț G. Stan
5

Anda dapat menggunakan .htaccess atau arahan server untuk menolak akses ke favicon.ico, tetapi server akan mengirim akses yang ditolak balasan ke browser dan ini masih memperlambat akses halaman.

Anda dapat menghentikan browser yang meminta favicon.ico ketika pengguna kembali ke situs Anda, dengan membuatnya tetap di cache browser.

Pertama, berikan gambar favicon.ico kecil, bisa kosong, tapi sekecil mungkin. Saya membuat yang hitam dan putih di bawah 200 byte. Kemudian, menggunakan .htaccess atau arahan server, atur header file Kedaluwarsa satu atau dua bulan di masa mendatang. Ketika pengguna yang sama kembali ke situs Anda, itu akan dimuat dari cache browser dan tidak ada permintaan akan pergi ke situs Anda. Tidak ada lagi 404 di log server juga.

Jika Anda memiliki kendali atas server Apache lengkap atau mungkin server virtual, Anda dapat melakukan ini: -

Jika root dokumen server adalah say / var / www / html kemudian tambahkan ini ke /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>

Maka satu favicon.ico akan berfungsi untuk semua situs virtual yang dihosting karena Anda alias. Itu akan diambil dari cache browser selama sebulan setelah pengguna mengunjungi.

Untuk .htaccess ini dilaporkan berfungsi (tidak diperiksa oleh saya): -

AddType image/x-icon .ico
ExpiresActive On
ExpiresByType image/x-icon "access plus 1 month"
Anon1
sumber
Jangan lupa untuk mengaktifkan modul: ~ / etc / apache2 # a2enmod kedaluwarsa && service apache2 restart
Sino Boeckmann
4

Solusi yang sangat sederhana adalah meletakkan kode di bawah ini di .htaccess. Saya memiliki masalah yang sama dan itu menyelesaikan masalah saya.

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

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

Marcio Mazzucato
sumber
Artikel yang ditautkan dari sini sangat bagus, tetapi saya percaya sintaksis dalam responsnya salah.
Erica Kane
4

jika Anda menggunakan nginx 

# skip favicon.ico
#
location = /favicon.ico {
    access_log off;
    return 204;
}
Vincent-cm
sumber
Ini tidak menghalangi permintaan, tapi saya suka sebagai alternatif.
QasimK
Tentu, jika Anda dapat mengontrol server web.
jbruni
1

Di Node.js,

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

Dalam pengalaman kami, dengan Apache jatuh atas permintaan favicon.ico, kami berkomentar header tambahan dalam file .htaccess.

Sebagai contoh, kami memiliki Header set X-XSS-Protection "1; mode = block"

... tapi kami lupa sudo a2enmod header sebelumnya. Mengomentari tajuk tambahan yang dikirim menyelesaikan masalah favicon.ico kami.

Kami juga memiliki beberapa host virtual yang disiapkan untuk pengembangan, dan hanya gagal dengan 500 Server Internal Kesalahan saat menggunakan http: // localhost dan mengambil /favicon.ico. Jika Anda menjalankan "curl -v http: //localhost/favicon.ico " dan mendapatkan peringatan tentang nama host yang tidak ada dalam cache penyelesai atau sesuatu seperti itu, Anda mungkin mengalami masalah.

Ini bisa sesederhana tidak mengambil (kami mencoba itu dan itu tidak berhasil, karena akar penyebab kami berbeda) atau mencari arahan di apache2.conf atau .htaccess yang mungkin menyebabkan aneh 500 pesan Kesalahan Server Internal.

Kami menemukan itu gagal begitu cepat sehingga tidak ada yang berguna dalam log kesalahan Apache apa pun dan menghabiskan sepanjang pagi mengubah hal-hal kecil di sana-sini sampai kami menyelesaikan masalah pengaturan header tambahan ketika kami lupa memiliki mod_headers dimuat!

J. Declan Young
sumber
0

Terkadang kesalahan ini muncul, ketika HTML memiliki beberapa kode komentar dan browser mencoba mencari sesuatu. Seperti dalam kasus saya, saya telah berkomentar kode untuk formulir web dalam termos dan saya mendapatkan ini.

Setelah menghabiskan 2 jam saya memperbaikinya dengan cara berikut:

1) Saya membuat lingkungan python baru dan kemudian melemparkan kesalahan pada baris HTML yang dikomentari, sebelum ini saya hanya dilempar kesalahan 'GET /favicon.ico HTTP / 1.1 "404'

2) Kadang-kadang, ketika saya memiliki kode duplikat, seperti file python yang ada dengan nama yang sama, maka saya juga melihat kesalahan ini, coba hapus juga

ohsoifelse
sumber
-10

Anda bisa menggunakannya

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

Dengan begitu sebenarnya tidak akan diminta dari server.

wah
sumber
1
Tampaknya hal itu dapat menyebabkan beberapa browser melempar pesan kesalahan yang menakutkan - Anda juga harus berhati-hati karena menggunakan trik itu pada halaman yang mungkin dilayani melalui HTTPS.
Brighid McDonnell
6
Menggunakan about: blank lebih baik.
Luke