ปัญหาหลักที่เกี่ยวข้องกับ favicon สำหรับหน้า HTML คืออาจใช้งานได้ยาก ไอคอน Favicon เป็นไอคอนขนาดเล็กที่ปรากฏในแท็บเบราว์เซอร์หรือแถบที่อยู่ของเว็บไซต์ และมักใช้เพื่อระบุเว็บไซต์หรือแบรนด์ หากต้องการเพิ่ม favicon ให้กับหน้า HTML จะต้องบันทึกไอคอนเป็นไฟล์ .ico จากนั้นจึงเชื่อมโยงในโค้ด HTML โดยใช้ แท็ก อาจเป็นเรื่องยุ่งยากสำหรับผู้ที่ไม่คุ้นเคยกับการเขียนโค้ด เนื่องจากมีหลายขั้นตอนที่เกี่ยวข้องและต้องใช้ความรู้ด้านไวยากรณ์ HTML นอกจากนี้ เบราว์เซอร์บางตัวอาจไม่รู้จัก favicon หากติดตั้งไม่ถูกต้อง
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
1. โค้ดบรรทัดนี้สร้างลิงก์ไปยังไฟล์ภายนอกชื่อ “favicon.ico”
2. ลิงก์ได้รับแอตทริบิวต์ “rel” พร้อมค่า “ไอคอนทางลัด” ซึ่งระบุว่านี่คือไอคอนทางลัดสำหรับเว็บไซต์
3. แอตทริบิวต์ href ให้เส้นทางไปยังไฟล์ favicon ซึ่งในกรณีนี้คือ "favicon.ico"
4. แอตทริบิวต์ type ระบุว่าไฟล์นี้เป็นรูปภาพประเภท x-icon ซึ่งเป็นรูปภาพประเภทพิเศษที่ใช้สำหรับไอคอนและโลโก้ของเว็บไซต์
favicon คืออะไร
Favicon เป็นไอคอนขนาดเล็กที่เกี่ยวข้องกับเว็บไซต์หรือหน้าเว็บ โดยทั่วไปจะแสดงในแถบที่อยู่ของเบราว์เซอร์ ถัดจาก URL ของไซต์ นอกจากนี้ยังสามารถใช้เพื่อระบุบุ๊กมาร์กในเว็บเบราว์เซอร์และเป็นไอคอนสำหรับทางลัดบนคอมพิวเตอร์และอุปกรณ์พกพา ปกติไอคอน Favicon จะมีขนาด 16×16 พิกเซลและบันทึกเป็นไฟล์ .ico
วิธีเพิ่ม Favicon ให้กับเว็บไซต์ของคุณ
การเพิ่ม favicon ให้กับเว็บไซต์ของคุณเป็นวิธีที่ยอดเยี่ยมในการเพิ่มชั้นพิเศษของแบรนด์และเอกลักษณ์ให้กับไซต์ของคุณ Favicons เป็นไอคอนขนาดเล็กที่ปรากฏในแท็บเบราว์เซอร์ถัดจากชื่อเว็บไซต์ของคุณ นอกจากนี้ยังสามารถใช้เป็นทางลัดบนอุปกรณ์เคลื่อนที่ ทำให้ผู้ใช้ค้นหาและเข้าถึงไซต์ของคุณได้ง่ายขึ้น
หากต้องการเพิ่ม favicon ให้กับเว็บไซต์ของคุณใน HTML คุณต้องมีไฟล์รูปภาพที่มีนามสกุล .ico รูปภาพนี้ควรมีขนาด 16×16 พิกเซลหรือ 32×32 พิกเซล เมื่อคุณสร้างหรือรับไฟล์ภาพนี้แล้ว คุณสามารถอัปโหลดไปยังไดเร็กทอรีรากของเว็บไซต์ของคุณ
เมื่ออัปโหลดแล้ว คุณจะต้องเพิ่มองค์ประกอบลิงก์ภายในส่วนหัวของแต่ละหน้าในไซต์ของคุณซึ่งชี้ไปที่ไฟล์รูปภาพนี้:
องค์ประกอบลิงก์นี้บอกเบราว์เซอร์ว่าพวกเขาสามารถหา favicon สำหรับเว็บไซต์ของคุณได้จากที่ใด เพื่อให้สามารถแสดงได้อย่างถูกต้องเมื่อมีคนเยี่ยมชมหน้าใดหน้าหนึ่ง
สุดท้าย หากคุณต้องการให้เบราว์เซอร์อย่าง Chrome และ Firefox แสดง favicon เวอร์ชันที่ใหญ่ขึ้น (192×192 พิกเซล) คุณจะต้องสร้างไอคอนเวอร์ชันอื่นและอัปโหลดไปยังไดเร็กทอรีหลักด้วย:
เมื่อขั้นตอนทั้งหมดเหล่านี้เสร็จสมบูรณ์ ตอนนี้ผู้เยี่ยมชมควรเห็น favicon ที่กำหนดเองของคุณเมื่อพวกเขาเยี่ยมชมหน้าใด ๆ ในเว็บไซต์ของคุณ!
