ฉันได้รับข้อผิดพลาด favicon.ico


132

ฉันดาวน์โหลด Netbeans IDE เพื่อเขียนโค้ดใน HTML ฉันยังใหม่กับมัน เมื่อฉันเรียกใช้รหัสของฉัน chrome กำลังเปิดขึ้นและทุกอย่างทำงานได้ดี ฉันได้รับข้อผิดพลาดบางอย่างในผลลัพธ์ - บันทึกเบราว์เซอร์

Failed to load resource: net::ERR_EMPTY_RESPONSE (20:00:55:963 | error, network)
at http://localhost:8383/favicon.ico

ฉันจะแก้ไขได้อย่างไร?

คำตอบ:


151

ฉันมีข้อผิดพลาดนี้มาระยะหนึ่งแล้วเช่นกัน อาจเป็นข้อผิดพลาดของ netbeans ที่เกี่ยวข้องกับตัวเชื่อมต่อ netbeans ฉันไม่พบการกล่าวถึงfavicon.icoในรหัสของฉันหรือในการตั้งค่าโครงการ

ฉันสามารถแก้ไขได้โดยใส่บรรทัดต่อไปนี้ในheadส่วนของไฟล์ html ของฉัน

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

ขณะนี้ฉันกำลังใช้สิ่งนี้ในสภาพแวดล้อมการทดสอบของฉัน แต่ฉันจะลบออกสำหรับสภาพแวดล้อมการผลิตใด ๆ


3
ฉันไม่คิดว่ามันจะเกี่ยวข้องกับ NetBeans cordova run browserมันเกิดขึ้นเมื่อใดก็ตามที่คุณทำ
Ricardo Cruz

2
สำหรับฉันตอนนี้มันเกิดขึ้นในขณะที่อยู่ในไดเรกทอรีของเว็บไซต์ของฉัน แต่มันชี้ไปที่ไดเรกทอรีรากที่กำลังมองหา favicon.ico ฉันใช้ Chrome ...
Alex Cio

4
ไม่มีส่วนเกี่ยวข้องกับ NetBeans ฉันใช้ Eclipse, PyCharm และอื่น ๆ และฉันได้รับข้อผิดพลาดเดียวกัน
Ibo

3
วิธีนี้อาจไม่ถูกต้องเนื่องจากฉันได้ลองแล้วและไม่ได้ผล ยังคงได้รับข้อผิดพลาด
Vlădel

@Tamas ใช่เหมือนกันสำหรับฉันคำตอบด้านล่างควรจะถูกต้อง
Charis Theo

131

คำตอบที่ยอมรับไม่ได้ผลสำหรับฉันฉันต้องเพิ่มค่าให้กับแอตทริบิวต์ href:

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

8
คำตอบที่ยอมรับก็ไม่ได้ผลสำหรับฉันเช่นกัน ขอบคุณสำหรับการโพสต์สิ่งนี้ ... มันได้ผลฉัน (ใน chrome)
Nirmal

1
นี่เป็นการลบข้อผิดพลาดใน Chrome เมื่อโฮสต์เพจ HTML ของฉันบน AWS S3 ถ้าไม่มีฉันได้รับข้อผิดพลาด 403 สำหรับ favicon.ico แม้ว่าจะไม่มีการอ้างอิงถึง Favicon ในโค้ดก็ตาม
MSC

เราจำเป็นต้องระบุประเภทละครใบ้สำหรับสิ่งนี้หรือไม่?
Kurkula

1
การดำเนินการนี้จะทำให้เกิดการดึงเอกสารสองครั้งในบางเบราว์เซอร์ (รวมถึง Chrome) โปรดดูstackoverflow.com/questions/2009092/…
kursus

@kursus: ดูเหมือนว่าปัญหาจะถูกระงับใน Sr Julien คำตอบstackoverflow.com/a/40527353/669527
IvanH

26

คำตอบที่ยอมรับไม่ได้ผลสำหรับฉันดังนั้นฉันจึงพบวิธีแก้ปัญหานี้

อาจเกี่ยวข้องกับเวอร์ชัน HTML เป็นโซลูชันที่ได้รับการโหวตมากที่สุดในนั้น:

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

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

ดูลิงค์สำหรับข้อมูลเพิ่มเติม


