วิธีป้องกันคำขอ favicon.ico

551

ฉันไม่มี favicon.ico แต่ IE มักจะทำการร้องขอ

เป็นไปได้ไหมที่จะป้องกันไม่ให้เบราว์เซอร์ทำการร้องขอ favicon จากเว็บไซต์ของฉัน บางที META-TAG ในส่วนหัวของ HTML?

favicon

21

+1 คำถามที่ดี แต่ดูเหมือนว่าโซลูชันที่ง่ายที่สุดคือเพียงเพิ่ม favicon ที่ถูกต้อง :-) แน่นอนว่านี่เป็นงานที่ใช้เวลาเพียงหนึ่งนาทีและไซต์ของคุณดูเป็นมืออาชีพมากขึ้นทันทีหรือไม่

— Matt Wilko

4

คุณยังสามารถมีไฟล์ favicon.ico ที่ว่างเปล่า การดำเนินการนี้จะหยุดคำขอ (หลังจากครั้งแรก) แต่จะไม่ทำให้เบราว์เซอร์แสดง favicon ว่างโดยปกติจะแสดงผลไอคอนใดก็ตามที่เป็นค่าเริ่มต้น

— mxcl

38

ฉันต้องบอกว่าฉันเห็นด้วยกับประเด็นโดยนัยของผู้ถามอย่างสมบูรณ์: สิ่งใดที่จำเป็นต้องมีการบังคับใช้เป็นพิเศษ ? และยิ่งไปกว่านั้นเราไม่สามารถเพิ่มเมตาดาต้าลงในคำตอบที่ว่า "ทำงานเหมือนว่าคุณขอ favicon.ico และได้ 404 เพียงทำตามคำขอจริงและไม่ถามอีก หน้านี้เปลี่ยนแปลง "

— Daniel

36

นี่เป็นความเจ็บปวด ฉันมีเว็บเซอร์วิซที่ให้บริการ JSON เท่านั้นและไม่มีความสามารถขั้นพื้นฐานในการให้บริการไฟล์โดยไม่มีการเปลี่ยนแปลง (สำหรับการเริ่มต้นทุกวิธีต้องใช้โทเค็นรับรองความถูกต้องเพื่อหลีกเลี่ยง 401/403) ฉันบันทึกคำขอที่ล้มเหลวเพื่อให้ฉันสามารถวิเคราะห์ได้ในภายหลัง - บันทึกนั้นเต็มไปด้วยคำขอ favicon

— พื้นฐาน

3

ปี 2558 มีข่าวเกี่ยวกับเรื่องนี้ไหม?

— Jonathan Prates

575

ก่อนอื่นฉันจะบอกว่ามี favicon ในหน้าเว็บเป็นสิ่งที่ดี (ปกติ)

อย่างไรก็ตามมันไม่ได้เป็นที่ต้องการเสมอไปและบางครั้งนักพัฒนาก็ต้องการวิธีที่จะหลีกเลี่ยงการรับภาระพิเศษ ตัวอย่างเช่น IFRAME จะขอ favicon โดยไม่แสดง ที่แย่ที่สุดใน Chrome และ Android IFRAME จะสร้างคำขอ 3 รายการสำหรับ 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

ข้อมูลต่อไปนี้ใช้ URI ข้อมูลและสามารถใช้เพื่อหลีกเลี่ยงคำขอปลอม favicon:

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

สำหรับการอ้างอิงดูที่นี่:

ข้อผิดพลาด / พฤติกรรมของ Chrome อาจได้รับการแก้ไขในรุ่นต่อไป

นี่คือการส่งข้อผิดพลาดสำหรับคุณที่จะลงคะแนน:

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

อัปเดต 1:

จากความคิดเห็น (jpic) ดูเหมือนว่า Firefox> = 25 ไม่ชอบไวยากรณ์ข้างต้นอีกต่อไป ฉันทดสอบบน Firefox 27 แล้ว แต่มันไม่ทำงานในขณะที่ยังทำงานบน Webkit / Chrome

ดังนั้นนี่คือใหม่ที่ควรครอบคลุมเบราว์เซอร์ล่าสุดทั้งหมด ฉันทดสอบ Safari, Chrome และ Firefox:

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

ฉันปล่อยชื่อ "ทางลัด" ออกจากค่าแอตทริบิวต์ "rel" เนื่องจากเป็นเพียงสำหรับ IE รุ่นเก่าและรุ่นของ IE <8 ไม่ชอบ dataURIs เช่นกัน ไม่ได้ทดสอบบน IE8

อัปเดต 2:

หากคุณต้องการเอกสารของคุณเพื่อตรวจสอบกับ HTML5 ให้ใช้สิ่งนี้แทน:

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

— Diego Perini
แหล่งที่มา

1

