วิธีใช้งาน
- วางสตริง Base64 หรือ data URI ของไอคอน หรือของรูปภาพที่ต้องการทำเป็นไอคอน
- ตรวจดูภาพตัวอย่างและขนาดภาพ รูปภาพต้นทางที่เป็นสี่เหลี่ยมจัตุรัสจะได้ไอคอนที่คมชัดที่สุด
- ICO ถูกเลือกไว้ล่วงหน้า เลือกขนาดเดียวใน “ขนาดไอคอน” (16, 32, 48, 64, 128 หรือ 256 พิกเซล) หรือเลือกไอคอนแบบ “หลายขนาด”
- ดาวน์โหลดไฟล์ .ico หากอินพุตเป็น ICO อยู่แล้วและต้องการให้ทุกภาพในไฟล์คงเดิม ให้เลือก “ต้นฉบับ”
ไฟล์ ICO ใน Base64
ไฟล์ ICO เป็นคอนเทนเนอร์ขนาดเล็ก ประกอบด้วยส่วนหัว ไดเรกทอรีของรายการ และรูปภาพหนึ่งภาพต่อหนึ่งรายการ โดยแต่ละภาพเก็บเป็นข้อมูล BMP หรือ PNG ส่วนหัวขึ้นต้นด้วยไบต์ 00 00 01 00 Base64 ของไอคอนจึงขึ้นต้นด้วย AAABAA คุณจะพบไอคอน Base64 ใน data URI ของ favicon เช่น <link rel="icon" href="data:image/x-icon;base64,..."> ในหน้า HTML แบบไฟล์เดียว และใน API ที่ส่งคืนไอคอนของเว็บไซต์
ชนิด MIME ที่จดทะเบียนไว้คือ image/vnd.microsoft.icon แต่ image/x-icon ใช้กันแพร่หลายกว่ามากและใช้ได้ทุกที่
ควรเลือกไอคอนขนาดใด
| ขนาด | การใช้งานทั่วไป |
|---|---|
| 16 × 16 | แท็บเบราว์เซอร์และบุ๊กมาร์กบนหน้าจอทั่วไป |
| 32 × 32 | แท็บเบราว์เซอร์บนหน้าจอความละเอียดสูง |
| 48 × 48 | ไอคอนบนเดสก์ท็อปและใน Explorer ของ Windows |
| 64, 128 | ภาพตัวอย่างขนาดใหญ่และรายการแอปพลิเคชัน |
| 256 × 256 | มุมมองไอคอนขนาดใหญ่และใหญ่พิเศษบน Windows |
ตัวเลือกหลายขนาดรวม 16, 32, 48 และ 256 ไว้ในไฟล์เดียว แต่ละระบบจึงเลือกขนาดที่เหมาะที่สุดได้ รูปภาพภายในบีบอัดแบบ PNG ซึ่งคงความโปร่งใสไว้ และรองรับใน Windows Vista ขึ้นไปและเบราว์เซอร์สมัยใหม่ทุกตัว
การใช้ไอคอนเป็น favicon
เบราว์เซอร์จะร้องขอ /favicon.ico จากรากของเว็บไซต์โดยอัตโนมัติ การบันทึกไฟล์ไว้ที่นั่นจึงใช้งานได้แม้ไม่มีมาร์กอัปใด ๆ การใช้ data URI แบบ Base64 ใน href ช่วยประหยัดคำขอนั้น แต่ไอคอนจะถูกดาวน์โหลดซ้ำพร้อมกับทุกหน้า แทนที่จะถูกแคชแยกเป็นไฟล์ของตัวเอง เบราว์เซอร์สมัยใหม่ยังรับไอคอน PNG และ SVG ด้วย และการตั้งค่าที่นิยมคือใช้ทั้งสองแบบร่วมกัน:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/icon.svg" type="image/svg+xml">เริ่มจากรูปภาพสี่เหลี่ยมจัตุรัสที่มีรูปทรงเรียบง่ายและคอนทราสต์สูง เพราะรายละเอียดเล็ก ๆ จะหายไปที่ขนาด 16 พิกเซล หากต้องการเวอร์ชัน PNG สำหรับการใช้งานอื่น ลองใช้ แปลง Base64 เป็น PNG
คำถามที่พบบ่อย
favicon.ico ควรมีขนาดเท่าใด
ไอคอนหลายขนาดที่มีรูปภาพขนาด 16, 32 และ 48 พิกเซลครอบคลุมทั้งเบราว์เซอร์และ Windows ตัวเลือก “หลายขนาด” ที่นี่ยังเพิ่มขนาด 256 สำหรับมุมมองไอคอนขนาดใหญ่ด้วย
แปลง Base64 ของ PNG หรือ SVG เป็น ICO ได้หรือไม่
ได้ วางข้อมูล ปล่อยรูปแบบใน “ดาวน์โหลดเป็น” ไว้ที่ ICO แล้วเลือกขนาด รูปภาพใดก็ตามที่เบราว์เซอร์ของคุณแสดงได้ก็แปลงได้
ทำไมภาพตัวอย่างจึงแสดงไอคอนเพียงขนาดเดียว
ไฟล์ ICO เก็บรูปภาพได้หลายภาพ แต่ภาพตัวอย่างแสดงได้เพียงภาพเดียว ดาวน์โหลดเป็น “ต้นฉบับ” เพื่อเก็บทุกภาพในไฟล์ไว้
ICO คงความโปร่งใสไว้หรือไม่
ใช่ ไอคอนถูกเก็บเป็นข้อมูล PNG ที่มีช่องอัลฟาเต็มรูปแบบ มุมโค้งมนและขอบที่นุ่มนวลจึงยังโปร่งใส