24

favicon.ico คือไอคอนของเว็บไซต์บนแถบหัวเรื่องของเว็บไซต์ของคุณ Netbeans ไม่พบไฟล์ favicon.ico ในโฟลเดอร์เว็บไซต์ของคุณ

หากคุณไม่ต้องการคุณสามารถลบบรรทัดที่คล้ายกับสิ่งนี้ในส่วนหัวของคุณได้

 <link rel="shortcut icon" href="favicon.ico">

หรือหากคุณต้องการใช้ไอคอนสำหรับแถบหัวเรื่องคุณสามารถใช้ตัวแปลงไอคอนเพื่อสร้างภาพ. ico และเก็บไว้ในโฟลเดอร์เว็บไซต์ของคุณและใช้บรรทัดด้านบนในส่วนหัว


4
ไม่มีไอคอนแบบนั้นในส่วนหัวของฉัน
Rockstar5645

1
โปรดโพสต์รหัส html ส่วนหัวของคุณเป็นการยากที่จะแก้ไขข้อผิดพลาดโดยไม่เห็นรหัส
Trinadh venna

15

คำตอบข้างต้นไม่ได้ผลสำหรับฉัน ฉันพบบทความที่ดีมากสำหรับ Faviconโดยอธิบายว่า:

  • Favicon คืออะไร
  • ทำไม Favicon.ico จึงแสดงเป็น 404 ในไฟล์บันทึก
  • ทำไมคุณควรใช้ Favicon
  • วิธีสร้าง Favicon โดยใช้FavIcon จาก Picsหรือผู้สร้าง Favicon อื่น ๆ
  • วิธีทำให้ Favicon ของคุณแสดง

ดังนั้นฉันจึงสร้าง Favicon โดยใช้FavIcon from Picsไฟล์. วางไว้ในโฟลเดอร์ (ชื่อ favicon) และเพิ่มรหัสนี้ใน<head>แท็ก:

<link rel="shortcut icon" href="favicon/favicon.ico">
<link rel="icon" type="image/gif" href="favicon/animated_favicon1.gif">

ตอนนี้ไม่มีข้อผิดพลาดและฉันเห็น Favicon ของฉัน:

ป้อนคำอธิบายภาพที่นี่


พยายามแล้ว ... ทุกอย่างทำงานได้ดีในพื้นที่ของฉัน แต่เมื่อฉันปรับใช้กับเซิร์ฟเวอร์ฉันได้รับข้อผิดพลาดนี้ ..
Ziggler

1
@ Petya Kostova ขอบคุณสำหรับลิงค์! เป็นประโยชน์มาก เพื่อเพิ่มลิงก์อีกหนึ่งลิงก์บทความนี้จะอธิบายว่าiconChrome / Firefox / etc shortcut iconเป็นอย่างไรในขณะที่สำหรับ IE สำหรับทุกคน (เช่นฉัน) ที่สงสัยว่าทำไมคุณถึงต้องการทั้งสองอย่าง
James Toomey

9

สำหรับฉันคำตอบก็ไม่ได้ผลเช่นกัน แต่ก็ใช้ได้ดี:

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

วิธีนี้แก้ปัญหาได้โดยไม่ต้องดึงข้อมูลซ้ำ
IvanH

4

คุณสามารถใส่ภาพของคุณเองและอ้างอิงในส่วนหัวได้เช่น:

<link rel="shortcut icon" href="images/favicon.ico">

3

นอกจากนี้โปรดระวังเพื่อไม่ให้ตำแหน่ง href ของคุณผิดพลาด กรณีศึกษา:

หน้าดัชนีของฉันอยู่ในโฟลเดอร์ย่อยชั่วคราวชื่อ LAYOUTS ในการเข้าถึง favicon.png จากภายในโฟลเดอร์ IMAGES ซึ่งเป็นพี่น้องของโฟลเดอร์ LAYOUTS ฉันต้องใส่เส้นทางใน href ของฉันเช่นนี้

href="../images/favicon-32x32.png"

