1 files changed, 78 insertions, 0 deletions
diff --git a/files/ja/mozilla/add-ons/webextensions/manifest.json/icons/index.html b/files/ja/mozilla/add-ons/webextensions/manifest.json/icons/index.html
new file mode 100644
index 0000000000..e6f5b3d376
--- /dev/null
+++ b/files/ja/mozilla/add-ons/webextensions/manifest.json/icons/index.html
@@ -0,0 +1,78 @@
+---
+title: icons
+slug: Mozilla/Add-ons/WebExtensions/manifest.json/icons
+tags:
+  - Add-ons
+  - Extensions
+  - WebExtensions
+translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/icons
+---
+<div>{{AddonSidebar}}</div>
+
+<table class="fullwidth-table standard-table">
+ <tbody>
+  <tr>
+   <th scope="row" style="width: 30%;">型</th>
+   <td><code>Object</code></td>
+  </tr>
+  <tr>
+   <th scope="row">必須</th>
+   <td>いいえ</td>
+  </tr>
+  <tr>
+   <th scope="row">例</th>
+   <td>
+    <pre class="brush: json no-line-numbers">
+"icons": {
+  "48": "icon.png",
+  "96": "icon@2x.png"
+}</pre>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>The <code>icons</code> key specifies icons for your extension. Those icons will be used to represent the extension in components such as the Add-ons Manager.</p>
+
+<p>It consists of key-value pairs of image size in px and image path relative to the root directory of the extension.</p>
+
+<p>If <code>icons</code> is not supplied, a standard extension icon will be used by default.</p>
+
+<p>You should supply at least a main extension icon, ideally 48x48 px in size. This is the default icon that will be used in the Add-ons Manager. You may, however, supply icons of any size and Firefox will attempt to find the best icon to display in different components.</p>
+
+<p>Firefox will consider the screen resolution when choosing an icon. To deliver the best visual experience to users with high-resolution displays, such as Retina displays, provide double-sized versions of all your icons.</p>
+
+<h2 id="Example" name="Example">例</h2>
+
+<p>The keys in the <code>icons</code> object specify the icon size in px, values specify the relative icon path. This example contains a 48px extension icon and a larger version for high-resolution displays.</p>
+
+<pre class="brush: json no-line-numbers">"icons": {
+  "48": "icon.png",
+  "96": "icon@2x.png"
+}</pre>
+
+<h2 id="SVG" name="SVG">SVG</h2>
+
+<p>You can use SVG and the browser will scale your icon appropriately. There are currently two caveats though:</p>
+
+<ol>
+ <li>You need to specify a viewBox in the image. E.g.:
+  <pre class="brush: html">&lt;svg viewBox="0 0 48 48" width="48" height="48" ...</pre>
+ </li>
+ <li>Even though you can use one file, you still need to specify various size of the icon in your manifest. E.g.:
+  <pre class="brush: json">"icons": {
+  "48": "icon.svg",
+  "96": "icon.svg"
+}</pre>
+ </li>
+</ol>
+
+<div class="note">
+<p>If you are using a program like Inkscape for creating SVG, you might want to save it as a "plain SVG". Firefox might be confused by various special namespaces and not display your icon.</p>
+</div>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("webextensions.manifest.icons")}}</p>