Làm thế nào để ngăn chặn các yêu cầu favicon.ico?

551

Tôi không có favicon.ico, nhưng IE luôn đưa ra yêu cầu cho nó.

Có thể ngăn trình duyệt đưa ra yêu cầu cho favicon từ trang web của tôi không? Có lẽ một số META-TAG trong tiêu đề HTML?

favicon

— Daniel Silveira
nguồn

21

+1 câu hỏi hay nhưng có vẻ như giải pháp đơn giản nhất chỉ là thêm một favicon hợp lệ :-) chắc chắn đây là một công việc trong một phút và trang web của bạn trông chuyên nghiệp hơn ngay lập tức?

— Matt Wilko

4

Bạn cũng có thể có một tệp favicon.ico trống. Điều này sẽ dừng các yêu cầu (sau lần đầu tiên), nhưng không khiến trình duyệt hiển thị một favicon trống trong đó nó thường hiển thị bất cứ biểu tượng mặc định nào.

— mxcl

38

Tôi phải nói rằng tôi đồng ý với quan điểm ngụ ý của người hỏi hoàn toàn: vì mục đích gì sẽ điều thêm được thực hiện bắt buộc ? và hơn nữa, làm thế nào mà chúng ta không thể thêm một số dữ liệu meta vào câu trả lời rằng "hãy cư xử chính xác như thể bạn đã yêu cầu một favicon.ico và nhận được 404, chỉ không thực sự yêu cầu và tiếp tục không hỏi lại cho đến khi trang này thay đổi ".

— Daniel

36

Đây là một nỗi đau. Tôi có một dịch vụ web chỉ phục vụ JSON và thậm chí không có khả năng phục vụ các tệp cơ bản mà không có một số thay đổi (để bắt đầu, mọi phương thức đều yêu cầu mã thông báo xác thực để tránh 401/403). Tôi ghi nhật ký các yêu cầu không thành công để tôi có thể phân tích chúng sau này - các bản ghi liên tục tràn ngập các yêu cầu cho một favicon.

— Cơ bản

3

Đó là năm 2015. Có tin tức gì về nó không?

— Jonathan Prates

575

Trước tiên tôi sẽ nói rằng có một favicon trong một trang web là một điều tốt (bình thường).

Tuy nhiên, điều này không phải lúc nào cũng mong muốn và đôi khi các nhà phát triển cần một cách để tránh tải trọng thêm. Ví dụ: IFRAME sẽ yêu cầu favicon mà không hiển thị nó. Tệ nhất là, trong Chrome và Android, IFRAME sẽ tạo ra 3 yêu cầu cho 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

Sau đây sử dụng URI dữ liệu và có thể được sử dụng để tránh các yêu cầu giả mạo:

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

Để tham khảo xem tại đây:

Lỗi / hành vi của Chrome có thể sẽ được sửa trong các phiên bản sắp tới.

Đây là lỗi gửi cho bạn để bỏ phiếu:

https://bugs.chromium.org/p/chromium/issues/detail?id=131567

CẬP NHẬT 1:

Từ các nhận xét (jpic), có vẻ như Firefox> = 25 không giống như cú pháp trên nữa. Tôi đã thử nghiệm trên Firefox 27 và nó không hoạt động trong khi nó vẫn hoạt động trên Webkit / Chrome.

Vì vậy, đây là một cái mới sẽ bao gồm tất cả các trình duyệt gần đây. Tôi đã thử nghiệm Safari, Chrome và Firefox:

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

Tôi đã bỏ tên "phím tắt" khỏi giá trị thuộc tính "rel" vì đó chỉ dành cho IE cũ và các phiên bản IE <8 không giống như dataURI. Chưa được thử nghiệm trên IE8.

CẬP NHẬT 2:

Nếu bạn cần tài liệu của mình để xác thực với HTML5, hãy sử dụng thay thế:

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

— Diego Perini
nguồn

1

