จำเป็นต้องเพิ่มลิงค์แท็กสำหรับ favicon.ico หรือไม่

มีเบราว์เซอร์สมัยใหม่ที่ไม่ตรวจพบ favicon.ico โดยอัตโนมัติหรือไม่? มีเหตุผลใดที่จะเพิ่มแท็กลิงค์สำหรับ favicon.ico?

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

ฉันเดาว่ามันเป็นสิ่งจำเป็นเท่านั้นที่จะรวมไว้ในเอกสาร HTML หากคุณตัดสินใจที่จะไปกับ GIF หรือ PNG ...

หากต้องการเลือกตำแหน่งหรือประเภทไฟล์อื่น (เช่นPNGหรือSVG )สำหรับ favicon:
เหตุผลหนึ่งอาจเป็นเพราะคุณต้องการให้ไอคอนอยู่ในตำแหน่งเฉพาะบางทีในโฟลเดอร์รูปภาพหรือบางสิ่งบางอย่างเหมือนกัน ตัวอย่างเช่น:

<link rel="icon" href="_/img/favicon.png">

สถานที่ที่แตกต่างกันนี้ยังอาจจะเป็น CDN <link rel="shortcut icon" href="http://cdn.sstatic.net/stackoverflow/img/favicon.ico">เช่นเดียวดังนั้นดูเหมือนว่าจะทำอย่างไรกับ

หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับการใช้ไฟล์ประเภทอื่นเช่น PNG ลองดูคำถามนี้

สำหรับวัตถุประสงค์ในการป้องกันแคช :
เพิ่มสตริงแบบสอบถามลงในพา ธ เพื่อวัตถุประสงค์ในการป้องกันแคช:

<link rel="icon" href="/favicon.ico?v=1.1"> 

Favicons ถูกแคชไว้อย่างหนักและเป็นวิธีที่ดีในการรับรองความสดชื่น

เชิงอรรถเกี่ยวกับตำแหน่งเริ่มต้น:
เท่าที่คำถามแรก: เบราว์เซอร์ที่ทันสมัยทั้งหมดจะตรวจพบ favicon ที่ตำแหน่งเริ่มต้นดังนั้นจึงไม่มีเหตุผลที่จะใช้linkสำหรับ

เชิงอรรถเกี่ยวกับrel="icon":
ตามที่ระบุโดยคำตอบของ @ Semanino การใช้rel="shortcut icon"เป็นเทคนิคเก่าที่ Internet Explorer รุ่นเก่าต้องการ แต่ในกรณีส่วนใหญ่สามารถแทนที่ด้วยrel="icon"คำสั่งที่ถูกต้องมากขึ้น บทความ @Semanino อิงตามลิงก์ที่ถูกต้องไปยังข้อมูลจำเพาะที่เหมาะสมซึ่งแสดงrelค่าshortcutไม่ใช่ตัวเลือกที่ถูกต้อง

โปรดทราบว่าทั้งข้อกำหนด HTML5 ของ W3C และ WhatWG เป็นมาตรฐาน

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

บันทึกค่าของแอตทริบิวต์ "rel"!

ค่าshortcut iconสำหรับrelแอตทริบิวต์เป็นส่วนขยายเฉพาะ Internet Explorer เก่ามากและเลิกใช้

ดังนั้นโปรดพิจารณาไม่ใช้มันอีกต่อไปและอัปเดตไฟล์ของคุณเพื่อให้เป็นไปตามมาตรฐานและแสดงอย่างถูกต้องในเบราว์เซอร์ทั้งหมด

คุณอาจต้องการดูโพสต์ที่ยอดเยี่ยมนี้: rel = "ไอคอนทางลัด" ถือว่าเป็นอันตราย

<link rel="icon" type="image/x-icon" href="http://example.com/favicon.ico" />
<link rel="icon" type="image/png" href="http://example.com/favicon.png" />
<link rel="icon" type="image/gif" href="http://example.com/favicon.gif" />
<link rel="icon" type="image/jpeg" href="http://example.com/favicon.jpeg" />
<link rel="icon" type="image/webp" href="http://example.com/favicon.webp" />

ทุกอย่างขึ้นอยู่กับรูปแบบของภาพที่คุณต้องการใช้!
ถ้าคุณมีไอคอนของเว็บไซต์ของคุณมันจะดีกว่ามากสำหรับ UX!

การสาธิต

แสดงโลโก้ในแท็บเบราว์เซอร์

เราสามารถเพิ่มอุปกรณ์ทั้งหมดที่มีขนาดเฉพาะแพลตฟอร์ม

<link rel="apple-touch-icon" sizes="57x57" href="fav_icons/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="fav_icons/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="fav_icons/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="fav_icons/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="fav_icons/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="fav_icons/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="fav_icons/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="fav_icons/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="fav_icons/apple-icon-180x180.png">

<link rel="icon" type="image/png" sizes="192x192"  href="fav_icons/android-icon-192x192.pn">
<link rel="icon" type="image/png" sizes="32x32" href="fav_icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="fav_icons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="fav_icons/favicon-16x16.png">

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