วิธีเพิ่ม Favicon ใน HTML
แท็กสามแท็กครอบคลุมไซต์ส่วนใหญ่ ห้าแท็กให้การตั้งค่าระดับ PWA แก่คุณ บทช่วยสอนนี้จะอธิบายแต่ละแอตทริบิวต์ แสดงตัวอย่างการคัดลอกและวางสำหรับสแต็กทั่วไป ตอบคำถามที่พบบ่อย และแก้ไขปัญหาแคชที่ทำให้ไอคอนค้าง
แท็กขั้นต่ำ
การประกาศที่ถูกต้องที่เล็กที่สุดคือบรรทัดเดียวใน <head>:
<link rel="icon" href="/favicon.ico">
เบราว์เซอร์ถือว่า rel="icon" เป็นคำแนะนำในการดึง URL นั้นมาแสดงแท็บ เส้นทางแบบรูทสัมพันธ์ที่เริ่มต้นด้วย / อยู่รอด โดยไม่คำนึงถึงเส้นทางของหน้าปัจจุบัน
แม้จะมีแท็กนี้ ไคลเอนต์จำนวนมากยังคงตรวจสอบ /favicon.ico โดยอัตโนมัติ เก็บไฟล์ไว้ที่รูทของไซต์สำหรับการร้องขอโดยนัย
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.
ชุดแนะนำที่ทันสมัย
สำหรับการเรนเดอร์ที่คมชัดบนเดสก์ท็อป iOS และแท็บโหมดมืด ให้ใช้:
<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">
การสั่งซื้อมีความสำคัญน้อยกว่าความสมบูรณ์ เบราว์เซอร์จะเลือกประเภทที่รองรับที่ดีที่สุด: SVG หากมี มิฉะนั้น เฟรม PNG หรือ ICO ที่ตรงกัน
เพิ่ม type="image/svg+xml" ในบรรทัด SVG เพื่อให้การดม MIME จะไม่ติดป้ายกำกับไฟล์ผิด
PWA พร้อมท์การติดตั้ง
เชื่อมโยงรายการของคุณ: <link rel="manifest" href="/site.webmanifest">
ภายใน site.webmanifest ให้ประกาศไอคอนด้วย src ขนาด ประเภท และวัตถุประสงค์ รายการที่มีประโยชน์ขั้นต่ำคือไฟล์ 192×192 และ 512×512 PNG
การปรับปรุงธีมเพิ่มเติม: <meta name="theme-color" content="#0f172a"> ปรับแนวแถบสถานะ Android ให้ตรงกับแบรนด์ของคุณในระหว่างขั้นตอนการติดตั้ง
ตัวอย่างการคัดลอกและวาง
ไซต์ HTML ธรรมดา — วางภายใน <head>:
<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">
Next.js App Router — เพิ่มบรรทัดเดียวกันใน app/layout.tsx ภายในข้อมูลเมตาหรือบล็อก <head> แบบแมนนวล ไฟล์อยู่ใน /public
Create React App — วางไอคอนใน /public และแก้ไข public/index.html CRA ให้บริการ /public ที่รูทโดเมนในรุ่นที่ใช้งานจริง
ทำความเข้าใจคุณลักษณะแต่ละอย่าง
rel="icon" ทำเครื่องหมายตัวเลือก favicon rel="apple-touch-icon" คือไอคอนหน้าจอหลักเฉพาะของ iOS rel="manifest" ชี้ไปที่ JSON พร้อมด้วยข้อมูลเมตา PWA
ขนาดจะบอกเบราว์เซอร์ว่า PNG แสดงถึงความละเอียดใด จำเป็นสำหรับไอคอน PNG เมื่อคุณประกาศหลายขนาดอย่างชัดเจน
href ต้องสามารถเข้าถึงได้ในการผลิต หลีกเลี่ยงการลิงก์ไปยัง CDN บุคคลที่สามสำหรับ favicon — คุณต้องการควบคุมเต็มรูปแบบในระหว่างการรีแบรนด์
คำถามที่พบบ่อย
ฉันสามารถใช้ URL แบบเต็มใน href ได้หรือไม่ ใช่ แต่ /favicon.ico ที่สัมพันธ์กับรูตนั้นง่ายกว่าในโดเมนชั่วคราวและโดเมนที่ใช้งานจริง
ฉันจำเป็นต้องมีทั้ง rel="shortcut icon" และ rel="icon" หรือไม่ ไม่ rel="icon" เป็นมาตรฐาน; ทางลัดล้าสมัย
<head> อยู่ที่ไหนกันแน่? ลูกโดยตรงของ <html> ก่อน <body> เฟรมเวิร์กบางตัวแทรกผ่านส่วนประกอบโครงร่าง
favicon ควรอยู่บน CDN หรือไม่ ทำได้ แต่อัปเดต <link> URL ทั้งหมดพร้อมกันเมื่อทำการย้าย เส้นทางที่สัมพันธ์กับรูทจะหลีกเลี่ยงปัญหานั้น
การแก้ไขปัญหา
ไอคอนใช้งานได้บนหน้าแรก แต่ไม่ใช่ /blog/slug: คุณใช้ href แบบสัมพันธ์เช่น favicon.ico โดยไม่มีเครื่องหมายทับนำหน้า ใช้ /favicon.ico แทน
Safari แสดงไอคอนเก่า: ล้างข้อมูลเว็บไซต์หรือเปลี่ยนชื่อไฟล์หนึ่งครั้ง Safari แคช favicons ยาวกว่า HTML
ถูกต้อง HTML แต่เป็น 404 ในแท็บเครือข่าย: ไฟล์ไม่ได้ปรับใช้กับเซิร์ฟเวอร์รูทหรือตัวพิมพ์ผิด (Favicon.ico กับ favicon.ico บน Linux)
SVG ละเว้น: ไม่มี type="image/svg+xml" หรือเซิร์ฟเวอร์ส่ง Content-Type ผิด แก้ไขการแมป MIME ใน nginx หรือ Apache
ตำแหน่งเฉพาะกรอบงาน
Vite / Vue / React SPA: ใส่ไอคอนใน /public และอ้างอิง /favicon.ico ใน index.html เซิร์ฟเวอร์ dev และรุ่นที่ใช้งานจริงให้บริการ /public ที่รูทโดเมน
Next.js App Router: เพิ่มไอคอนลงใน /app ผ่าน metadata API หรือวางไฟล์คงที่ใน /public หลีกเลี่ยงการทำซ้ำแท็กในทั้งสองแห่ง
Nuxt: ใช้ /public หรือกำหนดค่า app.head.link ใน nuxt.config.ts สำหรับการจัดการแท็กแบบรวมศูนย์ข้ามเส้นทาง
SvelteKit: สินทรัพย์คงที่ในการแมปแบบคงที่/โฟลเดอร์ไปยัง / อัปเดต app.html <head> หนึ่งครั้งสำหรับทั้งแอป
Astro: ไดเรกทอรีสาธารณะ/ บวกกับองค์ประกอบ Head ที่ใช้ร่วมกันในเลย์เอาต์ของคุณ ทำให้ทุกหน้ามีแท็กไอคอนที่เหมือนกัน โดยไม่มีการคัดลอกและวาง
WordPress และผู้ใช้ CMS อื่นๆ อาจไม่ต้องการแท็กด้วยตนเองเลย — ดูบทช่วยสอน WordPress ของเรา หากคอร์สร้างมาร์กอัป ไอคอนเว็บไซต์ สำหรับคุณ
กำลังตรวจสอบการตั้งค่า HTML ของคุณ
ดูแหล่งที่มาของหน้าในการใช้งานจริง ไม่ใช่ localhost เพื่อยืนยันว่า HTML ที่ปรับใช้นั้นตรงกับ repo ของคุณ บางครั้งไปป์ไลน์ CI จะใส่เลย์เอาต์ที่แตกต่างกันไปตามสภาพแวดล้อม
ใช้ curl เพื่อดึง URL ของไอคอนแต่ละรายการที่ส่งคืนใน <link href> สถานะ 200 ที่มีความยาวเนื้อหาที่ถูกต้องหมายความว่าเส้นทางนั้นมีอยู่จริง ไม่ใช่แค่ประกาศเท่านั้น
การตรวจสอบความถูกต้องของมาร์กอัป W3C เป็นทางเลือกสำหรับ favicon แต่การซ้อน <head> ที่ไม่ถูกต้อง (แท็กภายใน <body>) อาจทำให้เบราว์เซอร์เพิกเฉยต่อไอคอนของคุณโดยสิ้นเชิง
เรียกใช้การตรวจสอบ Lighthouse PWA หากการติดตั้งมีความสำคัญ โดยจะแจ้งว่าไอคอนรายการหายไปแม้ว่าแท็บจะดูดีก็ตาม
บุ๊กมาร์กหน้า ปิดเบราว์เซอร์ทั้งหมด เปิดใหม่ และยืนยันว่าแถบบุ๊กมาร์กยังคงแสดงเครื่องหมายของคุณ ที่ทดสอบพฤติกรรมแคช favicon แบบถาวร
ส่วนหัวด้านความปลอดภัยและเส้นทางไอคอน
Content-Security-Policy default-src ไม่ได้บล็อกการโหลด favicon จากแหล่งกำเนิดเดียวกัน URL ไอคอนข้ามต้นทางต้องมีการอนุญาต img-src หรือ default-src อย่างชัดเจน
ความสมบูรณ์ของทรัพยากรย่อยไม่ค่อยนำไปใช้กับ favicon โฮสติ้งจากแหล่งเดียวกันยังคงเป็นค่าเริ่มต้นที่ปลอดภัยที่สุด
หากไอคอนอยู่บนโดเมนย่อย CDN ให้ใช้ https:// URL ที่สมบูรณ์ใน href และตรวจสอบให้แน่ใจว่า CORS นั้นไม่เกี่ยวข้อง — favicon จะโหลดเป็นรูปภาพ ไม่ใช่ดึงข้อมูล
หลีกเลี่ยงข้อมูล: URI favicon ในการผลิต HTML พวกเขาขยายแคช HTML เลี่ยงการแคช CDN และทำให้ CSP ซับซ้อนขึ้น
ลำดับแท็กและรายการที่ซ้ำกัน
แท็ก rel=icon ซ้ำกันซึ่งมีไบต์ href เสียเหมือนกันแต่ไม่ค่อยทำให้การแสดงผลเสียหาย hrefs ที่ขัดแย้งกันซ้ำกันทำให้การแก้ไขข้อบกพร่องสับสน — ลบแท็กเก่าออก
ธีม WordPress บางธีมจะพิมพ์แท็ก ไอคอนเว็บไซต์ ขณะที่ปลั๊กอินจะเพิ่มชุดอื่น ใช้ View Source เพื่อตรวจจับรายการที่ซ้ำกันหลังจากติดตั้งปลั๊กอิน
วางลิงก์ไอคอนไว้หน้าบล็อกสคริปต์ขนาดใหญ่ในส่วนหัว การค้นพบตั้งแต่เนิ่นๆ ช่วยในการลงสีก่อน แม้ว่าไอคอนจะมีลำดับความสำคัญต่ำในการดาวน์โหลดก็ตาม
HTML5 ไม่จำเป็นต้องใส่เครื่องหมายทับในองค์ประกอบที่เป็นโมฆะ ตรวจสอบทั้ง <link ...> และ <link ... />
เคสแบบเดิมและแบบ Edge
ความคิดเห็นแบบมีเงื่อนไขของ IE ไม่ทำงาน อย่ารวมแท็กไอคอนสำหรับเบราว์เซอร์ที่ล้าสมัย
แท็กฐานใน head เปลี่ยนความละเอียดของ href ที่สัมพันธ์กัน เส้นทางไอคอนที่ขึ้นต้นด้วย / มีภูมิคุ้มกัน favicon.ico แบบสัมพัทธ์จะหยุดทำงานบนเส้นทางที่ซ้อนกันเมื่อตั้งค่าฐาน
Shadow DOM และส่วนประกอบของเว็บไม่สืบทอดหน้า favicon ไปยังรูทเงา — ไอคอนระดับเอกสารยังคงใช้กับแท็บ
การฝัง iframe จะแสดงเอกสารที่ฝัง favicon ไม่ใช่เอกสารระดับบนสุด แต่ละเฟรมต้องมีแท็กของตัวเองหากคุณควบคุมทั้งสองเฟรม
การทดสอบ file:// ในเครื่องอาจไม่สามารถแก้ไขได้ /favicon.ico ใช้เซิร์ฟเวอร์ dev ท้องถิ่นสำหรับพฤติกรรมไอคอนที่สมจริง
Bookmarklets และส่วนขยายเบราว์เซอร์ไม่สามารถเปลี่ยนไซต์ favicon ของคุณสำหรับผู้ใช้รายอื่นได้ — เฉพาะ Chrome ในเครื่องของคุณเท่านั้น ใช้แท็กที่ถูกต้องฝั่งเซิร์ฟเวอร์