Xuất sắc. Tôi phải đoán thực tế là bạn đã nhận được rất ít phiếu chỉ phải làm với thực tế là đã vài năm trôi qua kể từ khi câu hỏi được hỏi, và câu trả lời ít thông minh hơn có nhiều thời gian hơn để thu thập phiếu bầu.

— iconoclast

21

CẬP NHẬT 2 của bạn có vấn đề trên Lollipop ... thêm <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">dường như để giải quyết vấn đề.

— Alko

2

Nếu tôi hiểu đúng, tôi có thể mở data:image/png;base64,iVBORw0KGgo=trong trình duyệt, lưu nó dưới dạng favicon.icoaka. tập tin PNG trống và lưu trữ nó trong trang web gốc. Đúng?

— Martin

3

@Alko Tệp PNG trống đó vẫn không hợp lệ. Nếu đây chỉ là về việc tạo một URL dữ liệu mô tả một tệp trống, hãy sử dụng: <link rel = "icon" href = "data :,">

— vog

2

Các trình duyệt có xu hướng yêu cầu favicon ngay cả khi không có tài liệu tham khảo nào trong tệp index.html, vậy giải pháp này sẽ ngăn chặn điều này như thế nào? Cụ thể, tôi đã thấy Firefox rất tích cực trong việc yêu cầu nó ngay khi bạn truy cập một tên miền. Các trình duyệt khác có thể thực hiện sau, có thể sau khi tệp chỉ mục đã tải tiêu đề (ai đó có nhiều kiến thức hơn về nội bộ của trình duyệt, vui lòng nhận xét). Không có favicon có tác dụng phụ tiềm năng, chỉ cần google nó, hoặc: stackoverflow.com/questions/4269695/

— mẹo

131

Chỉ cần thêm dòng sau vào <head>phần tệp HTML của bạn:

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

Các tính năng của giải pháp này:

HTML5 hợp lệ 100%
rất ngắn
không phát sinh bất kỳ quirks nào từ IE 8 trở lên
không làm cho trình duyệt diễn giải mã HTML hiện tại là favicon (sẽ là trường hợp với href="#")

— vog
nguồn

4

Nếu bạn chỉ đang cố gắng tắt các chrome devtools trên một dự án địa phương, thì đây là cách dễ nhất và sạch nhất để đi.

— Andrew

Hãy mở rộng về điều này. Tôi chỉ cần đưa cái này vào tệp HTML của mình để dừng yêu cầu favicon?

— Aakash Verma

2

@AakashVerma Vâng, đó là tất cả. Không có gì khác là cần thiết. (Trừ khi trang web của bạn cần hỗ trợ Internet Explorer 8 trở lên.) Tôi đã cải thiện câu trả lời của mình cho phù hợp.

— vog

@asynts Ý bạn là reserves spacegì?

— mvorisek

@Andrew Vấn đề mà Chrome DevTools gặp phải với giải pháp này là gì?

— Flinsch

47

Tôi tin rằng tôi đã thấy điều này ~~(Tôi chưa thử nghiệm hoặc sử dụng cá nhân)~~:

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

Bất cứ ai cũng có kinh nghiệm tương tự?

BIÊN TẬP:

Tôi vừa thử đoạn trích trên và trong một lần làm mới hoàn toàn bắt buộc, không có yêu cầu favicon nào được nhìn thấy trong Fiddler. Tôi đã thử nghiệm với IE8 (chế độ Compat theo tiêu chuẩn IE7) và FF 3.6.

— mlhDev
nguồn

1

các xét nghiệm của tôi cũng chỉ ra rằng thủ thuật này hoạt động. Tuy nhiên, tôi có hrefliên kết đến một số tài nguyên tĩnh (được lưu trong bộ nhớ cache) mà bạn đã tải (ví dụ: tệp css hoặc tập lệnh) - để đảm bảo rằng trang động (không được lưu trong bộ nhớ cache) không được yêu cầu hai lần. (Chỉ để an toàn vì href="#"kỹ thuật trỏ đến trang web hiện tại).

