คู่มือ Web App Manifest
ไฟล์ web app manifest (site.webmanifest) บอกเบราว์เซอร์ว่าแอปของคุณชื่ออะไร ใช้สีอะไร และต้องใช้ไอคอนขนาดใดบนหน้าจอหลัก ใช้ร่วมกับไอคอน PNG ขนาด 192×192 และ 512×512 เพื่อตั้งค่า favicon แบบ PWA ให้ครบ
เชื่อม manifest ด้วย <link rel="manifest" href="/site.webmanifest"> ใน JSON อาร์เรย์ icons ต้องมีอย่างน้อย 192×192 และ 512×512 ประเภท image/png พร้อม purpose "any" (เพิ่ม maskable สำหรับไอคอนแบบปรับได้บน Android หากต้องการ)
ตั้งค่า theme_color และ background_color ให้ตรงกับแบรนด์ของคุณ ค่าเหล่านี้กำหนดแถบเบราว์เซอร์และหน้าจอสแปลชระหว่างติดตั้งแอป
วิธีการทำงาน
- 1
สร้างไอคอน PNG
ขนาด 192 และ 512 จากเครื่องมือสร้าง favicon ของเรา
- 2
สร้าง site.webmanifest
ใส่ name, short_name, icons, theme_color และ display
- 3
เชื่อมใน HTML
<link rel="manifest" href="/site.webmanifest"> พร้อม meta theme-color
ลองเลย
สร้างชุดไอคอน PWA
เครื่องมือสร้าง Faviconคำถามที่พบบ่อย
เว็บไซต์ทั่วไปต้องมี manifest หรือไม่+
ไม่จำเป็น — ใช้เมื่อต้องการติดตั้งบนหน้าจอหลักหรือประสบการณ์ Android ที่สมบูรณ์ favicon.ico เพียงพอสำหรับแท็บ
ควรใส่ไอคอนขนาดใดใน manifest+
ต้องมี 192×192 และ 512×512 สำหรับคำเชิญติดตั้ง เพิ่ม 384 หรือ maskable เพื่อผลลัพธ์ที่สวยขึ้น
ใช้ SVG ใน manifest ได้หรือไม่+
Chromium รองรับในบางกรณี แต่ PNG ยังเป็นตัวเลือกที่ปลอดภัยสำหรับ UI ติดตั้งข้ามเบราว์เซอร์