งวดคู่เป็นสิ่งที่จำเป็นสำหรับการนำทางโฟลเดอร์ "ขึ้น"แล้วทับ + imagesสตริงทำให้คุณได้รับเป็นภาพโฟลเดอร์ (ปฏิบัติกิ่งไม้ "กระโดด") favicon-32x32.pngและในที่สุดคุณจะได้รับการอ้างอิงไฟล์ของคุณโดยการเขียน

คำอธิบายนี้มีประโยชน์สำหรับผู้ที่เริ่มต้นใหม่และมันจะมีประโยชน์ที่จะได้เห็นมันสองสามครั้งเนื่องจากฉันจะลืมว่าฉันมีไฟล์ * .php บางไฟล์อยู่นอกโฟลเดอร์ LAYOUTS ซึ่งต้องการต้นไม้ hrefs ที่แตกต่างกันในลิงก์ของฉัน จากส่วน HEAD ของแต่ละหน้า

อ้างอิงเส้นทางไปยังภาพไอคอน Fav ของคุณตามนั้น


1
ฉันไม่แน่ใจว่าควรใช้เส้นทางสัมพัทธ์โดยตรงหรือไม่ โดยทั่วไปฉันจะใช้ @ Url.Content ("~ / Images / favicon.ico") หากใช้ MVC หรือ ASP.NET Web API เพื่อแก้ไข URL ทั้งหมดก่อนที่จะส่งลงไปยังไคลเอนต์
justdan23

2

ปัญหานี้เกิดขึ้นเมื่อคุณไม่ได้ประกาศที่ด้านบนของไฟล์ HTML ของคุณใน HEDER แท็กนี้

<link rel="icon" href="your_address_icon" type="image/x-icon">

0

ฉันมีสถานการณ์แปลก ๆ ของฉันทำงานได้ดีและหยุดกะทันหันด้วยข้อความแสดงข้อผิดพลาดนั้น ฉันมีการประกาศส่วนหัวแล้ว ดังนั้นฉันจึงรู้สึกโง่ว่าทำไมมันถึงไม่ทำงาน

<link rel="shortcut icon" href="favicon.png">

แท้จริงแล้วไม่มีอะไรอื่นในไซต์ที่มีปัญหาที่ฉันสามารถบอกได้ สิ่งเดียวที่แก้ไขให้ฉันคือเริ่มบริการ Apache ของฉันใหม่และทุกอย่างก็ดีอีกครั้ง

ถ้าไม่มีอะไรทำงานให้ลองดูว่าเกิดอะไรขึ้น


0

มันเป็นฝันร้ายเนื่องจากเบราว์เซอร์ / อุปกรณ์แต่ละตัวจัดการมันไม่เหมือนกัน

Favicon generator ช่วยฉันได้มากสำหรับแอปพลิเคชันเหล่านั้นที่เราต้องการครอบคลุมสถานการณ์ที่เป็นไปได้มากที่สุด

https://realfavicongenerator.net/

คุณเพียงแค่ต้องมีรูปภาพ png 260px x 260px (อย่างน้อย) จากนั้นตัวสร้างจะสร้างการอ้างอิงทั้งหมดที่คุณต้องการภายในหน้าเว็บของคุณ

คุณเพียงแค่ต้องเพิ่มข้อมูลอ้างอิงและรูปภาพนี้ลงในแอปพลิเคชันของคุณ

ป้อนคำอธิบายภาพที่นี่


0

ในAngularก่อนหน้านี้เรามีไฟล์ที่เรียกว่า.angular-cli.json favicon.icoหากคุณจะอัปเกรดเป็นเวอร์ชันที่ใหม่กว่าAngularคุณจะมีangular.jsonแทน สำหรับเวอร์ชันที่ใหม่กว่านี้คุณต้องอ้างอิงเส้นทางไอคอน Fav ในของคุณindex.htmlนับจากนี้เป็นต้นไป


-1

ฉันได้รับข้อผิดพลาดไอคอน fav เดียวกัน - 404 (ไม่พบ) ฉันใช้องค์ประกอบต่อไปนี้ใน<head>องค์ประกอบของไฟล์ index.html ของฉันและแก้ไขข้อผิดพลาด:

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

1
คำอธิบายในการแก้ไขข้อผิดพลาดจะมีประโยชน์มากลองเพิ่มรายละเอียด come เกี่ยวกับคำตอบของคุณ
bjoster
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.