สุกใส ฉันต้องเดาความจริงที่ว่าคุณได้รับการโหวตน้อยดังนั้นจะต้องทำอย่างไรกับความจริงที่ว่าหลายปีผ่านไปแล้วนับตั้งแต่คำถามถูกถามและคำตอบที่ฉลาดน้อยกว่าก็มีเวลามากขึ้นในการรวบรวมคะแนนเสียง

— iconoclast

21

UPDATE 2 ของคุณมีปัญหาเกี่ยวกับ Lollipop ... การเพิ่ม<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">ดูเหมือนจะแก้ปัญหาได้แล้ว

— Alko

2

ถ้าฉันทำให้ถูกต้องฉันสามารถเปิดdata:image/png;base64,iVBORw0KGgo=ในเบราว์เซอร์บันทึกเป็นที่favicon.icoรู้จัก ล้างไฟล์ PNGและเก็บไว้ในรูทเว็บไซต์ ขวา?

— มาร์ติน

3

@Alko ไฟล์ PNG ที่ว่างเปล่ายังคงไม่ถูกต้อง หากนี่เป็นเพียงการสร้าง URL ข้อมูลที่อธิบายถึงไฟล์ว่างให้ใช้: <link rel = "icon" href = "data:,">

— vog

2

เบราว์เซอร์มักจะร้องขอ favicon แม้ว่าจะไม่มีการอ้างอิงถึงในไฟล์ index.html ดังนั้นโซลูชันนี้จะป้องกันได้อย่างไร โดยเฉพาะฉันได้เห็น Firefox มีความก้าวร้าวมากเกี่ยวกับการร้องขอทันทีที่คุณเยี่ยมชมโดเมน เบราว์เซอร์อื่นอาจทำในภายหลังบางทีหลังจากไฟล์ดัชนีได้โหลดส่วนหัว (บางคนที่มีความรู้เพิ่มเติมเกี่ยวกับเบราว์เซอร์ภายในโปรดแสดงความคิดเห็น) ไม่มี favicon ที่มีผลข้างเคียงที่อาจเกิดขึ้นเพียงแค่ google มันหรือ: stackoverflow.com/questions/4269695/…

— juanheyns

131

เพียงเพิ่มบรรทัดต่อไปนี้ใน<head>ส่วนของไฟล์ HTML ของคุณ:

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

คุณสมบัติของโซลูชันนี้:

HTML5 ที่ถูกต้อง 100%
สั้นมาก
ไม่ต้องมีปัญหาใด ๆ จาก IE 8 และรุ่นเก่ากว่า
ไม่ทำให้เบราว์เซอร์ตีความรหัส HTML ปัจจุบันเป็น favicon (ซึ่งจะเป็นกรณีที่มีhref="#")

— VOG
แหล่งที่มา

4

หากคุณเพียงแค่พยายามปิดการใช้งาน Chrome devtools ในโครงการท้องถิ่นนี่เป็นวิธีที่ง่ายที่สุดและสะอาดที่สุด

— Andrew

โปรดขยายเรื่องนี้ ฉันต้องรวมสิ่งนี้ไว้ในไฟล์ HTML เพื่อหยุดคำขอ favicon หรือไม่?

— Aakash Verma

2

@AakashVerma ใช่นั่นคือทั้งหมด ไม่ต้องการอะไรอีก (เว้นแต่เว็บไซต์ของคุณจะต้องรองรับ Internet Explorer 8 หรือเก่ากว่า) ฉันปรับปรุงคำตอบให้ดี

— vog

@asynts คุณหมายถึงreserves spaceอะไร?

— mvorisek

@Andrew ปัญหาที่ Chrome DevTools มีในการแก้ไขปัญหานี้คืออะไร?

— Flinsch

47

ฉันเชื่อว่าฉันเคยเห็นสิ่งนี้ ~~(ฉันยังไม่ได้ทดสอบหรือใช้เป็นการส่วนตัว)~~:

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

ใครมีประสบการณ์คล้ายกัน

แก้ไข:

ฉันเพิ่งทดสอบตัวอย่างข้างต้นและในการรีเฟรชแบบเต็มบังคับไม่พบคำขอ favicon ใน Fiddler ฉันทดสอบกับ IE8 (โหมดความเข้ากันได้เป็นมาตรฐาน IE7) และ FF 3.6

— mlhDev
แหล่งที่มา

1

การทดสอบของฉันยังระบุว่าเคล็ดลับนี้ใช้งานได้ อย่างไรก็ตามฉันมีhrefลิงก์ไปยังแหล่งข้อมูลคงที่ (แคช) ที่คุณโหลดไว้แล้ว (เช่น css หรือไฟล์สคริปต์) - เพื่อให้แน่ใจว่าหน้าแบบไดนามิก (ไม่แคช) ไม่ได้รับการร้องขอสองครั้ง (เพื่อความปลอดภัยเนื่องจากhref="#"ชี้ไปยังเว็บเพจปัจจุบันทางเทคนิค)

