Imgovo
DE

Welche Icon-Größen braucht eine Chrome-Erweiterung?

3 Min. Lesezeit · Aktualisiert · Zuletzt geprüft:

Auf dieser Seite
  1. Wo welche Größe verwendet wird
  2. PNG verwenden, nicht SVG
  3. Schritt für Schritt
  4. Die Icons in die manifest.json eintragen
  5. Firefox und Edge
  6. Checkliste vor der Veröffentlichung
  7. Datenschutz
  8. Jetzt ausprobieren

Kurz gesagt: Eine Chrome-Erweiterung verwendet PNG-Icons in 16, 32, 48 und 128 px. Öffnen Sie das Tool Chrome-Erweiterungssymbole erstellen von Imgovo, fügen Sie ein Logo hinzu und laden Sie eine ZIP-Datei mit allen vier Größen und dem Teil icons der manifest.json herunter. Alles entsteht in Ihrem Browser, Ihr Logo wird nie hochgeladen.

Wo welche Größe verwendet wird

Laut der Dokumentation von Chrome haben die vier Größen unterschiedliche Aufgaben:

Größe Wo sie erscheint
16 × 16 px Favicon auf Erweiterungsseiten und im Kontextmenü
32 × 32 px Oft auf Windows-Computern erforderlich; im Snippet unten auch für das Symbol der Symbolleiste verwendet
48 × 48 px Die Verwaltungsseite für Erweiterungen
128 × 128 px Der Chrome Web Store und der Installationsdialog

Weil das 16-px-Icon so klein ist, verschwinden feine Details und dünne Schrift. Ein kräftiges Symbol oder ein Buchstabe funktioniert besser als ein detailreiches Logo.

PNG verwenden, nicht SVG

Chrome unterstützt keine SVG für die in der manifest.json angegebenen Icons. Sie können trotzdem mit einem SVG-Logo beginnen: Der Generator zeichnet es in jeder Größe und speichert PNG-Dateien. Wenn Sie eine SVG selbst umwandeln möchten, erledigt das der SVG-Konverter mit genauer Breite.

Schritt für Schritt

  1. Öffnen Sie das Tool Chrome-Erweiterungssymbole erstellen und ziehen Sie ein Logo auf die Seite, klicken Sie zum Auswählen oder fügen Sie es aus der Zwischenablage ein. Am besten eignet sich ein quadratisches Bild mit transparentem Hintergrund.
  2. Wählen Sie unter Form Ganzes Bild einpassen, um das ganze Logo zu behalten, oder Auf Quadrat zuschneiden, um das Quadrat zu füllen.
  3. Wählen Sie einen Hintergrund: transparent oder eine Farbe.
  4. Geben Sie den Ordner der Symbole in Ihrer Erweiterung ein, zum Beispiel icons/. Nehmen Sie einen einfachen Ordnernamen ohne Leerzeichen und ohne Webadresse.
  5. Passen Sie Innenabstand und Abgerundete Ecken an. Bei kleinen Icons nehmen Sie weniger Innenabstand.
  6. Prüfen Sie die vier Vorschauen unter Symbole.
  7. Klicken Sie auf Symbole herunterladen (ZIP).

Die Icons in die manifest.json eintragen

Die ZIP-Datei enthält die vier PNG-Dateien und eine Datei namens manifest-icons.json. Dieselben Zeilen erscheinen auch unter Zu Ihrer manifest.json hinzufügen mit einer Schaltfläche Kopieren. Sie bestehen aus zwei Teilen: dem Schlüssel icons (Größen und Pfade) und dem Schlüssel action (das Symbol der Symbolleiste).

Das Ergebnis sieht so aus. Die Dateinamen in Ihrem eigenen Paket können abweichen, kopieren Sie deshalb die Zeilen, die das Tool Ihnen gibt:

{
  "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"
    }
  }
}

Das ist kein vollständiges Manifest. Kopieren Sie die Teile icons und action in Ihre eigene manifest.json, legen Sie den Ordner in Ihrer Erweiterung an und kopieren Sie die PNG-Dateien hinein.

Firefox und Edge

Auch deren Erweiterungsformate verwenden einen Schlüssel icons mit PNG-Dateien, aber jeder Store hat eigene Prüfregeln und verlangt eventuell zusätzliche Größen. Lesen Sie die Dokumentation des Stores, in dem Sie veröffentlichen. Imgovo erstellt nur die Icons; es reicht nichts ein und genehmigt nichts.

Checkliste vor der Veröffentlichung

  • Die vier PNG-Dateien liegen in dem Ordner, der in der manifest.json steht.
  • Das 16-px-Icon ist auf hellem und dunklem Hintergrund noch lesbar.
  • Das Icon passt zum Logo in Ihrem Store-Eintrag.
  • Sie haben die Erweiterung nach der Änderung des Manifests im Browser getestet.

Datenschutz

Die Icons werden in Ihrem Browser gezeichnet, und die ZIP-Datei wird auf Ihrem Gerät erstellt. Ihr Logo verlässt Ihren Computer nie.

Jetzt ausprobieren

Öffnen Sie das Tool Chrome-Erweiterungssymbole erstellen, fügen Sie Ihr Logo hinzu und laden Sie alle vier Größen in einer ZIP-Datei herunter. Für ein Website-Icon nutzen Sie stattdessen den Favicon-Generator.

Häufig gestellte Fragen

Welche Icon-Größen braucht eine Chrome-Erweiterung?

Die Dokumentation von Chrome nennt 16, 32, 48 und 128 px. Das 16-px-Icon dient als Favicon auf Erweiterungsseiten und im Kontextmenü, 48 px auf der Erweiterungsseite und 128 px im Chrome Web Store und bei der Installation. Imgovo erzeugt alle vier.

Kann ich ein SVG im Manifest verwenden?

Chrome unterstützt keine SVG für die in der manifest.json angegebenen Icons. Sie können ein SVG-Logo im Generator öffnen; er zeichnet es in jeder Größe und speichert PNG-Dateien, die das beste Ergebnis liefern.

Was kommt in die manifest.json?

Der Schlüssel icons listet Größen und Dateipfade, und der Schlüssel action kann das Symbol der Symbolleiste festlegen. Die Datei manifest-icons.json enthält genau diese beiden Teile mit den Pfaden Ihres Pakets. Kopieren Sie sie in Ihre eigene manifest.json; sie ist allein kein vollständiges Manifest.

Funktioniert das auch für Firefox und Edge?

Deren Erweiterungsformate verwenden denselben Schlüssel icons mit PNG-Dateien, aber jeder Store hat eigene Prüfregeln und zusätzliche Größen. Lesen Sie die Dokumentation des Stores, in dem Sie veröffentlichen. Imgovo reicht nichts ein und genehmigt nichts.

Welches Bild eignet sich am besten?

Eine einfache, kräftige Form. Das 16-px-Symbol ist winzig, feine Details und dünne Schrift verschwinden. Verwenden Sie bei kleinen Symbolen weniger Innenabstand oder gehen Sie von einem Zeichen oder Buchstaben aus.

Wird mein Logo hochgeladen?

Nein. Die Symbole werden in Ihrem Browser gezeichnet, und die ZIP-Datei entsteht auf Ihrem Gerät.