แนวทางปฏิบัติที่ดีที่สุดในการติดตั้ง Favicon สำหรับเว็บไซต์ของคุณ

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

ปัจจุบันไอคอนประจำเว็บไซต์เป็นองค์ประกอบการสร้างแบรนด์ที่จำเป็นของทุกเว็บไซต์ แต่มักถูกมองข้าม... ไม่ควรมองข้าม โดยทั่วไป Favicons จะแสดงในตำแหน่งต่างๆ ภายในเว็บเบราว์เซอร์ เพื่อช่วยให้ผู้ใช้ระบุและบุ๊กมาร์กเว็บไซต์ได้ นี่คือประเด็นสำคัญบางประการเกี่ยวกับไอคอน Fav:

• แท็บเบราว์เซอร์: เมื่อผู้ใช้เปิดเว็บไซต์ในเว็บเบราว์เซอร์ ไอคอน Fav จะแสดงในแท็บเบราว์เซอร์ถัดจากชื่อหน้า นี่เป็นตัวระบุแบบภาพสำหรับแท็บที่เปิดอยู่ ทำให้ผู้ใช้สามารถค้นหาและสลับระหว่างหลายแท็บได้ง่ายขึ้น
• ที่คั่นหน้าและรายการโปรด: เมื่อผู้ใช้บุ๊กมาร์กหรือบันทึกเว็บไซต์เป็นรายการโปรด ไอคอน Fav มักจะแสดงอยู่ข้างชื่อเว็บไซต์ในบุ๊กมาร์กหรือเมนูรายการโปรด ช่วยให้ผู้ใช้ระบุและเข้าถึงเว็บไซต์ที่บันทึกไว้ได้อย่างรวดเร็ว
• แถบที่อยู่ของเบราว์เซอร์: ในบางเบราว์เซอร์ เมื่อผู้ใช้เยี่ยมชมเว็บไซต์ ไอคอน Fav จะแสดงในแถบที่อยู่ของเบราว์เซอร์หรือแถบอเนกประสงค์ นี่เป็นการเพิ่มองค์ประกอบภาพให้กับ URL ของเว็บไซต์
• ผลการค้นหา: เครื่องมือค้นหาบางตัวอาจแสดงไอคอน Fav ถัดจากผลการค้นหา ช่วยให้ผู้ใช้ระบุเว็บไซต์ในรายการค้นหาได้อย่างง่ายดาย

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

ประเภทไฟล์ไอคอน

เดิมทีพวกเขาต้องการการ ICO แต่มีการพัฒนาให้มีหลายแพลตฟอร์มที่สามารถแสดงได้ PNG และ SVG ไฟล์. ไฟล์ ICO ถือได้ว่าเป็นการรวบรวมภาพไอคอนหลายภาพเป็นไฟล์เดียว เมื่อคุณสร้างไฟล์ ICO คุณจะรวบรวมภาพไอคอนต่างๆ ที่มีขนาดและความลึกของสีต่างๆ ไว้ในไฟล์เดียวที่มีโครงสร้างเฉพาะ ไฟล์ ICO ทำงานดังนี้:

1. ภาพไอคอนหลายรายการ: โดยทั่วไปไฟล์ ICO จะมีรูปภาพไอคอนหลายรูปซึ่งมีขนาดและความลึกของสีต่างกัน รูปภาพเหล่านี้แสดงถึงไอคอนเดียวกัน แต่ได้รับการออกแบบมาให้แสดงในขนาดต่างๆ โดยไม่สูญเสียคุณภาพ
2. ไดเร็กทอรีไอคอน: ภายในไฟล์ ICO จะมีไดเร็กทอรีไอคอนที่ระบุคุณลักษณะของรูปภาพไอคอนแต่ละรูป รวมถึงขนาด ความลึกของสี และตำแหน่งภายในไฟล์
3. ข้อมูลส่วนหัว: ไฟล์ ICO ยังมีข้อมูลส่วนหัวที่ให้รายละเอียดที่จำเป็นเกี่ยวกับไฟล์ เช่น จำนวนภาพไอคอนที่จัดเก็บไว้ในไฟล์
4. ข้อมูลรูปภาพ: ภาพไอคอนแต่ละภาพในไฟล์ ICO จะถูกจัดเก็บเป็นข้อมูลภาพดิบโดยไม่มีการบีบอัด ช่วยให้สามารถเข้าถึงและแสดงภาพไอคอนแต่ละภาพได้อย่างรวดเร็วด้วยซอฟต์แวร์
5. การเรียกค้นไอคอน: เมื่อแอพพลิเคชั่นหรือระบบปฏิบัติการจำเป็นต้องแสดงไอคอนที่เกี่ยวข้องกับไฟล์ โฟลเดอร์ ทางลัด หรือแอพพลิเคชั่น แอพพลิเคชั่นนั้นสามารถดึงภาพไอคอนที่เหมาะสมจากไฟล์ ICO ตามขนาดและความลึกของสีที่ต้องการ

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

วิธีสร้างไฟล์ ICO

ในความคิดของฉัน มันค่อนข้างแปลกที่ Adobe Illustrator และ Photoshop ไม่สร้างไฟล์ .ICO ตามค่าเริ่มต้น (มีปลั๊กอินให้ใช้งาน) คุณสามารถส่งออกรูปภาพแต่ละขนาดโดยใช้รูปภาพเหล่านี้ได้… จากนั้นจึงสร้างรูปภาพโดยใช้วิธีใดวิธีหนึ่งต่อไปนี้:

• GIMP รองรับไฟล์ ICO โดยกำเนิด เป็นแพลตฟอร์มโอเพ่นซอร์สฟรีสำหรับระบบปฏิบัติการทั้งหมด
• ImageMagick เป็นบริการโอเพ่นซอร์สฟรีที่คุณสามารถโหลดลงในพีซีหรือ Mac ของคุณได้ ทำให้คุณสามารถรวมไฟล์หลายไฟล์ของคุณเป็นไฟล์ ICO ได้ คำสั่งตัวอย่าง:

convert image1.png image2.png image3.png favicon.ico

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

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

ตรวจสอบ Favicon ของเว็บไซต์ของคุณ

แนวทางปฏิบัติที่ดีที่สุดสำหรับ Favicon HTML

เบราว์เซอร์จัดลำดับความสำคัญของการเลือกไอคอน Fav โดยพิจารณาจากปัจจัยหลายประการ รวมถึงรูปแบบ ขนาด และการมีอยู่ของการประกาศเฉพาะ ต่อไปนี้เป็นวิธีที่เบราว์เซอร์มักจะจัดลำดับความสำคัญและเลือกไอคอน Fav:

1. ลำดับความสำคัญของรูปแบบไฟล์: เบราว์เซอร์มักจะจัดลำดับความสำคัญของไฟล์ .ico เมื่อมีอยู่ เนื่องจากนี่คือรูปแบบ favicon ดั้งเดิม หากคุณจัดเตรียม .ico favicon โดยใช้ <link rel="icon" type="image/x-icon" href="favicon.ico">ซึ่งมักจะมีความสำคัญเหนือกว่ารูปแบบอื่นๆ
2. ลำดับความสำคัญของขนาด: เบราว์เซอร์ยังพิจารณาแอตทริบิวต์ขนาดเพื่อเลือก favicon ที่เหมาะสมที่สุดสำหรับบริบท หากคุณระบุขนาดที่แตกต่างกันสำหรับไอคอน Fav .png หรือ .svg เบราว์เซอร์จะเลือกขนาดที่ตรงกับความต้องการในการแสดงผลของอุปกรณ์มากที่สุด
3. SVG ขนาด “ใดก็ได้”: เมื่อคุณใช้ค่า “ใด ๆ” สำหรับ sizes แอตทริบิวต์ในการประกาศไอคอน Fav SVG (sizes="any") แสดงว่า SVG สามารถปรับให้เข้ากับขนาดใดก็ได้ เบราว์เซอร์อาจจัดลำดับความสำคัญของ SVG ด้วยขนาด “ใดก็ได้” เพื่อให้แน่ใจว่าจะปรับขนาดให้พอดีกับความละเอียดหน้าจอต่างๆ
4. การประกาศครั้งสุดท้ายมีความสำคัญเหนือกว่า: หากคุณระบุการประกาศไอคอน Fav หลายรายการด้วยรูปแบบและขนาดเดียวกัน โดยทั่วไปเบราว์เซอร์จะเลือกการประกาศครั้งล่าสุดที่พบใน HTML ดังนั้นคำสั่งของคุณ <link> องค์ประกอบมีความสำคัญ สิ่งสุดท้ายที่พบจะถูกจัดลำดับความสำคัญ
5. ย้อนกลับไปยังไอคอนเริ่มต้น: หากไม่มีไอคอน Fav ที่ระบุตรงกับเกณฑ์ของเบราว์เซอร์ หรือไม่มีการประกาศไอคอน Fav เบราว์เซอร์อาจใช้ไอคอนเริ่มต้น (เช่น ไอคอนของเบราว์เซอร์) หรือไม่ใช้ไอคอนเลย
6. การตั้งค่าของผู้ใช้: เบราว์เซอร์บางตัวอนุญาตให้ผู้ใช้ตั้งค่ากำหนดสำหรับไอคอน Fav ตัวเลือกของผู้ใช้อาจแทนที่ไอคอน Fav ที่ระบุของเว็บไซต์ในกรณีดังกล่าว

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

นี่คือวิธีที่คุณสามารถทำได้:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Website Title</title>

    <!-- Favicon Declarations -->

    <!-- .ico Format (for maximum compatibility) -->
    <link rel="icon" type="image/x-icon" href="favicon.ico">

    <!-- .png Format (for modern browsers) -->
    <link rel="icon" type="image/png" href="favicon.png" sizes="32x32">

    <!-- .svg Format (preferred) -->
    <link rel="icon" type="image/svg+xml" href="favicon.svg" sizes="any">

    <!-- Alternative Text for Accessibility -->
    <link rel="icon" type="image/svg+xml" href="favicon.svg" sizes="any" alt="Your Website Favicon">

    <!-- Additional Sizes (optional) -->
    <link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16">
    <link rel="icon" type="image/png" href="favicon-48x48.png" sizes="48x48">

    <!-- End of Favicon Declarations -->

    <!-- Your other meta tags, styles, and scripts go here -->

</head>
<body>
    <!-- Your website content goes here -->
</body>
</html>

ในตัวอย่างนี้ รูปแบบ .ico ยังคงรวมอยู่ด้วยเพื่อความเข้ากันได้สูงสุด แต่รูปแบบ SVG จะถูกระบุสุดท้ายด้วย ใด คุณลักษณะขนาด การตั้งค่านี้ให้การตั้งค่ารูปแบบ SVG ที่สูงกว่าในขณะที่ยังคงให้รูปแบบ .ico เป็นทางเลือกสำหรับเบราว์เซอร์ที่จัดลำดับความสำคัญ โดยระบุ SVG สุดท้ายด้วย ใด ขนาดแอตทริบิวต์ คุณจะเพิ่มโอกาสที่เบราว์เซอร์สมัยใหม่จะเลือก SVG เป็นรูปแบบไอคอน Fav ที่ต้องการ เนื่องจากสามารถปรับให้เข้ากับขนาดต่างๆ ได้