— Már rlygsson 15/03/2016

2

Tôi đã thử trong Safari. Yêu cầu favicon lại chạm vào trang lưu trữ.

— Morgan Cheng

27

Tôi không đề xuất điều này, vì nó khiến trình duyệt (Safari5 / Mac, có thể cả những người khác nữa) yêu cầu trang web từ máy chủ hai lần.

— Manav

2

@Manav Đó không còn là trường hợp trong Safari6 / Mac.

— Marcel

2

BÙM NÀY! Cảm ơn: D bây giờ tôi sẽ không thấy lỗi khó chịu đó, cho đến khi cuối cùng tôi cũng có thể tạo ra biểu tượng đó hehe.

— Leon Gaban

39

Bạn không thể. Tất cả những gì bạn có thể làm là làm cho hình ảnh đó càng nhỏ càng tốt và đặt một số tiêu đề không hợp lệ bộ đệm ( Expires, Cache-Control) trong tương lai. Đây là những gì Yahoo! phải nói về yêu cầu của favicon.ico.

— Ionuț G. Stan
nguồn

7

Anh ấy nói anh ấy không có favicon. Họ không nhận được nhỏ hơn nhiều. Và nó không có ý nghĩa gì để lưu trữ các tập tin không tồn tại.

— innaM

16

Nếu anh ta không có favicon thì anh ta nên làm một cái, đó là quan điểm của tôi. Không có giải pháp nào tốt hơn giải pháp này. Nó không logic sao? Nếu không có khả năng dừng yêu cầu, trừ khi bạn sử dụng bộ nhớ đệm, bạn sẽ làm gì?

— Ionuț G. Stan

5

Bạn có thể sử dụng .htaccess hoặc chỉ thị máy chủ để từ chối quyền truy cập vào favicon.ico, nhưng máy chủ sẽ gửi quyền truy cập bị từ chối trả lời tới trình duyệt và điều này vẫn làm chậm truy cập trang.

Bạn có thể dừng trình duyệt yêu cầu favicon.ico khi người dùng quay lại trang web của bạn, bằng cách để nó ở lại trong bộ đệm của trình duyệt.

Đầu tiên, cung cấp một hình ảnh favicon.ico nhỏ, có thể để trống, nhưng càng nhỏ càng tốt. Tôi đã tạo một màu đen và trắng dưới 200 byte. Sau đó, bằng cách sử dụng .htaccess hoặc chỉ thị máy chủ, hãy đặt tiêu đề tệp hết hạn một hoặc hai tháng trong tương lai. Khi cùng một người dùng quay lại trang web của bạn, nó sẽ được tải từ bộ đệm của trình duyệt và không có yêu cầu nào sẽ đến trang web của bạn. Không có thêm 404 trong nhật ký máy chủ.

Nếu bạn có quyền kiểm soát một máy chủ Apache hoàn chỉnh hoặc có thể là một máy chủ ảo, bạn có thể làm điều này: -

Nếu gốc tài liệu máy chủ là say / var / www / html thì hãy thêm cái này vào /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>

Sau đó, một favicon.ico sẽ hoạt động cho tất cả các trang web được lưu trữ ảo vì bạn đang đặt bí danh cho nó. Nó sẽ được rút ra từ bộ đệm của trình duyệt trong một tháng sau khi người dùng truy cập.

Đối với .htaccess, điều này được báo cáo là hoạt động (không được tôi kiểm tra): -

AddType image/x-icon .ico
ExpiresActive On
ExpiresByType image/x-icon "access plus 1 month"

— Anon1
nguồn

Đừng quên bật mô-đun: ~ / etc / apache2 # a2enmod hết hạn && dịch vụ apache2 khởi động lại

— Sino Boeckmann

4

Một giải pháp rất đơn giản là đặt mã dưới đây vào của bạn .htaccess. Tôi đã có cùng một vấn đề và nó giải quyết vấn đề của tôi.

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

