SVG กับไอคอน ICO

SVG คืออนาคต ICO คือรากฐาน ใช้ทั้งสองแบบ

4 นาทีในการอ่าน

Check favicons on any website

Install the FetchFavicon Chrome Extension to extract, preview, and validate favicons instantly.

Install Chrome Extension

เหตุใด SVG จึงชนะในเบราว์เซอร์สมัยใหม่

ไฟล์เดียวที่ปรับขนาดได้ไม่จำกัด รองรับการสืบค้นสื่อในโหมดมืด โดยทั่วไปขนาดไฟล์จะต่ำกว่า 2KB

ทำไม ICO ถึงยังมีความสำคัญ

เบราว์เซอร์รุ่นเก่า ทางลัด Windows และผู้ฝังบางตัวอ่านได้เฉพาะ .ico เท่านั้น การข้ามมันจะทำให้ไอคอนใช้งานไม่ได้สำหรับผู้ใช้ประมาณ 5%

ใช้ทั้งสองอย่างร่วมกัน

ลิงก์ favicon.ico เป็นทางเลือกสากลก่อน จากนั้นจึงลิงก์ <link rel="icon" type="image/svg+xml"> ที่อยู่ด้านบนสุดสำหรับเบราว์เซอร์ที่รองรับ

คำถามที่พบบ่อย

Should I use SVG or ICO for a favicon?

Use both. Link favicon.ico as the universal fallback, then add <link rel="icon" type="image/svg+xml"> for scalable rendering on modern browsers.

Does SVG work in every browser?

Most modern browsers support SVG favicons, but older browsers and some embedders still need .ico. Never ship SVG alone.

Can an SVG favicon support dark mode?

Yes. Embed a <style>@media (prefers-color-scheme: dark) { ... }</style> block inside the SVG file.

คำแนะนำที่เกี่ยวข้อง

ลองใช้เครื่องมือ

อ่านต่อ