— MárÖrlygsson

2

ฉันลองใช้ Safari คำขอ favicon จะเข้าสู่หน้าโฮสต์อีกครั้ง

— มอร์แกนเฉิง

27

ฉันจะไม่แนะนำสิ่งนี้เพราะมันทำให้เบราว์เซอร์ (Safari5 / Mac อาจจะเป็นคนอื่นด้วย) เพื่อขอหน้าเว็บจากเซิร์ฟเวอร์สองครั้ง

— Manav

2

@Manav นั่นไม่ใช่กรณีใน Safari6 / Mac อีกต่อไป

— Marcel

2

บูมสิ่งนี้! ขอบคุณ: D ตอนนี้ฉันจะไม่เห็นข้อผิดพลาดที่น่ารำคาญจนในที่สุดฉันก็สามารถทำไอคอนนั้นได้

— Leon Gaban

39

คุณทำไม่ได้ สิ่งที่คุณทำได้คือทำให้ภาพนั้นเล็กที่สุดเท่าที่จะเป็นไปได้และตั้งค่าส่วนหัวของการทำให้เป็นโมฆะแคช ( Expires, Cache-Control) ในอนาคต นี่คือสิ่งที่ Yahoo! ได้พูดเกี่ยวกับคำขอ favicon.ico

— Ionuț G. Stan
แหล่งที่มา

7

เขาบอกว่าเขาไม่มี favicon พวกเขาไม่ได้เล็กกว่านั้นมากนัก และมันไม่มีเหตุผลที่จะแคชไฟล์ที่ไม่มีอยู่

— innaM

16

ถ้าเขาไม่มี favicon เขาก็ควรสร้างมันขึ้นมานั่นคือประเด็นของฉัน ไม่มีทางออกที่ดีไปกว่านี้ มันไม่สมเหตุสมผลหรือ หากไม่มีความเป็นไปได้ที่จะหยุดคำขอนอกเสียจากว่าคุณจะใช้แคชคุณจะทำอย่างไร

— Ionuț G. Stan

5

คุณสามารถใช้. htaccess หรือคำสั่งเซิร์ฟเวอร์เพื่อปฏิเสธการเข้าถึง favicon.ico แต่เซิร์ฟเวอร์จะส่งการเข้าถึงที่ถูกปฏิเสธการตอบกลับไปยังเบราว์เซอร์และนี่ยังทำให้การเข้าถึงหน้าช้าลง

คุณสามารถหยุดเบราว์เซอร์ที่ร้องขอ favicon.ico เมื่อผู้ใช้กลับมาที่ไซต์ของคุณโดยให้เบราว์เซอร์อยู่ในแคชของเบราว์เซอร์

ขั้นแรกให้ภาพ favicon.ico ขนาดเล็กอาจว่างเปล่า แต่เล็กที่สุดเท่าที่จะทำได้ ฉันทำสีดำและสีขาวต่ำกว่า 200 ไบต์ จากนั้นใช้คำสั่ง. htaccess หรือเซิร์ฟเวอร์ให้ตั้งค่าส่วนหัวของไฟล์ Expires หนึ่งหรือสองเดือนในอนาคต เมื่อผู้ใช้รายเดียวกันกลับมาที่ไซต์ของคุณจะถูกโหลดจากเบราว์เซอร์แคชและจะไม่มีการร้องขอไปยังไซต์ของคุณ ไม่มีอีก 404 ในเซิร์ฟเวอร์ที่บันทึกด้วย

หากคุณสามารถควบคุมเซิร์ฟเวอร์ Apache ที่สมบูรณ์หรือเซิร์ฟเวอร์เสมือนคุณสามารถทำสิ่งนี้: -

หากรูทของเอกสารเซิร์ฟเวอร์พูด / var / www / html ให้เพิ่มสิ่งนี้ใน /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>

จากนั้น favicon.ico เดียวจะใช้งานได้กับไซต์โฮสต์เสมือนทั้งหมดเนื่องจากคุณเป็นนามแฝง มันจะถูกดึงมาจากแคชเบราว์เซอร์เป็นเวลาหนึ่งเดือนหลังจากที่ผู้ใช้เยี่ยมชม

สำหรับ. htaccess สิ่งนี้มีรายงานว่าใช้งานได้ (ไม่ได้ตรวจสอบโดยฉัน): -

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

— Anon1
แหล่งที่มา

อย่าลืมเปิดใช้งานโมดูล: ~ / etc / apache2 # a2enmod หมดอายุ && บริการ apache2 รีสตาร์ท

— Sino Boeckmann

4

