วิธีเพิ่ม Favicon ให้กับ HTML
การเพิ่ม favicon ให้กับหน้า HTML ธรรมดาเป็นการเปลี่ยนแปลงเพียงบรรทัดเดียว แต่การตั้งค่าที่ทันสมัยและสมบูรณ์นั้นมีหกบรรทัดและครอบคลุมการติดตั้ง iOS, Android, โหมดมืด และ PWA
For a longer walkthrough with FAQ and troubleshooting, see our step-by-step tutorial.
แท็กเดียวที่ทุกเบราว์เซอร์เคารพคือ <link rel="icon" href="/favicon.ico"> วาง favicon.ico ที่รูทเว็บไซต์ของคุณ เท่านี้ก็เสร็จเรียบร้อย 80%
ส่วนที่เหลืออีก 20% ได้แก่ รุ่น apple-touch-icon, PNG, SVG พร้อมการรองรับโหมดมืด และการแสดงเว็บ - เป็นสิ่งที่แยกไอคอนเริ่มต้นออกจากประสบการณ์แบรนด์ที่สวยงาม
วิธีการทำงาน
- 1
สร้างแพ็คเกจ favicon ของคุณ
ใช้ตัวสร้างแพ็คเกจ FetchFavicon — สร้างทุกไฟล์ที่คุณต้องการพร้อมมาร์กอัปที่พร้อมสำหรับการวาง
- 2
วางไฟล์ที่รูทของไซต์
favicon.ico, apple-touch-icon.png, android-chrome-192/512.png, ไซต์.webmanifest
- 3
วางข้อมูลโค้ดลงใน <head>
แท็ก <link> หกแท็ก + หนึ่งแท็ก <meta name="theme-color">
ลองเลย
รับข้อมูลโค้ด HTML
เครื่องมือสร้าง Faviconคำถามที่พบบ่อย
แท็ก <link> ไปไหน?+
ภายใน <head> ทุกที่ — คำสั่งซื้อไม่สำคัญตราบใดที่มาก่อน </head>
ฉันต้องการทั้ง .ico และ PNG หรือไม่+
ใช่. .ico เป็นทางเลือกสากล PNG เรนเดอร์ภาพที่คมชัดที่สุดบนหน้าจอ DPI สูง
แล้วโหมดมืดล่ะ?+
ใช้ตัวแปร SVG ที่ฝังคิวรีสื่อ prefers-color-scheme ไว้ภายในบล็อก <style>