Icons และ Maskable Icons

อาร์เรย์ `icons`

ฟิลด์ icons ใน manifest คืออาร์เรย์ของอ็อบเจ็กต์รูปภาพ browser จะเลือกขนาดที่เหมาะสมที่สุดสำหรับแต่ละบริบท: กล่องโต้ตอบการติดตั้ง, หน้าจอหลัก, splash screen และ app switcher

{
  "icons": [
    {
      "src": "/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

แต่ละรายการมีสามคุณสมบัติ:

คุณสมบัติ	คำอธิบาย
`src`	เส้นทางไปยังไฟล์รูปภาพ (absolute หรือ relative จาก manifest)
`sizes`	รายการขนาด `WxH` คั่นด้วยช่องว่างที่ไฟล์นี้รองรับ
`type`	MIME type เช่น `"image/png"`, `"image/svg+xml"`
`purpose`	ไม่บังคับ: `"any"`, `"maskable"` หรือ `"any maskable"`

ขนาดขั้นต่ำที่จำเป็น

Chrome และ browser Chromium อื่น ๆ ต้องการ icon ขนาด 192 x 192 เพื่อแสดง install prompt และ icon ขนาด 512 x 512 สำหรับ splash screen ควรใส่ทั้งคู่เสมอ

icon SVG สามารถครอบคลุมทุกขนาดด้วยรายการเดียว:

{ "src": "/icons/icon.svg", "sizes": "any", "type": "image/svg+xml" }

Maskable icons

Android 8 (Oreo) และรุ่นใหม่กว่าใช้ adaptive icons — ระบบปฏิบัติการจะตัด icon เป็นรูปทรง (วงกลม, สี่เหลี่ยมมน, หยดน้ำ ฯลฯ) ที่ตรงกับธีมของอุปกรณ์ icon มาตรฐานที่วางในมาสก์นั้นอาจถูกตัดขอบออก

maskable icon ได้รับการออกแบบโดยให้ artwork ทั้งหมดอยู่ใน safe zone ตรงกลางที่รับประกันว่าจะมองเห็นได้ไม่ว่าจะเป็นรูปทรงมาสก์ใด safe zone คือวงกลมที่มีเส้นผ่านศูนย์กลาง 80% ของขอบที่สั้นที่สุด ของรูปภาพ

flowchart TB
  subgraph icon ["512 x 512 icon canvas"]
    subgraph safe ["Safe zone (80% circle — always visible)"]
      Logo["Logo / artwork here"]
    end
    BleedArea["Bleed area — may be clipped by OS mask"]
  end

Safe zone ของ maskable icon — วาง logo ไว้ในวงกลม 80%

ประกาศ maskable icon โดยตั้งค่า "purpose": "maskable":

{
  "src": "/icons/icon-512-maskable.png",
  "sizes": "512x512",
  "type": "image/png",
  "purpose": "maskable"
}

คุณยังสามารถให้ไฟล์เดียวรองรับทั้งสองวัตถุประสงค์:

{
  "src": "/icons/icon-512.png",
  "sizes": "512x512",
  "type": "image/png",
  "purpose": "any maskable"
}

แต่วิธีนี้ใช้ได้ก็ต่อเมื่อ artwork ของคุณอยู่ใน safe zone จริง ๆ ในกรณีส่วนใหญ่ควรเตรียม สองไฟล์แยกกัน: icon มาตรฐาน (purpose: "any") และ icon ที่ออกแบบมาเฉพาะสำหรับ masking (purpose: "maskable")

การสร้าง icons

ใช้ Maskable.app เพื่อดูตัวอย่างว่า icon ของคุณจะดูเป็นอย่างไรในรูปทรง mask ต่าง ๆ PWA Asset Generator สามารถสร้างทุกขนาดที่ต้องการจากไฟล์ SVG เดียว

ชุด icon ที่แนะนำ:

[
  { "src": "/icons/icon-192.png",          "sizes": "192x192", "type": "image/png", "purpose": "any" },
  { "src": "/icons/icon-512.png",          "sizes": "512x512", "type": "image/png", "purpose": "any" },
  { "src": "/icons/icon-192-maskable.png", "sizes": "192x192", "type": "image/png", "purpose": "maskable" },
  { "src": "/icons/icon-512-maskable.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
]

ข้อแลกเปลี่ยน

ตัวเลือก	Benefit	Cost
ทำ maskable icon แยกจาก icon ปกติ	ไอคอนไม่โดนตัดขอบเพี้ยนบน Android (circular crop)	ต้องออกแบบและ export ไฟล์ icon เพิ่มอีกชุด
ใช้ icon ชุดเดียวสำหรับทุก purpose	จัดการไฟล์น้อยกว่า ดูแลง่ายกว่า	เสี่ยงโดน crop เพี้ยนบน platform ที่ต้องการ safe zone แบบ maskable

ข้อผิดพลาดที่พบบ่อย

ไม่ใส่ purpose: “maskable” เลย ทำให้ Android เอา icon ปกติไป crop เป็นวงกลมและตัดโลโก้ขาดหาย
ออกแบบโลโก้เต็มขอบไฟล์ 512x512 โดยไม่เผื่อ safe zone กลาง 80% ตามสเปก maskable icon
ใส่ icon แค่ขนาดเดียว (เช่น 192x192) ทำให้ device ที่ต้องการ resolution สูงกว่าต้อง upscale จนภาพแตก

💡 ตัวอย่างจากของจริง

Squoosh — ออกแบบ maskable icon เฉพาะสำหรับ Android โดยเว้น safe zone ตรงกลางตามสเปก ทำให้โลโก้ไม่โดนตัดเมื่อถูก crop เป็นวงกลม

Maskable.app (เครื่องมือของ Google) — เป็นเครื่องมือ preview มาตรฐานที่นักพัฒนา PWA ใช้ตรวจ safe zone ก่อน ship icon จริง