---
title: icons
slug: Web/Manifest/icons
translation_of: Web/Manifest/icons
---
<div>{{QuickLinksWithSubpages("/th/docs/Web/Manifest")}}</div>

<table class="fullwidth-table standard-table">
 <tbody>
  <tr>
   <th scope="row">ชนิด</th>
   <td><code>String</code></td>
  </tr>
  <tr>
   <th scope="row">จำเป็น</th>
   <td>ใช่</td>
  </tr>
  <tr>
   <th scope="row">ตัวอย่าง</th>
   <td>
    <pre class="brush: json">
"icons": [{"src": "icon.webp", "sizes": "48x48", "type": "image/webp"}]</pre>
   </td>
  </tr>
 </tbody>
</table>

<p><code>icons</code>สมาชิกระบุอาร์เรย์ของวัตถุที่เป็นตัวแทนของไฟล์ภาพที่สามารถใช้เป็นแอปพลิเค iconsfor บริบทที่แตกต่างกัน ตัวอย่างเช่นสามารถใช้เพื่อแสดงแอปพลิเคชันเว็บท่ามกลางรายการแอปพลิเคชันอื่น ๆ หรือเพื่อรวมเว็บแอปพลิเคชันเข้ากับ  ตัวสลับงานของ<abbr title="ระบบปฏิบัติการ">ระบบปฏิบัติการ</abbr>และ/หรือการตั้งค่าระบบ</p>

<h2 id="ตัวอย่าง">ตัวอย่าง</h2>

<pre class="brush: json">"ไอคอน": [
  {
    "src": "ไอคอน/lowres.webp",
    "ขนาด": "48x48",
    "type": "image/webp"
  }
  {
    "src": "ไอคอน/lowres",
    "ขนาด": "48x48"
  }
  {
    "src": "ไอคอน/hd_hi.ico",
    "ขนาด": "72x72 96x96 128x128 256x256"
  }
  {
    "src": "ไอคอน/hd_hi.svg",
    "ขนาด": "72x72"
  }
]</pre>

<h2 id="ค่า">ค่า</h2>

<p>วัตถุรูปภาพอาจมีค่าต่อไปนี้:</p>

<table class="fullwidth-table standard-table">
 <thead>
  <tr>
   <th scope="col">สมาชิก</th>
   <th scope="col">ลักษณะ</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>sizes</code></td>
   <td>สตริงที่มีมิติข้อมูลคั่นด้วยช่องว่าง </td>
  </tr>
  <tr>
   <td><code>src</code></td>
   <td>เส้นทางไปยังไฟล์รูปภาพ หาก<code>src</code>เป็น URL สัมพัทธ์ URL หลักจะเป็น URL ของไฟล์ Manifest</td>
  </tr>
  <tr>
   <td><code>type</code></td>
   <td>คำแนะนำเกี่ยวกับประเภทสื่อของภาพ จุดประสงค์ของสมาชิกนี้คือเพื่อให้ตัวแทนผู้ใช้สามารถข้ามรูปภาพที่มีประเภทสื่อที่ไม่รองรับได้อย่างรวดเร็ว</td>
  </tr>
  <tr>
   <td><code>purpose</code></td>
   <td>
    <p>กำหนดวัตถุประสงค์ของภาพตัวอย่างเช่นหากภาพมีวัตถุประสงค์เพื่อให้บริการวัตถุประสงค์พิเศษบางอย่างในบริบทของโฮสต์ระบบปฏิบัติการ (เช่นเพื่อการรวมที่ดีขึ้น)</p>

    <p><a href="https://w3c.github.io/manifest/#purpose-member"><code>purpose</code></a> สามารถมีหนึ่งในค่าต่อไปนี้:</p>

    <ul>
     <li><code>badge</code>: ตัวแทนผู้ใช้สามารถแสดงไอคอนนี้โดยที่ข้อ จำกัด ด้านพื้นที่และ/หรือข้อกำหนดด้านสีแตกต่างจากไอคอนแอปพลิเคชัน</li>
     <li><code>maskable</code>: รูปภาพได้รับการออกแบบโดยมี<a href="https://w3c.github.io/manifest/#icon-masks">ไอคอนรูปแบบและเขตปลอดภัย</a>ไว้ในใจว่าตัวแทนใด ๆ ของภาพนอกเขตปลอดภัยสามารถถูกละเว้นและถูกปกปิดโดยตัวแทนผู้ใช้</li>
     <li><code>any</code>: ตัวแทนผู้ใช้มีอิสระที่จะแสดงไอคอนในบริบทใด ๆ (นี่คือค่าเริ่มต้น)</li>
    </ul>
   </td>
  </tr>
 </tbody>
</table>

<h2 id="ข้อมูลจำเพาะ">ข้อมูลจำเพาะ</h2>

<table class="fullwidth-table standard-table">
 <thead>
  <tr>
   <th scope="col">สเปค</th>
   <th scope="col">สถานะ</th>
   <th scope="col">คิดเห็น</th>
   <th scope="col">ผลตอบรับ</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>
    <p>{{SpecName('Manifest', '#icons-member', 'icons')}}</p>
   </td>
   <td>
    <p>{{Spec2('Manifest')}}</p>
   </td>
   <td>
    <p>คำจำกัดความเบื้องต้น</p>
   </td>
   <td>
    <p><a href="https://github.com/w3c/manifest/issues/">ร่างการทำงานของ Web App Manifest</a></p>
   </td>
  </tr>
 </tbody>
</table>

<h2 id="ความเข้ากันได้ของเบราว์เซอร์">ความเข้ากันได้ของเบราว์เซอร์</h2>

<div class="hidden">
<p>ตารางความเข้ากันได้ในหน้านี้สร้างขึ้นจากข้อมูลที่มีโครงสร้าง หากคุณต้องการมีส่วนร่วมกับข้อมูลโปรดตรวจสอบ<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>และส่งคำขอดึง</p>
</div>

<p>{{compat("html.manifest.icons")}}</p>