วิธีสร้าง Favicon
favicon สมัยใหม่เป็นมากกว่ารูปภาพขนาด 16×16 คู่มือนี้จะอธิบายการเตรียมแหล่งที่มา การสร้างหลายขนาด การตั้งค่า HTML ตัวอย่างจากการใช้งานจริง และการแก้ไขปัญหาที่ทำให้ทีมส่วนใหญ่สะดุด
favicon คืออะไร?
favicon คือไอคอนเบราว์เซอร์ขนาดเล็กที่แสดงในแท็บ แถบบุ๊กมาร์ก รายการประวัติ และแถบที่อยู่ บนโทรศัพท์ ไอคอนนี้จะกลายเป็นไอคอนบนหน้าจอหลักเมื่อมีคนบันทึกไซต์ของคุณ บน Windows จะปรากฏบนหมุดแถบงานและทางลัดบนเดสก์ท็อป
คำนี้มาจากไอคอนรายการโปรด แต่งานนี้เติบโตเกินกว่า GIF ขนาด 16×16 ไฟล์เดียว favicon ของวันนี้เป็นตระกูลสินทรัพย์ขนาดเล็ก: favicon.ico ระดับราก, ตัวแปร SVG และ PNG ที่เป็นตัวเลือก, ไอคอน apple-touch-icon สำหรับ iOS และไอคอนรายการสำหรับ PWA ที่สามารถติดตั้งได้
ผู้ใช้ไม่ค่อยแสดงความคิดเห็นเกี่ยวกับ favicon ที่ดี แต่พวกเขาสังเกตเห็นสิ่งที่หายไปหรือพร่ามัวในทันที ไอคอนที่คมชัดบ่งบอกถึงความขัดเกลาและทำให้แท็บของคุณสามารถระบุตัวตนได้จากยี่สิบหน้าที่เปิดอยู่
Use our favicon generator, PNG to ICO converter, SVG to ICO converter, and live favicon tester to build and verify your icon set, and read the companion guide for a condensed walkthrough.
เตรียมภาพต้นฉบับของคุณ
เริ่มจากรูปภาพสี่เหลี่ยมจัตุรัสที่มีขนาดอย่างน้อย 512×512 พิกเซล SVG ที่มีสี่เหลี่ยมจัตุรัส viewBox เหมาะอย่างยิ่งเนื่องจากสามารถปรับขนาดให้เหมาะกับแรสเตอร์ทุกขนาดที่คุณจะส่งออกได้
หลีกเลี่ยงการลากเส้นบางๆ ตัวอักษรที่ละเอียด และการไล่ระดับสีที่ซับซ้อน ที่ขนาด 16×16 รายละเอียดแนวเส้นผมจะผสานกันเป็นพุ่มสีเทา ลดความซับซ้อนของเครื่องหมาย: รูปร่างน้อยลง คอนทราสต์สูงขึ้น มีช่องว่างรอบสัญลักษณ์มากขึ้น
หากโลโก้ของคุณอยู่ในแนวนอน ให้สร้างการครอบตัดแบบสี่เหลี่ยมโดยวางสัญลักษณ์ไว้ตรงกลางโดยไม่มีตัวอักษรคำ รูปแบบตัวอักษรที่มีความสูงต่ำกว่า 8px แทบจะไม่รอดจากการลดขนาด
ส่งออก PNG-32 ด้วยความโปร่งใส เมื่อแรสเตอร์เป็นทางเลือกเดียวของคุณ พื้นหลังสีขาวแบบอบจะดูผิดปกติในเบราว์เซอร์โครเมียมสีเข้มและบนตัวเรียกใช้งานมือถือที่มีสีอ่อน
สร้าง .ico หลายขนาด
รวมเฟรม 16, 32, 48, 64, 128 และ 256 พิกเซลไว้ในไฟล์ favicon.ico ไฟล์เดียว เบราว์เซอร์และ Windows อ่านส่วนหัวของไดเรกทอรีและถอดรหัสเฉพาะขนาดที่ต้องการ
วาง favicon.ico ที่รูทไซต์ของคุณ (/favicon.ico) แม้ว่าคุณจะประกาศแท็ก <link> สมัยใหม่ แต่โปรแกรมรวบรวมข้อมูลและไคลเอ็นต์รุ่นเก่ายังคงตรวจสอบเส้นทางนั้นตามแบบแผน
โปรแกรมสร้าง favicon ของเราจะแรสเตอร์ทุกขนาดฝั่งไคลเอ็นต์ภายในเวลาไม่ถึงวินาที รูปภาพต้นฉบับของคุณจะไม่ออกจากเบราว์เซอร์ ซึ่งสำคัญเมื่อเครื่องหมายนั้นเป็นโลโก้ผลิตภัณฑ์ที่ยังไม่เผยแพร่
เพิ่มแท็ก HTML
วางแท็กเหล่านี้ใน <head> เพื่อให้การตั้งค่าปี 2026 เสร็จสมบูรณ์:
<link rel="icon" href="/favicon.ico" size="any">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
เส้น SVG ให้แถบคมชัดบน Chromium และ Firefox บรรทัด .ico ครอบคลุมถึงทางเลือก Safari, ทางลัด Windows และโปรแกรมอ่าน RSS ที่ไม่สนใจ SVG
ตัวอย่างในโลกแห่งความเป็นจริง
ไซต์การตลาดแบบคงที่: อัปโหลดเครื่องหมายโลโก้ของคุณขนาด 512×512 PNG สร้าง favicon.ico บวกกับไอคอน apple-touch-touch ขนาด 180×180 เพิ่มสี่บรรทัด <link> ปรับใช้กับ /public หรือรูทเว็บ เวลาทั้งหมด: ต่ำกว่าห้านาที
แอป React / Vite: วางไอคอนใน /public อ้างอิงไอคอนเหล่านั้นด้วยพาธแบบ root-relative ใน index.html คัดลอกสำเนา /สาธารณะ ไม่เปลี่ยนแปลงในขณะที่สร้าง ดังนั้น /favicon.ico จึงแก้ไขได้อย่างถูกต้องในการใช้งานจริง
WordPress: ข้ามแบบแมนนวล HTML — ใช้ Appearance → ปรับแต่ง → Site Identity → ไอคอนเว็บไซต์ อัปโหลดแหล่งที่มาขนาด 512×512 WordPress ปล่อยแท็กที่ถูกต้องโดยอัตโนมัติ ดูบทช่วยสอน WordPress ของเราสำหรับเคล็ดลับการป้องกันแคช
แบรนด์โหมดมืด: ส่งออก SVG ซึ่งมีสวิตช์เติมอยู่ภายใน @media (prefers-color-scheme: dark) ใช้ร่วมกับกับทางเลือก .ico ที่เป็นกลางสำหรับไคลเอนต์ที่ไม่เคยโหลด SVG
ตรวจสอบในทุกเบราว์เซอร์
รีเฟรชแคช (Ctrl+Shift+R หรือ Cmd+Shift+R) ใน Chrome, Safari, Firefox และ Edge การโหลดซ้ำตามปกติมักจะเก็บแคช favicon ไว้เป็นเวลาหลายวัน
ตรวจสอบสี่บริบทที่ใช้งาน: แท็บเบราว์เซอร์ แถบบุ๊กมาร์ก เพิ่มไปที่หน้าจอหลักบน iOS และไอคอนแถบงาน Windows ที่ปักหมุดไว้ แต่ละบริบทที่ใช้งานอาจขอความละเอียดที่แตกต่างจากชุดรวมของคุณ
เปิด DevTools → เครือข่าย กรองตาม ico หรือ PNG โหลดซ้ำ และยืนยันการตอบกลับ 200 รายการสำหรับ URL ไอคอนทุกรายการที่คุณประกาศ 404 ตัวเดียวบน apple-touch-icon.png เป็นสิ่งที่พลาดได้ทั่วไป
คำถามที่พบบ่อย
ฉันยังต้องการ favicon.ico หรือไม่หากฉันมี SVG ใช่. ให้ .ico เป็นทางเลือกสากล SVG เป็นการเพิ่มประสิทธิภาพ ไม่ใช่การทดแทน
favicon ขั้นต่ำที่ใช้งานได้คือเท่าไร? หลายขนาด favicon.ico ที่ /favicon.ico ทุกสิ่งทุกอย่างปรับปรุงความชัดเจนบนหน้าจอ DPI สูงและหน้าจอโฮมบนมือถือ
ฉันสามารถใช้ JPG ได้หรือไม่? คุณทำได้ แต่คุณสูญเสียความโปร่งใส PNG หรือ SVG มักจะดีกว่าสำหรับไอคอนอินเทอร์เฟซเสมอ
ฉันควรอัพเดต favicon บ่อยแค่ไหน? เมื่อใดก็ตามที่เครื่องหมายแบรนด์ของคุณเปลี่ยนแปลง ชนข้อความค้นหา ?v=2 บนแท็ก <link> หนึ่งครั้งเพื่อกำจัดแคชเบราว์เซอร์ที่ก้าวร้าว
การแก้ไขปัญหา
ไอคอนไม่อัปเดตหลังจากการปรับใช้: เบราว์เซอร์แคช favicon โดยไม่ขึ้นกับ HTML รีเฟรชข้อมูลเว็บไซต์ให้ชัดเจน หรือเพิ่ม ?v=2 ต่อท้ายไอคอน URL ชั่วคราว
ไอคอนแท็บไม่ชัด: แหล่งที่มาของคุณเล็กเกินไปหรือไม่เป็นรูปสี่เหลี่ยมจัตุรัส สร้างใหม่จาก 512×512 หรือ SVG; ตรวจสอบว่า .ico มีเฟรมขนาด 32×32 จริง ๆ
กล่องสีขาวรอบๆ โลโก้: แหล่งที่มามีพื้นหลังทึบ ส่งออกซ้ำด้วยความโปร่งใสและสร้าง .ico ใหม่ด้วยรายการบีบอัด PNG
ใช้งานได้ในพื้นที่แต่ไม่ได้ใช้งานจริง: ยืนยันว่าไฟล์อยู่ในรูทเว็บสาธารณะ ไม่ใช่แค่ใน src/ ตรวจสอบแคช CDN และเส้นทางแบบคำนึงถึงขนาดตัวพิมพ์บนเซิร์ฟเวอร์ Linux
รายการตรวจสอบทีละขั้นตอน
ส่งออกหรือค้นหาสแควร์มาสเตอร์ที่มีขนาด 512×512 หรือใหญ่กว่า ยืนยันความโปร่งใส โปรไฟล์สี sRGB และไม่มีเลเยอร์พื้นหลังที่ซ่อนอยู่ในไฟล์การออกแบบของคุณ
รันต้นแบบผ่านตัวสร้าง favicon ฝั่งไคลเอ็นต์ ดาวน์โหลด favicon.ico, favicon.svg หากมี apple-touch-icon.png และรายการ PNGs ในครั้งเดียว
อัปโหลดไฟล์ทั้งหมดไปยังรูทเว็บสาธารณะของคุณ บนโฮสต์แบบคงที่ซึ่งหมายถึงโฟลเดอร์เดียวกันกับ index.html บนเฟรมเวิร์ก ให้ใช้ไดเร็กทอรี /public หรือ /static ที่แมปกับ /
วางบล็อก <link> ที่แนะนำลงใน <head> ก่อนสคริปต์บล็อกการแสดงผล ตำแหน่งเริ่มต้นช่วยให้เบราว์เซอร์ค้นพบไอคอนในสีแรก
ตรวจสอบด้วยการรีเฟรชทั้ง Chrome, Safari และ Firefox ปักหมุดแท็บ บุ๊กมาร์กหน้า และทดสอบเพิ่มไปที่หน้าจอหลักบน iPhone จริง หากการรับส่งข้อมูล iOS มีความสำคัญต่อคุณ
บันทึกชุดไอคอนใน README หรือระบบการออกแบบของคุณ เพื่อให้การรีแบรนด์ครั้งถัดไปไม่ได้เริ่มต้นจากขนาด 32×32 PNG เดียวที่พบในอีเมล
ข้อผิดพลาดทั่วไปที่ควรหลีกเลี่ยง
การใช้โลโก้แนวนอนแบบเต็มปรับขนาดลงในช่องขนาด 16×16 — ข้อความกลายเป็นสัญญาณรบกวนที่ไม่สามารถอ่านได้ ครอบตัดตามสัญลักษณ์
จัดส่งเฉพาะ 16×16 PNG ที่เปลี่ยนชื่อเป็น .ico โดยไม่มีไดเร็กทอรีหลายขนาดที่เหมาะสม — Windows และแท็บ Retina จะยกระดับและเบลอ
ลืมไอคอน apple-touch-icon ในขณะที่หมกมุ่นอยู่กับแท็บบนเดสก์ท็อป — ผู้ใช้ iOS เป็นสัดส่วนขนาดใหญ่ของการเข้าชมเว็บบนมือถือ
ชี้ <link href> ที่เส้นทาง CDN ที่แตกต่างกันระหว่างการแสดงละครและการใช้งานจริงโดยไม่มีบิลด์ที่คำนึงถึงสภาพแวดล้อม
สมมติว่า WordPress, Shopify หรือ Webflow จะแก้ไขการอัปโหลดต้นฉบับที่มีความละเอียดต่ำได้อย่างน่าอัศจรรย์ ขยะเข้า ขยะออก ทุกขนาด