วิธีใช้งาน
- ลากไฟล์ .ico มาวางในพื้นที่วางไฟล์ คลิกเพื่อเลือกไฟล์ หรือวางรูปภาพ
- เลือก “คงรูปแบบเดิม” เพื่อให้ทุกขนาดที่เก็บไว้ในไอคอนอยู่ในเอาต์พุตครบ
- ตรวจดูขนาดหลังเข้ารหัส เพราะไอคอนที่มีหลายขนาดอาจใหญ่กว่าที่คาดไว้
- คัดลอก data URI สำหรับแท็ก link ของ favicon หรือคัดลอกเอาต์พุตแบบแท็ก img, CSS หรือ Markdown
รูปแบบ ICO
ICO คือรูปแบบไอคอนของ Windows และเป็นรูปแบบ favicon ดั้งเดิม ไฟล์นี้เป็นคอนเทนเนอร์ที่มีไดเรกทอรีสั้น ๆ ระบุรายการรูปภาพหนึ่งภาพหรือมากกว่าพร้อมความกว้าง ความสูง และความลึกของสี แต่ละภาพจัดเก็บเป็นข้อมูลบิตแมป หรือสำหรับขนาดใหญ่อย่าง 256 x 256 จะเก็บเป็น PNG ที่ฝังไว้ ไฟล์ favicon.ico ทั่วไปมีเวอร์ชันขนาด 16, 32 และ 48 พิกเซล เพื่อให้เบราว์เซอร์เลือกภาพที่คมชัดที่สุดได้
ชนิด MIME ที่จดทะเบียนไว้คือ image/vnd.microsoft.icon แต่ image/x-icon พบได้บ่อยกว่ามาก และเบราว์เซอร์ยอมรับทั้งสองแบบ ข้อมูล ICO ในรูปแบบ Base64 ขึ้นต้นด้วย AAABAA ซึ่งคือส่วนหัวของไฟล์ที่เข้ารหัสแล้ว
Favicon แบบ data URI
<link rel="icon" href="data:image/x-icon;base64,AAABAAEAEBA...">การฝัง favicon แบบอินไลน์สะดวกสำหรับเอกสาร HTML แบบไฟล์เดียว เช่น รายงานที่ส่งออก แดชบอร์ดที่บันทึกลงดิสก์ และเอกสารแบบออฟไลน์ รวมถึงต้นแบบหรือเครื่องมือภายในที่คุณไม่ต้องการนำไฟล์แยกขึ้นเซิร์ฟเวอร์ สำหรับเว็บไซต์ที่มีหลายหน้า การใช้ /favicon.ico ตามปกติมักดีกว่า เพราะดาวน์โหลดเพียงครั้งเดียวแล้วถูกแคชไว้ ในขณะที่ data URI จะถูกส่งซ้ำในการตอบกลับ HTML ทุกครั้ง
หากไม่ต้องการไอคอนเลย <link rel="icon" href="data:,"> จะช่วยไม่ให้เบราว์เซอร์ส่งคำขอ /favicon.ico
Favicon แบบ ICO, PNG หรือ SVG
เบราว์เซอร์ในปัจจุบันยอมรับ favicon แบบ PNG และ SVG ด้วย เช่น <link rel="icon" type="image/png" href="data:image/png;base64,..."> ไฟล์ PNG ขนาด 32 x 32 เพียงไฟล์เดียวมักเล็กกว่า ICO ที่มีหลายขนาด สำหรับกรณีนี้ให้ใช้ PNG เป็น Base64 หรือ SVG เป็น Base64
การแปลง ICO ที่นี่เป็น PNG, JPEG หรือ WebP จะเหลือรูปภาพเพียงภาพเดียว คือภาพที่เบราว์เซอร์เลือกแสดง หากต้องการทำในทางกลับกันและสร้างไฟล์ ICO ให้เข้ารหัส PNG แล้ววางผลลัพธ์ลงใน แปลง Base64 เป็น ICO ซึ่งสร้างไอคอนได้ตั้งแต่ขนาด 16 ถึง 256 พิกเซล
คำถามที่พบบ่อย
ควรใช้ image/x-icon หรือ image/vnd.microsoft.icon
image/vnd.microsoft.icon เป็นชนิดที่จดทะเบียนอย่างเป็นทางการ ส่วน image/x-icon เป็นแบบที่เว็บไซต์ส่วนใหญ่ใช้ หากระบบใดต้องการแบบใดแบบหนึ่งโดยเฉพาะ ให้แก้ไขส่วนนำหน้าหลังจากคัดลอกไอคอนทุกขนาดยังอยู่ครบในเอาต์พุต Base64 หรือไม่
ใช่ เมื่อคุณคงรูปแบบเดิมไว้ ไฟล์ทั้งไฟล์จะถูกเข้ารหัส เบราว์เซอร์จึงยังเลือกขนาดที่ต้องการได้ ส่วนการแปลงเป็นรูปแบบอื่นจะเหลือรูปภาพเพียงภาพเดียว
favicon แบบ data URI ใช้ได้ในทุกเบราว์เซอร์หรือไม่
เบราว์เซอร์บนเดสก์ท็อปในปัจจุบันแสดงไอคอนนี้ในแท็บได้ แต่บุ๊กมาร์ก ทางลัดบนหน้าจอหลัก และเบราว์เซอร์รุ่นเก่าบางตัวอาจไม่ใช้ไอคอนแบบอินไลน์ เว็บไซต์สาธารณะจึงควรมีไฟล์ favicon ไว้ด้วย