Tham khảo: http://perishablepress.com/block-favicon-url-404-requests/

— Marcio Mazzucato
nguồn

Bài viết được liên kết từ đây là rất tốt, nhưng tôi tin rằng cú pháp trong phản hồi là không chính xác.

— Erica Kane

4

nếu bạn sử dụng nginx

# skip favicon.ico
#
location = /favicon.ico {
    access_log off;
    return 204;
}

— Vincent-cm
nguồn

Điều này không ngăn cản yêu cầu, nhưng tôi thích nó như một sự thay thế.

— QasimK

Chắc chắn, nếu bạn có thể kiểm soát máy chủ web.

— jbruni

1

Trong Node.js,

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

— Visv M
nguồn

0

Theo kinh nghiệm của chúng tôi, với việc Apache rơi vào yêu cầu của favicon.ico, chúng tôi đã nhận xét thêm các tiêu đề bổ sung trong tệp .htaccess.

Ví dụ: chúng tôi đã đặt Tiêu đề X-XSS-Protection "1; mode = block"

... nhưng chúng tôi đã quên sudo a2enmod tiêu đề trước. Nhận xét về các tiêu đề bổ sung được gửi đã giải quyết vấn đề favicon.ico của chúng tôi.

Chúng tôi cũng đã có một số máy chủ ảo được thiết lập để phát triển và chỉ xảy ra lỗi với 500 Lỗi máy chủ nội bộ khi sử dụng http: // localhost và tìm nạp /favicon.ico. Nếu bạn chạy "curl -v http: //localhost/favicon.ico " và nhận được cảnh báo về tên máy chủ không có trong bộ đệm của trình phân giải hoặc một cái gì đó có hiệu lực, bạn có thể gặp vấn đề.

Nó có thể đơn giản như không tìm nạp (chúng tôi đã thử và nó không hoạt động, vì nguyên nhân gốc rễ của chúng tôi khác nhau) hoặc tìm kiếm các chỉ thị trong apache2.conf hoặc .htaccess có thể gây ra 500 thông báo Lỗi Máy chủ Nội bộ lạ.

Chúng tôi thấy nó thất bại rất nhanh, không có gì hữu ích trong nhật ký lỗi của Apache và đã dành cả buổi sáng để thay đổi những thứ nhỏ nhặt ở đây và ở đó cho đến khi chúng tôi giải quyết vấn đề đặt thêm tiêu đề khi chúng tôi quên tải mod_headers!

— J. Declan Young
nguồn

0

Đôi khi lỗi này xuất hiện, khi HTML có một số mã nhận xét và trình duyệt đang cố gắng tìm kiếm thứ gì đó. Giống như trong trường hợp của tôi, tôi đã nhận xét mã cho một mẫu web trong bình và tôi đã nhận được điều này.

Sau khi dành 2 giờ tôi đã sửa nó theo những cách sau:

1) Tôi đã tạo một môi trường python mới và sau đó nó đã gây ra lỗi trên dòng HTML đã nhận xét, trước đó tôi chỉ bị lỗi 'GET /favicon.ico HTTP / 1.1 "404'

2) Đôi khi, khi tôi có một mã trùng lặp, như tệp python tồn tại cùng tên, thì tôi cũng thấy lỗi này, hãy thử xóa chúng đi

— ohsoifelse
nguồn

-10

Bạn đã có thể sử dụng

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

Bằng cách đó, nó sẽ không thực sự được yêu cầu từ máy chủ.

— ồ
nguồn

1

Điều đó có vẻ như có thể khiến một số trình duyệt ném các thông báo lỗi đáng sợ - bạn cũng sẽ phải đề phòng sử dụng thủ thuật đó trên các trang có thể được cung cấp qua HTTPS.

— Brighid McDonnell

6

Sử dụng about: blank là tốt hơn.

— Lu-ca