โลโก้สีดำบนพื้นโปร่งใสดูดีในแท็บสว่าง แต่หายไปในแท็บมืด รูปแบบ ICO ปรับตัวไม่ได้ แต่ฟาวิคอน SVG ทำได้ด้วยกฎ CSS ที่เปลี่ยนสีตามธีมเบราว์เซอร์
ปัญหา: ไฟล์เดียว สองพื้นหลัง
เมื่อเบราว์เซอร์ใช้ธีมตามระบบ แถบแท็บของผู้เยี่ยมชมคนหนึ่งอาจเกือบขาว ขณะที่อีกคนเกือบดำทั้งที่เปิดหน้าเดียวกัน ฟาวิคอนสีเดียวที่ออกแบบสำหรับพื้นหนึ่งจึงอ่านไม่ออกบนอีกพื้น
หลายเว็บไซต์แก้ด้วยพื้นหลังสีทึบ วิธีนี้ใช้ได้ แต่ไอคอนดูเป็นก้อนหนัก ขณะที่แบรนด์ใหญ่หลายแห่งใช้เพียงสัญลักษณ์ที่ตัดพื้นออก
วิธีที่เหมาะคือให้เบราว์เซอร์เลือกเอง ซึ่งทำได้โดยไม่ใช้ JavaScript หรือการตรวจจับฝั่งเซิร์ฟเวอร์
SVG ที่ปรับตามธีมทำงานอย่างไร
ไฟล์ SVG เป็นเอกสาร ไม่ใช่ภาพแบน จึงใส่แท็ก style และ media query ได้ กฎ prefers-color-scheme: dark ภายในไฟล์จะกำหนดสี fill ของเส้นใหม่เมื่อเบราว์เซอร์ใช้ธีมมืด
ในทางปฏิบัติ SVG กำหนดสีเริ่มต้นสำหรับธีมสว่าง แล้วเพิ่มกฎแทนสีในโหมดมืด เบราว์เซอร์เลือกกฎตอนแสดงผลและอัปเดตแท็บทันทีเมื่อผู้ใช้สลับธีม
กลไกนี้ทำได้มากกว่ากลับสี คุณใช้ภาพคนละแบบได้ เช่น สัญลักษณ์ตัดพื้นในธีมสว่าง และตราพื้นทึบในธีมมืด
ประกาศ SVG ควบคู่กับ .ico
ประกาศ SVG ด้วย link rel="icon" type="image/svg+xml" href="/favicon.svg" เบราว์เซอร์ที่รองรับจะเลือกใช้ ส่วนที่ไม่รองรับจะใช้ favicon.ico ที่รากเว็บไซต์แทน
จึงไม่ต้องลบไฟล์ใด ทั้งสองอยู่ร่วมกันเพื่อครอบคลุมโปรแกรมต่างกลุ่ม นี่คือการเพิ่มความสามารถตามการรองรับที่ใช้กับไอคอนขนาด 32 พิกเซล
ข้อควรระวังคือฟาวิคอน SVG ต้องทำงานได้ด้วยตัวเอง แบบอักษรภายนอก ภาพออนไลน์ และสคริปต์จะไม่ถูกโหลดในบริบทนี้ ต้องแปลงข้อความเป็นเส้นเวกเตอร์
โหมดมืดไม่ครอบคลุมอะไรบ้าง
เวอร์ชันธีมมืดใช้กับฟาวิคอนเบราว์เซอร์เดสก์ท็อป ไม่เปลี่ยนไอคอน Apple Touch ซึ่งเป็น PNG ทึบคงที่ และไม่เปลี่ยนไอคอนเว็บแมนิเฟสต์ที่ Android วาดบนพื้นหลังของระบบเอง
การรองรับยังไม่ทั่วถึง เบราว์เซอร์ที่ใช้ Chromium และ Firefox อ่าน SVG ปรับตามธีมได้ ส่วน Safari ขึ้นอยู่กับรุ่น แต่ยังใช้ .ico สำรองได้อัตโนมัติ
จึงควรออกแบบไอคอนธีมสว่างเป็นค่าเริ่มต้นที่ทุกคนเห็น แล้วใช้เวอร์ชันธีมมืดเป็นการปรับปรุงสำหรับเบราว์เซอร์ที่รองรับ
แหล่งข้อมูลต้นทาง
คำถามที่พบบ่อย
favicon.ico รองรับโหมดมืดได้ไหม?
ไม่ได้ ICO เก็บภาพราสเตอร์คงที่และไม่รู้จักธีม มีเพียง SVG ที่ใส่ media query ได้ ชุดไฟล์สมัยใหม่จึงมีทั้งสองแบบ
ต้องใช้ SVG สองไฟล์สำหรับธีมสว่างและมืดหรือไม่?
ไม่จำเป็น ไฟล์เดียวก็พอ ทั้งสองเวอร์ชันอยู่ใน SVG เดียวกัน แยกด้วย media query prefers-color-scheme จึงไม่ต้องขอไฟล์เพิ่มหรือเขียนโค้ดตรวจธีม
ทดสอบการแสดงผลธีมมืดอย่างไร?
เปลี่ยนธีมระบบปฏิบัติการแล้วโหลดแท็บใหม่ ในเครื่องมือสร้างมีตัวอย่างแท็บสว่างและมืดวางคู่กัน จึงไม่ต้องสลับไปมา