Favicon ย่อมาจาก "ไอคอนรายการโปรด" คือรูปภาพหรือไอคอนขนาดเล็กที่แสดงถึงเว็บไซต์และแสดงในที่ต่างๆ รวมถึงแท็บเบราว์เซอร์เมื่อดูเว็บไซต์ ในด้านของการพัฒนาเว็บไซต์ โดยเฉพาะ HTML และ CSS การเพิ่ม favicon ให้กับเว็บไซต์เป็นการปฏิบัติทั่วไปในการปรับปรุงประสบการณ์ผู้ใช้และการจดจำแบรนด์
เมื่อผู้ใช้เข้าชมเว็บไซต์ เบราว์เซอร์จะขอเอกสาร HTML ของเว็บไซต์จากเซิร์ฟเวอร์ ภายในเอกสาร HTML มีแท็ก HTML เฉพาะที่เรียกว่าแท็ก "ลิงก์" ซึ่งใช้เพื่อกำหนด favicon สำหรับเว็บไซต์ แท็กลิงก์จะอยู่ภายในส่วน "ส่วนหัว" ของเอกสาร HTML และมีแอตทริบิวต์เฉพาะที่เรียกว่า "rel" ซึ่งตั้งค่าเป็น "ไอคอน" หรือ "ไอคอนทางลัด" เพื่อระบุว่าเป็นตัวแทนของไอคอน favicon
แอตทริบิวต์ "href" ของแท็กลิงก์ระบุตำแหน่งของไฟล์รูปภาพ favicon นี่อาจเป็น URL สัมพัทธ์หรือสัมบูรณ์ โปรดทราบว่าไฟล์รูปภาพ favicon จะต้องอยู่ในรูปแบบที่รองรับ เช่น ICO, PNG หรือ GIF ขนาดที่แนะนำสำหรับ favicon คือ 16×16 พิกเซลหรือ 32×32 พิกเซล แม้ว่าบางเบราว์เซอร์จะรองรับขนาดใหญ่กว่าเช่นกัน
ต่อไปนี้คือตัวอย่างวิธีการใช้แท็กลิงก์สำหรับ favicon ใน HTML:
html <head> <link rel="icon" href="favicon.ico" type="image/x-icon"> </head>
ในตัวอย่างนี้ ไฟล์รูปภาพ favicon มีชื่อว่า "favicon.ico" และอยู่ในไดเร็กทอรีเดียวกับเอกสาร HTML แอตทริบิวต์ "type" ระบุประเภท MIME ของไฟล์ภาพ favicon ซึ่งช่วยให้เบราว์เซอร์เข้าใจวิธีจัดการ
เมื่อเบราว์เซอร์โหลดเอกสาร HTML แล้ว เบราว์เซอร์จะมองหาแท็กลิงก์ favicon และดึงไฟล์รูปภาพ favicon ที่ระบุในแอตทริบิวต์ "href" จากนั้นเบราว์เซอร์จะแสดงไอคอน Favicon ในแท็บเบราว์เซอร์ถัดจากชื่อเว็บไซต์หรือในแถบที่อยู่ ขึ้นอยู่กับเบราว์เซอร์
การมี favicon ให้ประโยชน์หลายประการ ประการแรก ช่วยให้ผู้ใช้ระบุและแยกแยะระหว่างแท็บที่เปิดอยู่หลายแท็บในเบราว์เซอร์ได้อย่างง่ายดาย โดยเฉพาะอย่างยิ่งเมื่อเปิดหลายแท็บพร้อมกัน ประการที่สอง มันเพิ่มความเป็นมืออาชีพให้กับเว็บไซต์และเพิ่มความน่าดึงดูดใจให้กับเว็บไซต์ ประการสุดท้าย มีส่วนช่วยในการจดจำแบรนด์ เนื่องจากไอคอน Favicon มักจะแสดงถึงโลโก้ของเว็บไซต์หรือสัญลักษณ์ที่เป็นที่รู้จักที่เกี่ยวข้องกับแบรนด์
Favicon คือรูปภาพหรือไอคอนขนาดเล็กที่แสดงถึงเว็บไซต์และปรากฏในแท็บเบราว์เซอร์เมื่อดูเว็บไซต์ มันถูกเพิ่มลงในเอกสาร HTML ของเว็บไซต์โดยใช้แท็กลิงก์โดยตั้งค่าแอตทริบิวต์ "rel" เป็น "ไอคอน" หรือ "ไอคอนทางลัด" และแอตทริบิวต์ "href" ที่ชี้ไปยังตำแหน่งของไฟล์รูปภาพ favicon ไอคอน Favicon ช่วยเพิ่มประสบการณ์ของผู้ใช้ เพิ่มความดึงดูดสายตา และส่งเสริมการจดจำแบรนด์
คำถามและคำตอบล่าสุดอื่น ๆ เกี่ยวกับ การเพิ่มไอคอน Fav ให้กับเว็บไซต์ในรูปแบบ HTML:
- แอตทริบิวต์ใดที่ใช้ในองค์ประกอบลิงก์เพื่อระบุตำแหน่งและรูปแบบของ favicon
- ควรใช้องค์ประกอบ HTML ใดเพื่อระบุ favicon ในเอกสาร HTML
- ควรวางไฟล์รูปภาพ favicon ไว้ที่ใดในโครงสร้างไดเร็กทอรีของเว็บไซต์
- รูปแบบและขนาดภาพที่แนะนำสำหรับ favicon คืออะไร?