1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
|
---
title: Ícones (icons)
slug: Mozilla/Add-ons/WebExtensions/manifest.json/icons
tags:
- Extensões
- Extensões da Web
- Extras
translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/icons
original_slug: Mozilla/Add-ons/WebExtensions/manifest.json/icones
---
<div>{{AddonSidebar}}</div>
<table class="fullwidth-table standard-table">
<tbody>
<tr>
<th scope="row" style="width: 30%;">Tipo</th>
<td><code>Objeto</code></td>
</tr>
<tr>
<th scope="row">Obrigatório</th>
<td>Não</td>
</tr>
<tr>
<th scope="row">Exemplo</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="Exemplo">Exemplo</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">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"><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="Compatibilidade_de_navegador">Compatibilidade de navegador</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>
|
