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
|
---
title: icons
slug: Mozilla/Add-ons/WebExtensions/manifest.json/icons
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%;">Tipo</th>
<td><code>Object</code></td>
</tr>
<tr>
<th scope="row">Obligatorio</th>
<td>No</td>
</tr>
<tr>
<th scope="row">Ejemplo</th>
<td>
<pre class="brush: json no-line-numbers">
"icons": {
"48": "icon.png",
"96": "icon@2x.png"
}</pre>
</td>
</tr>
</tbody>
</table>
<p>La propiedad <code>icons</code> especifica los iconos de tu extensión. Esos iconos se usarán para representar la extensión en componentes como el Administrador de complementos.</p>
<p>Consiste en pares clave-valor del tamaño de la imagen en px y la ruta de la imagen relativa al directorio raíz de la extensión.</p>
<p>Si <code>icons</code> no esta definido, se utilizará un icono de extensión estándar por defecto.</p>
<p>Debería suministrar al menos un icono de extensión principal, idealmente de 48x48 px de tamaño. Este es el icono por defecto que se utilizará en el Administrador de complementos. Sin embargo, puedes suministrar iconos de cualquier tamaño y Firefox intentará encontrar el mejor icono para mostrar en los diferentes componentes.</p>
<p>Firefox tendrá en cuenta la resolución de la pantalla al elegir un icono. Para ofrecer la mejor experiencia visual a los usuarios con pantallas de alta resolución, como las pantallas Retina, proporciona versiones de doble tamaño de todos sus iconos.</p>
<h2 id="Ejemplo">Ejemplo</h2>
<p>Las propiedades del objeto <code>icons</code> especifican el tamaño del icono en px, los valores especifican la ruta relativa del icono. Este ejemplo contiene un icono de extensión de 48px y una versión más grande para pantallas de alta resolución.</p>
<pre class="brush: json no-line-numbers">"icons": {
"48": "icon.png",
"96": "icon@2x.png"
}</pre>
<h2 id="SVG">SVG</h2>
<p>Puede usar SVG y el navegador escalará su icono adecuadamente. Sin embargo, hay dos advertencias:</p>
<ol>
<li>Necesitas especificar un viewBox en la imagen. E.g.:
<pre class="brush: html"><svg viewBox="0 0 48 48" width="48" height="48" ...</pre>
</li>
<li>Aunque puedes usar un archivo, todavía necesitas especificar varios tamaños del icono en tu manifiesto. E.g.:
<pre class="brush: json">"icons": {
"48": "icon.svg",
"96": "icon.svg"
}</pre>
</li>
</ol>
<div class="note">
<p>Si está usando un programa como Inkscape para crear SVG, puede que quiera guardarlo como un "SVG simple". Firefox podría confundirse con varios espacios de nombres especiales y no mostrar su icono.</p>
</div>
<h2 id="Compatibilidad">Compatibilidad</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>
|