.htaccessวิธีการแก้ปัญหาที่ง่ายมากที่จะใส่รหัสด้านล่างในของคุณ ฉันมีปัญหาเดียวกันและจะแก้ปัญหาของฉัน

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

การอ้างอิง: http://perishablepress.com/block-favicon-url-404-requests/

— Marcio Mazzucato
แหล่งที่มา

บทความที่เชื่อมโยงจากที่นี่ดีมาก แต่ฉันเชื่อว่าไวยากรณ์ในการตอบกลับไม่ถูกต้อง

— Erica Kane

4

ถ้าคุณใช้ nginx

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

— Vincent-ซม.
แหล่งที่มา

สิ่งนี้ไม่ได้ป้องกันการร้องขอ แต่ฉันชอบมันเป็นทางเลือก

— QasimK

แน่นอนว่าถ้าคุณสามารถควบคุมเว็บเซิร์ฟเวอร์ได้

— jbruni

1

ใน Node.js

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

— Visv M
แหล่งที่มา

0

จากประสบการณ์ของเรากับ Apache ที่ล้มลงตามคำขอของ favicon.ico เราใส่เครื่องหมายส่วนหัวพิเศษไว้ในไฟล์. htaccess

ตัวอย่างเช่นเรามีชุดส่วนหัว X-XSS-Protection "1; mode = block"

... แต่เราลืม sudo a2enmod header ไว้ก่อน การแสดงความคิดเห็นส่วนหัวเพิ่มเติมที่ถูกส่งไปแก้ไขปัญหา favicon.ico ของเรา

นอกจากนี้เรายังมีโฮสต์เสมือนหลายชุดสำหรับการพัฒนาและล้มเหลวเมื่อมีข้อผิดพลาดเซิร์ฟเวอร์ภายใน 500 ข้อเมื่อใช้http: // localhostและดึงข้อมูล /favicon.ico หากคุณเรียกใช้ "curl -v http: //localhost/favicon.ico " และรับคำเตือนเกี่ยวกับชื่อโฮสต์ที่ไม่ได้อยู่ในแคชตัวแก้ไขหรือบางสิ่งบางอย่างกับผลกระทบนั้นคุณอาจประสบปัญหา

อาจเป็นเรื่องง่ายเหมือนไม่ดึงข้อมูล (เราได้ลองและไม่ได้ผลเพราะสาเหตุหลักของเราแตกต่างกัน) หรือมองหาคำสั่งใน apache2.conf หรือ. htaccess ซึ่งอาจทำให้เกิดข้อความแปลก 500 ข้อผิดพลาดเซิร์ฟเวอร์ภายใน

เราพบว่ามันล้มเหลวอย่างรวดเร็วไม่มีอะไรที่เป็นประโยชน์ในการบันทึกข้อผิดพลาดของ Apache เลยและใช้เวลาตลอดทั้งวันเปลี่ยนสิ่งเล็ก ๆ น้อย ๆ ที่นี่และที่นั่นจนกว่าเราจะแก้ไขปัญหาของการตั้งค่าส่วนหัวพิเศษเมื่อเราลืมโหลด mod_headers!

— J. Declan Young
แหล่งที่มา

0

บางครั้งข้อผิดพลาดนี้เกิดขึ้นเมื่อ HTML มีรหัสความคิดเห็นบางส่วนและเบราว์เซอร์พยายามค้นหาบางอย่าง เช่นเดียวกับในกรณีของฉันฉันได้แสดงความคิดเห็นรหัสสำหรับเว็บฟอร์มในขวดและฉันได้รับนี้

หลังจากใช้เวลา 2 ชั่วโมงฉันแก้ไขมันด้วยวิธีต่อไปนี้:

1) ฉันสร้างสภาพแวดล้อมแบบหลามใหม่จากนั้นจะเกิดข้อผิดพลาดในบรรทัด HTML ที่คอมเม้นต์ก่อนหน้านี้ฉันเพิ่งเกิดข้อผิดพลาด 'GET /favicon.ico HTTP / 1.1 "404'

2) บางครั้งเมื่อฉันมีรหัสซ้ำเช่นไฟล์ python ที่มีชื่อเดียวกันฉันก็เห็นข้อผิดพลาดนี้ให้ลองลบออกด้วย

— ohsoifelse
แหล่งที่มา

-10

คุณสามารถใช้

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

ด้วยวิธีนี้มันจะไม่ถูกร้องขอจากเซิร์ฟเวอร์

— หยอกเย้า
แหล่งที่มา

1

ดูเหมือนว่ามันอาจทำให้เบราว์เซอร์บางตัวขว้างข้อความแสดงข้อผิดพลาดที่น่ากลัวและคุณจะต้องระวังการใช้เคล็ดลับนั้นบนหน้าเว็บที่อาจแสดงผลผ่าน HTTPS

— Brighid McDonnell

6

ใช้ about: blank ดีกว่า

— ลุ