Favicon (.ico) กับ SVG
SVG เป็นรูปแบบ favicon ที่น่าตื่นเต้นที่สุดแห่งยุคสมัยใหม่ — เวกเตอร์ การรับรู้โหมดมืด และขนาดเล็ก แต่ไม่สามารถแทนที่ .ico ได้อย่างสมบูรณ์ในปี 2026 นี่คือสาเหตุและวิธีใช้ทั้งสองอย่าง
SVG ปรับขนาดได้อย่างไม่จำกัดและรองรับการสืบค้นสื่อในโหมดมืดภายในตัวไฟล์เอง 1 KB SVG ครอบคลุมทุกความหนาแน่นบนเบราว์เซอร์สมัยใหม่ทุกตัว
ICO เป็นทางเลือกสากล เวอร์ชัน Safari ที่เก่ากว่า เบราว์เซอร์แบบเดิม และรูปแบบ Bare-URL <code>/favicon.ico</code> ทั้งหมดยังคงขึ้นอยู่กับเวอร์ชันดังกล่าว
การตั้งค่าที่แนะนำ: ใช้ <code>favicon.ico</code> + <code>favicon.svg</code> เบราว์เซอร์ที่รองรับ SVG จะชอบมันมากกว่า ส่วนที่เหลือจะถอยกลับไปเป็น .ico โดยอัตโนมัติ
วิธีการทำงาน
- 1
ออกแบบหรือส่งออก SVG
สแควร์ viewBox องค์ประกอบรูทเดี่ยว <svg>
- 2
สร้างทางเลือกสำรอง .ico
ใช้ FetchFavicon เพื่อแรสเตอร์ SVG ของคุณให้เป็น .ico หลายขนาด
- 3
เชื่อมโยงทั้งสอง
<link rel="icon" href="/favicon.ico"> + <link rel="icon" type="image/svg+xml" href="/favicon.svg">
ลองเลย
สร้างคู่ .ico + SVG
เครื่องมือแปลงไฟล์ SVG เป็น PNGคำถามที่พบบ่อย
ฉันสามารถยกเลิก .ico โดยสิ้นเชิงได้หรือไม่หากฉันใช้ SVG+
ไม่ปลอดภัย. โปรแกรมฝังโซเชียล โปรแกรมอ่าน RSS และเครื่องมือรุ่นเก่าจำนวนมากยังคงขอ /favicon.ico ตามแบบแผน
เบราว์เซอร์ใดบ้างที่รองรับfavicon ของ SVG+
Chrome 80+, Edge 80+, Firefox 41+, Safari 15+ และกล้าหาญ iOS Safari ยังคงชอบ apple-touch-icon PNG
favicon ของ SVG สามารถมีขนาดเล็กได้ขนาดไหน?+
ต่ำกว่า 1 KB สำหรับเครื่องหมายขาวดำที่สะอาดตา แม้แต่โลโก้หลากสีที่ซับซ้อนก็ยังมีขนาดไม่เกิน 4 KB