รูปแบบ Favicon ทำงานอย่างไร
การทราบว่าแต่ละรูปแบบทำงานอย่างไรจะช่วยให้คุณแก้ไขปัญหา "ไอคอน favicon ของฉันไม่แสดง" ที่หลีกเลี่ยงไม่ได้
Check favicons on any website
Install the FetchFavicon Chrome Extension to extract, preview, and validate favicons instantly.
คอนเทนเนอร์ .ico
ไฟล์ .ico คือส่วนหัวที่ตามด้วยรายการรูปภาพตั้งแต่หนึ่งรายการขึ้นไป แต่ละรายการสามารถเป็น BMP หรือ PNG และแต่ละรายการมีความกว้าง ความสูง และความลึกของบิต
เบราว์เซอร์จะแยกวิเคราะห์ไดเร็กทอรี เลือกรายการที่ตรงกับขนาดที่ร้องขอ และถอดรหัสเพียงรายการนั้น
PNG ภายใน .ico
สำหรับขนาด 64×64 และสูงกว่า การบีบอัด PNG จะลดขนาดไฟล์ลง 5-10 เท่า โดยไม่สูญเสียการมองเห็น เครื่องกำเนิดไฟฟ้าสมัยใหม่ (รวมของเราด้วย) ทำสิ่งนี้โดยอัตโนมัติ
favicon SVG
favicon SVG เป็นไฟล์ SVG ปกติ เบราว์เซอร์จะเรนเดอร์มันเหมือนกับ SVG อื่นๆ และบล็อก <style> สามารถปรับสีตามแบบแผนสีที่ต้องการ
วิธีที่เบราว์เซอร์เลือก
หากคุณใช้แท็ก <link rel="icon"> หลายแท็ก เบราว์เซอร์จะเลือกแท็กที่ตรงกับจุดที่ใช้งานมากที่สุด (แท็บเทียบกับบุ๊กมาร์กและการติดตั้ง) แนะนำให้ใช้ SVG เมื่อได้รับการสนับสนุน .ico เป็นทางเลือก
คำถามที่พบบ่อย
What is inside a .ico file?
A header plus a directory of image entries. Each entry can be BMP or PNG at a specific width and height.
How do browsers choose which favicon to display?
Browsers read all <link rel="icon"> tags and pick the best match for the surface — tab, bookmark, or install prompt. SVG is preferred when supported; .ico is the fallback.
Why use PNG inside an .ico instead of BMP?
PNG compression cuts file size 5–10× at 64×256 with no visible loss, which speeds up page loads.
Can I use only SVG for favicons?
Not safely. Always ship favicon.ico as a fallback for older browsers, Windows shortcuts, and embedders that ignore SVG.