Quali dimensioni di icona servono a un’estensione Chrome?

In breve: un’estensione Chrome usa icone PNG da 16, 32, 48 e 128 px. Apri il Generatore di icone per estensioni Chrome di Imgovo, aggiungi un logo e scarica uno ZIP con tutte e quattro le dimensioni e la parte icons di manifest.json. Tutto viene creato nel tuo browser, quindi il tuo logo non viene mai caricato.

Dove si usa ogni dimensione

Secondo la documentazione di Chrome, le quattro dimensioni hanno compiti diversi:

Dimensione	Dove compare
16 × 16 px	Favicon nelle pagine dell’estensione e menu contestuale
32 × 32 px	Spesso richiesta sui computer Windows; usata anche per l’icona della barra degli strumenti nel frammento qui sotto
48 × 48 px	La pagina di gestione delle estensioni
128 × 128 px	Il Chrome Web Store e la finestra di installazione

Poiché l’icona da 16 px è minuscola, i dettagli fini e il testo sottile scompaiono. Un simbolo deciso o una lettera funzionano meglio di un logo dettagliato.

Usa PNG, non SVG

Chrome non supporta l’SVG per le icone dichiarate in manifest.json. Puoi comunque partire da un logo SVG: il generatore lo disegna a ogni dimensione e salva file PNG. Se vuoi convertire tu stesso un SVG, il Convertitore SVG lo fa a una larghezza esatta.

Passo dopo passo

1. Apri il Generatore di icone per estensioni Chrome e trascina un logo sulla pagina, clicca per sceglierlo o incollalo dagli appunti. Funziona meglio un’immagine quadrata con sfondo trasparente.
2. In Forma scegli Adatta l’intera immagine per mantenere tutto il logo, oppure Ritaglia in quadrato per riempire il quadrato.
3. Scegli uno Sfondo: trasparente o un colore.
4. Scrivi la Cartella delle icone nella tua estensione, per esempio icons/. Usa un nome di cartella semplice, senza spazi e senza indirizzo web.
5. Regola la spaziatura interna e gli Angoli arrotondati. Usa meno spaziatura per le icone piccole.
6. Controlla le quattro anteprime in Icone.
7. Clicca su Scarica le icone (ZIP).

Inserisci le icone in manifest.json

Lo ZIP contiene i quattro file PNG e un file chiamato manifest-icons.json. Le stesse righe compaiono anche in Aggiungi al tuo manifest.json, con il pulsante Copia. Hanno due parti: la chiave icons (dimensioni e percorsi) e la chiave action (l’icona della barra degli strumenti).

Il risultato è simile a questo. I nomi dei file nel tuo pacchetto possono essere diversi, quindi copia le righe che ti dà lo strumento:

{
  "icons": {
    "16": "icons/icon-16.png",
    "32": "icons/icon-32.png",
    "48": "icons/icon-48.png",
    "128": "icons/icon-128.png"
  },
  "action": {
    "default_icon": {
      "16": "icons/icon-16.png",
      "32": "icons/icon-32.png"
    }
  }
}

Non è un manifest completo. Copia le parti icons e action nel tuo manifest.json, crea la cartella nella tua estensione e mettici dentro i file PNG.

Firefox ed Edge

Anche i loro formati di estensione usano una chiave icons con file PNG, ma ogni store ha regole di revisione proprie e può chiedere dimensioni aggiuntive. Controlla la documentazione dello store su cui pubblichi. Imgovo crea solo le icone; non invia né approva nulla.

Controlli prima di pubblicare

• I quattro file PNG esistono nella cartella indicata in manifest.json.
• L’icona da 16 px è ancora leggibile su sfondo chiaro e scuro.
• L’icona corrisponde al logo della tua scheda sullo store.
• Hai provato l’estensione nel browser dopo aver cambiato il manifest.

Privacy

Le icone vengono disegnate nel tuo browser e lo ZIP viene creato sul tuo dispositivo. Il tuo logo non lascia mai il tuo computer.

Provalo ora

Apri il Generatore di icone per estensioni Chrome, aggiungi il tuo logo e scarica le quattro dimensioni in un solo ZIP. Per l’icona di un sito web usa invece il Generatore di favicon.