ขนาด รูปแบบ และแท็ก HTML ของ Favicon
Favicon เป็นไฟล์ขนาดเล็ก แต่เบราว์เซอร์ โทรศัพท์ และเว็บแอปที่ติดตั้งไว้ต่างก็มองหาขนาดที่ต่างกัน คู่มือนี้อธิบายว่าเว็บไซต์ต้องมีไฟล์อะไรบ้าง วิธีประกาศไฟล์เหล่านั้นใน HTML และวิธีออกแบบไอคอนที่ยังมองออกได้ที่ขนาด 16 พิกเซล
Favicon คืออะไร
Favicon (ย่อมาจาก "favourites icon") คือภาพขนาดเล็กที่ใช้ระบุเว็บไซต์ในแท็บ บุ๊กมาร์ก และรายการประวัติ โทรศัพท์ใช้เวอร์ชันที่ใหญ่กว่าเมื่อเพิ่มเว็บไซต์ลงในหน้าจอหลัก เว็บแอปที่ติดตั้งไว้ใช้ไอคอนจาก manifest ของแอป และเครื่องมือค้นหาบางแห่งแสดง Favicon ข้างผลการค้นหา เนื่องจากแต่ละที่ใช้ขนาดต่างกัน เว็บไซต์จึงมักมีไฟล์ชุดเล็ก ๆ หลายไฟล์
Favicon แบบ ICO, PNG และ SVG
| รูปแบบ | สิ่งที่อยู่ในไฟล์ | สิ่งที่ควรรู้ |
|---|---|---|
ICO (favicon.ico) | หลายขนาดในไฟล์เดียว มักเป็น 16, 32 และ 48 พิกเซล | รูปแบบที่เก่าแก่ที่สุด เบราว์เซอร์หลายตัวขอไฟล์ /favicon.ico จากรากของเว็บไซต์แม้หน้าเว็บไม่ได้ลิงก์ไว้ จึงเป็นไฟล์สำรองที่มีประโยชน์ |
| PNG | หนึ่งขนาดต่อหนึ่งไฟล์ รองรับความโปร่งใส | ประกาศด้วยแอตทริบิวต์ sizes เพื่อให้เบราว์เซอร์เลือกไฟล์ที่เหมาะสมได้ ใช้สำหรับ Apple touch icon และไอคอนใน manifest ด้วย |
| SVG | ภาพเวกเตอร์ที่ปรับให้เป็นขนาดใดก็ได้ | เบราว์เซอร์เดสก์ท็อปรุ่นปัจจุบันส่วนใหญ่รองรับ แต่ไม่ใช่ทุกเบราว์เซอร์ จึงควรมีไฟล์ ICO หรือ PNG ไว้ด้วย Favicon แบบ SVG ปรับตามธีมมืดได้ด้วย CSS |
ไฟล์ ICO เป็นคอนเทนเนอร์ขนาดเล็ก ส่วนหัวของไฟล์จะระบุภาพแต่ละภาพพร้อมขนาดและตำแหน่ง และภาพเหล่านั้นเก็บเป็นข้อมูล PNG ได้ เครื่องมือสร้าง Faviconของ LeedyBox สร้างไฟล์ favicon.ico ที่มีภาพ PNG ขนาด 16, 32 และ 48 พิกเซล พร้อมไฟล์ PNG สำหรับขนาดอื่น ๆ
ขนาดที่ใช้บ่อยและการใช้งาน
| ขนาด (พิกเซล) | ไฟล์ทั่วไป | การใช้งานทั่วไป |
|---|---|---|
| 16 × 16 | favicon-16x16.png และภายใน favicon.ico | แท็บและบุ๊กมาร์กบนหน้าจอทั่วไป |
| 32 × 32 | favicon-32x32.png และภายใน favicon.ico | แท็บบนหน้าจอความหนาแน่นสูง และทางลัดบางประเภท |
| 48 × 48 | ภายใน favicon.ico | ไอคอนทางลัดและไอคอนบนเดสก์ท็อปที่ใหญ่ขึ้นในบางระบบ |
| 180 × 180 | apple-touch-icon.png | ไอคอนบนหน้าจอหลักของ iPhone และ iPad |
| 192 × 192 | android-chrome-192x192.png | ไอคอนบนหน้าจอหลักของ Android ระบุไว้ใน manifest |
| 512 × 512 | android-chrome-512x512.png | หน้าต่างติดตั้งและหน้าจอเริ่มต้น (splash screen) ของเว็บแอป |
เริ่มจากภาพต้นทางทรงสี่เหลี่ยมจัตุรัสขนาดอย่างน้อย 512 × 512 พิกเซล หรือจากไฟล์ SVG ภาพต้นทางที่เล็กต้องถูกขยายสำหรับไอคอนขนาดใหญ่และจะดูเบลอ โลโก้ที่ไม่ใช่สี่เหลี่ยมจัตุรัสต้องเพิ่มพื้นที่รอบ ๆ หรือต้องครอป
Apple touch icon ไม่ควรโปร่งใส เพราะอุปกรณ์ Apple บางรุ่นแสดงส่วนที่โปร่งใสเป็นสีดำ ให้เติมสีพื้นหลังแทน iPhone และ iPad จะทำมุมมนให้เอง ไฟล์จึงเป็นสี่เหลี่ยมจัตุรัสธรรมดาได้ ดูข้อมูลพื้นฐานเกี่ยวกับช่องอัลฟาได้ที่ความโปร่งใสใน PNG และ JPG ทำงานอย่างไร
แท็ก HTML และ Web App Manifest
วางไฟล์ไว้ในโฟลเดอร์รากของเว็บไซต์ และเพิ่มแท็กเหล่านี้ภายใน <head> ของทุกหน้า
<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#ffffff">หากมี Favicon แบบ SVG ด้วย ให้เพิ่ม <link rel="icon" href="/favicon.svg" type="image/svg+xml"> ไฟล์ manifest (site.webmanifest) เป็นไฟล์ JSON ขนาดเล็กที่มีชื่อเว็บไซต์ ชื่อย่อ ไอคอนขนาด 192 และ 512 พิกเซล สีธีม สีพื้นหลัง และโหมดการแสดงผล เช่น standalone หากไฟล์อยู่ในโฟลเดอร์อื่น ให้เปลี่ยนพาธทุกจุดในแท็กและใน manifest
การออกแบบสำหรับขนาดเล็กมาก
- ทำให้เรียบง่าย: ที่ขนาด 16 พิกเซล เส้นบาง ข้อความเล็ก และรายละเอียดเล็ก ๆ จะกลายเป็นภาพเบลอ สัญลักษณ์ที่ลดทอนรายละเอียด รูปทรงเดียว หรือตัวอักษรหนึ่งถึงสองตัวใช้ได้ดีกว่าโลโก้เต็มรูปแบบที่มีสโลแกน
- ใช้คอนทราสต์สูง: ความต่างของความสว่างระหว่างไอคอนกับพื้นหลังที่ชัดเจนสำคัญกว่าสีแบรนด์ที่ตรงเป๊ะ
- เว้นขอบให้น้อย: พื้นที่ว่างทำให้ไอคอนที่มองเห็นเล็กลง การเว้นขอบเล็กน้อยอาจช่วยไอคอนขนาดใหญ่ได้ แต่ Favicon ขนาดเล็กจะจดจำได้ง่ายกว่าเมื่อเต็มพื้นที่สี่เหลี่ยมเกือบทั้งหมด
- ตรวจดูที่ขนาดจริง: ดูไอคอนในแท็บที่การซูม 100% ไม่ใช่ดูแค่ภาพตัวอย่างที่ขยายแล้ว
ธีมมืดของเบราว์เซอร์
หลายคนใช้แถบแท็บสีเข้ม โลโก้สีเข้มบนพื้นหลังโปร่งใสอาจแทบมองไม่เห็นบนแถบนั้น และโลโก้สีขาวก็อาจหายไปในธีมสว่าง วิธีแก้ที่นิยม ได้แก่ การใส่รูปทรงพื้นหลังสีทึบหรือมุมมนไว้หลังโลโก้ การใส่เส้นขอบสีอ่อน หรือใช้ Favicon แบบ SVG ที่เปลี่ยนสีด้วย media query prefers-color-scheme (ในเบราว์เซอร์ที่รองรับ Favicon แบบ SVG) เครื่องมือสร้างของ LeedyBox แสดงแถบแท็บทั้งแบบสว่างและแบบมืดเพื่อให้คุณเปรียบเทียบได้
การอัปเดต Favicon และแคชของเบราว์เซอร์
เบราว์เซอร์เก็บ Favicon ไว้ในแคช บางครั้งเป็นเวลานาน ไอคอนใหม่จึงอาจไม่ปรากฏทันทีหลังอัปโหลด การรีเฟรชแบบบังคับ (hard refresh) หรือหน้าต่างส่วนตัวอาจแสดงเวอร์ชันใหม่ได้ หากต้องการให้ผู้เข้าชมที่กลับมาดึงไอคอนใหม่เร็วขึ้น ให้เปลี่ยนชื่อไฟล์หรือเพิ่มเวอร์ชันลงใน URL ในแท็ก เช่น /favicon-32x32.png?v=2 ไอคอนในบุ๊กมาร์กและผลการค้นหาอาจใช้เวลานานกว่าในการอัปเดต หลังเปลี่ยนแปลงทุกครั้ง ให้ทดสอบผลลัพธ์ในเบราว์เซอร์และอุปกรณ์ที่สำคัญสำหรับคุณ
คำถามที่พบบ่อย
ยังจำเป็นต้องมี favicon.ico อยู่หรือไม่
ไม่บังคับ แต่เป็นไฟล์สำรองที่ทำได้ง่าย เบราว์เซอร์และเครื่องมืออื่น ๆ จำนวนมากมองหา /favicon.ico ในโฟลเดอร์รากของเว็บไซต์ และไฟล์นี้ใช้พื้นที่เพียงไม่กี่กิโลไบต์
ใช้ JPG เป็น Favicon ได้หรือไม่
โดยทั่วไปเบราว์เซอร์แสดงได้ แต่ JPG ไม่มีความโปร่งใส และการบีบอัดอาจทำให้รายละเอียดเล็ก ๆ เบลอ ไฟล์ PNG, ICO หรือ SVG เป็นตัวเลือกที่ดีกว่าสำหรับไอคอน
ทำไม Favicon ใหม่จึงไม่แสดง
ส่วนใหญ่เป็นเพราะไอคอนเดิมยังอยู่ในแคช หรือพาธในแท็ก HTML ไม่ตรงกับตำแหน่งที่อัปโหลดไฟล์ไว้ ให้เปิด URL ของแต่ละไฟล์ในเบราว์เซอร์โดยตรงเพื่อตรวจสอบว่าโหลดได้