Electron Icon Generator: Ein Master, jede Plattform
Eine Electron-App erscheint für macOS, Windows und Linux, und jede Plattform verlangt Ihr Icon in anderer Form: .icns im App-Bundle, .ico in der Windows-Executable, PNGs unter Linux. Dieser Electron-Icon-Generator zeichnet den 1024-px-Master aus einem Satz, prüft ihn in Dock-Größe und lässt Ihnen eine saubere Datei, aus der electron-builder zuschneiden kann.
Desktop-App-Icons, generiert aus Text
Icons, gezeichnet für Desktop-Apps: einzelne Zeichen, die in einer Dock-Reihe, einer Taskleiste und einem Installationsdialog standhalten, generiert aus Prompts mit einem einzigen Satz.
Was eine Electron-App von einem Icon braucht
electron-builder reduziert die ganze Aufgabe auf eine Konvention: Legen Sie eine quadratische icon.png mit mindestens 512 px oder eine icon.svg in Ihre Build-Ressourcen, und er konvertiert die Datei für jede Zielplattform. Der schwierige Teil ist nie die Konvertierung. Es ist, einen 1024-px-Master zu bekommen, der die Konvertierung wert ist: einer, der vom 512-px-Installer bis zur 32-px-Taskleiste lesbar bleibt. Genau diesen Teil übernimmt dieser Electron-Icon-Generator.
Die build/-Konvention übernimmt die Konvertierung
electron-builder greift build/icon.png oder build/icon.svg automatisch auf und erzeugt die Plattform-Dateien während der Paketierung. Ihre einzige Zutat ist ein guter quadratischer Master mit 512 px oder mehr.
Die Dock-Größe ist der Richter
Desktop-Icons leben zwischen einer 16-px-Titelleisten-Glyphe und einer 512-px-Retina-Dock-Kachel. Jeder Kandidat zeigt Vorschauen in kleinen Größen, damit Sie eine Silhouette wählen und nicht nur ein hübsches Rendering.
AI zeichnet den Master, der Ihnen fehlt
Konverter skalieren, was Sie bereits haben. Wenn das Zeichen noch nicht existiert, erzeugt dieser Generator es aus einem Satz, in einer visuellen Sprache, in Export-Auflösung.
Electron-Icon-Größen: Was in .icns, .ico und Linux-PNGs eingeht
Diese Größen erstellen Sie nie von Hand. Die Tabelle ist das, was electron-builder aus Ihrem einen Master ableitet, betrachten Sie sie also als die Checkliste, die ein Electron-Icon-Generator erfüllen muss.
build/icon.png, die einzige Quelle
Eine quadratische PNG mit mindestens 512 px in Ihren Build-Ressourcen deckt alle drei Plattformen ab; 1024 px lässt Spielraum für die größte .icns-Variante. Dieser Generator exportiert genau diesen Master.
Windows: icon.ico in der Executable
Die .ico packt Zuschnitte mit 16, 24, 32, 48, 64, 128 und 256 px. Sie erscheint im Explorer, in der Taskleiste, in Verknüpfungen und im Eigenschaftenblatt der Executable, und eine fehlende oder zu kleine .ico ist der Grund, warum Builds auf das Standard-Icon zurückfallen.
macOS: icon.icns im App-Bundle
Die .icns bündelt Varianten von 16 px bis 1024 px für Retina-Dock- und Finder-Ansichten. electron-builder rendert sie aus Ihrem Master, wenn keine .icns mitgeliefert wird.
Linux: schlichte PNGs je Desktop-Umgebung
Linux-Ziele referenzieren PNG-Größen, typischerweise 512 px für App-Stores und eine Leiter hinunter zu Dialoggrößen. electron-builder gibt das Set aus demselben Master aus.
So erstellen Sie ein Electron-App-Icon in 3 Schritten
Wie der Electron-Icon-Generator von einem Satz zu der einen Datei gelangt, die electron-builder in Ihren Build-Ressourcen haben will.
- 1
Beschreiben Sie die App in einem Satz
Zum Beispiel: "Chat-App-Icon, gerundete blaue Sprechblase auf dunkler Kachel, flacher Stil". Ein Motiv, eine Formensprache. Desktop-Icons werden in einer Dock-Reihe neben nativen Apps beurteilt, also gewinnen kompakte Silhouetten.
- 2
Beurteilen Sie Kandidaten in Dock-Größe
Jeder Kandidat zeigt eine kleine Vorschau. Wählen Sie das Zeichen, das bei 32 px lesbar bleibt, denn diese Größe begegnen Ihre Nutzer zuerst, in der Taskleiste und im Fensterwechsler.
- 3
Legen Sie den 1024-px-Master in build/ ab
Exportieren Sie die PNG und speichern Sie sie als build/icon.png. electron-builder konvertiert sie beim nächsten Paketlauf in .icns, .ico und die Linux-PNGs, ohne separates Werkzeug.
Drei Wege, ein Electron-Icon zu erzeugen
Die npm-Pakete, die Konverter und die AI-Generatoren führen alle in denselben build/-Ordner. Sie unterscheiden sich darin, woher der Master stammt, weshalb dieser Electron-Icon-Generator einen Schritt früher ansetzt.
| npm-Icon-Builder | Online-Konverter | SparkIconAI | |
|---|---|---|---|
| Woher der Master stammt | Sie entwerfen ihn anderswo, das Werkzeug schneidet nur | Sie laden ein vorhandenes Bild hoch | Generiert aus einem Text-Prompt |
| Gibt das Plattform-Set aus | Ja, in build/icons/ | Meist ein Format pro Download | 1024-px-Master, den electron-builder zuschneidet |
| Läuft in | Ihren devDependencies und der CI | Einem Browser-Tab | Einem Browser-Tab |
| Beurteilung in kleiner Größe | Keine, Sie sehen nur die volle Größe | Selten | Dock- und Taskleisten-Vorschauen pro Kandidat |
| Design-Änderungen | Zurück zum Design-Werkzeug | Neuexport aus der Quelle | Satz ändern und neu laufen lassen |
| Kosten zum Ausprobieren | Kostenlos, Ihre Zeit | Kostenlos mit Grenzen | Kostenlose Credits zum Start |
Vergleich typischer npm-Pakete im Stil von electron-icon-builder, Online-Icon-Konvertern und AI-Icon-Generatoren, wie sie 2026 ausgeliefert werden. electron-builder führt in allen drei Routen die endgültige Plattform-Konvertierung aus; einzelne Werkzeuge variieren.
Electron-App-Icon-Prompts, die das Dock überstehen
Kopieren Sie einen und tauschen Sie das Motiv. Ein Desktop-Icon-Prompt, der funktioniert, nennt ein Motiv, eine Formensprache und eine Hintergrund-Entscheidung; die Plattform-Dateien werden später abgeleitet, nicht hier gezeichnet.
Dienstprogramm-App
Terminal-Fenster-Icon, gerundete dunkle Kachel, grüne Prompt-Glyphe, flacher Stil, lesbar bei 32 px
Media-App
Musikplayer-Icon, Schallplatte auf Farbverlaufs-Kachel, weiche Schatten, kein Text
Entwickler-Tool
Code-Editor-Icon, spitze Klammern auf abgerundetem Indigo-Quadrat, flacher geometrischer Stil, transparenter Hintergrund
Vom Master zur paketierten App
Der Generator endet beim Master; electron-builder übernimmt den Rest der Strecke. Ein Electron-Icon-Generator, der bei einem hübschen Rendering stoppen würde, ließe die Paketierungsgeschichte unvollendet, darum ersetzt eine Datei an einem konventionellen Ort ein Regal voller Icon-Assets samt der Skripte, die sie gepflegt haben.
Speichern Sie den Master als build/icon.png
Das buildResources-Verzeichnis ist die Konvention, die electron-builder durchsucht. Eine quadratische PNG mit mindestens 512 px, genannt icon.png, ist alles, was es verlangt; 1024 px deckt die größte macOS-Variante ab.
Lassen Sie electron-builder konvertieren
Beim Paketlauf rendert es die .icns für das macOS-Bundle, packt die .ico in die Windows-Executable und gibt Linux-PNGs aus. Verweisen Sie mit win.icon oder mac.icon nur dann auf eigene Dateien, wenn Sie überschreiben müssen.
Prüfen Sie das paketierte Ergebnis
Installieren oder entpacken Sie das Artefakt und schauen Sie aufs Dock oder die Taskleiste. Windows legt Icons aggressiv im Cache ab, eine veraltete Glyphe nach einem Rebranding stammt meist aus dem OS-Cache, nicht aus Ihrem Build.
Was der Electron-Icon-Generator für Sie übernimmt
Alles, was der Electron-Icon-Generator zwischen dem Satz und der Master-Datei in build/ tut.
Master in Export-Auflösung
Kandidaten rendern direkt mit 1024 px, der Größe, die electron-builder für die volle .icns-Leiter bevorzugt, sodass kein Upscaling zwischen Generierung und Paketierung steht.
Kleingrößen-Vorschauen an jedem Kandidaten
Dock- und Taskleisten-Vorschauen begleiten jedes Rendering, denn die paketierte App begegnet Nutzern bei 32 px lange vor 512 px.
Transparente oder vollflächige Hintergründe
Windows- und macOS-Formen maskieren unterschiedlich. Exportieren Sie transparent und lassen Sie jede Plattform ihre eigene Maske anwenden, oder brennen Sie eine gerundete Kachel ein, die überall durchdacht wirkt.
Varianten, ohne den Stil zu verlassen
Generieren Sie Varianten eines in die engere Wahl gezogenen Kandidaten, um Silhouette und Farbe zu justieren, während die visuelle Sprache bleibt.
Formate, die das Ökosystem spricht
PNG- und WEBP-Export, transparent oder vollflächig; wenn ein Store oder eine Doku-Seite einen anderen Zuschnitt braucht, schneidet die Resizer-Seite den Master zu, ohne die Website zu verlassen.
Eine Marke über Desktop und Web
Dieselbe Prompt-Familie speist die Website-Icon- und Favicon-Seiten, sodass die Desktop-App und die Website ein Zeichen teilen.
Verwandte Workflows
Benachbarte Generatoren für die Aufgaben rund um ein Favicon.
Website-Icon für die Produktseite
Schneiden Sie dasselbe Zeichen auf Browser-Tab-Größe für Ihre Landingpage zu.
Play-Store-Eintrags-Icon
Wenn das Produkt eine begleitende Android-App ausliefert, starten Sie vom selben Master.
Favicon für die Doku-Seite
Dokumentations-Subdomains brauchen ihr eigenes, 16-px-taugliches Zeichen.
Brand-Kit rund ums Icon
Erweitern Sie die visuelle Sprache auf Pitch-Decks und Social-Media-Header.
Verwandte Tools
Blog
Weiterführende Artikel
Ausführlichere Artikel zu Icons, Stilen und Export-Workflows.
Electron-Icon-Generator-FAQ
Größen, die build/-Konvention, der npm-Weg und der Standard-Icon-Fehler, der nicht ausstirbt.
Was ist ein Electron-Icon-Generator?
Er erzeugt die Icon-Assets, mit denen eine Electron-App paketiert wird. Diese Seite generiert den 1024-px-Master mit AI und zeigt Vorschauen in Dock-Größe; electron-builder leitet bei der Paketierung .icns, .ico und die Linux-PNGs aus dieser einen Datei ab.
Welche Icon-Größen braucht eine Electron-App?
Einen quadratischen Master mit mindestens 512 px, idealerweise 1024 px, gespeichert als build/icon.png. Daraus rendert electron-builder die macOS-.icns-Leiter von 16 px bis 1024 px, die Windows-.ico-Zuschnitte von 16 px bis 256 px und die Linux-PNG-Größen.
Brauche ich noch ein electron-icon-builder-npm-Paket?
Nicht, wenn Ihr Build das Standardverhalten von electron-builder nutzt: Eine einzelne build/icon.png oder icon.svg wird automatisch konvertiert. Die npm-Builder bleiben nützlich, wenn Sie einer Pipeline, die electron-builder nicht ausführt, eine konkrete .ico oder .icns übergeben müssen, was bei einem Electron-Icon-Generator-Workflow selten vorkommt.
Warum zeigt meine Electron-App das Standard-Icon?
Die Log-Zeile lautet "Default electron icon is used, reason: application icon is not set". Die häufigsten Ursachen sind eine fehlende build/icon.png, ein Master unter der Mindestgröße oder ein benutzerdefinierter win.icon-Pfad, der sich nicht auflöst. Beheben Sie die Datei oder den Pfad und bauen Sie neu.
Wie setze ich das Icon in der electron-builder-Konfiguration?
Zuerst die Standardwerte: build/icon.png wird ohne Konfiguration übernommen. Um pro Plattform zu überschreiben, setzen Sie mac.icon auf eine .icns oder eine PNG mit 512 px oder mehr, win.icon auf eine .ico mit 256 px oder mehr und linux.icon auf Ihren PNG-Pfad.
Kann ich das Icon generieren, statt ein vorhandenes Bild zu konvertieren?
Ja, genau dafür ist diese Electron-Icon-Generator-Seite da. Konverter setzen voraus, dass das Zeichen existiert; hier beschreiben Sie die App und erhalten Kandidaten, dann exportieren Sie den Gewinner mit 1024 px, fertig für den Build-Ordner.
Ist dieser Electron-Icon-Generator kostenlos auszuprobieren?
Kostenlose Credits decken die ersten Generierungen ab. Jeder Kandidat kostet ein Credit zum Rendern, und bezahlte Pläne ergänzen Volumen und Upscaling; der Preisabschnitt oben listet die aktuellen Stufen des Electron-Icon-Generators.
Was ist mit Linux-Distributionen mit eigenen Icon-Themes?
Linux-Desktop-Umgebungen skalieren PNGs über ihre Icon-Themes, darum verhält sich ein sauberer 512-px-Zuschnitt überall gut. Liefern Sie das Standard-Set aus, das electron-builder ausgibt, und überlassen Sie dem Theme die Masken.
.ico, .icns oder .png: was zählt am meisten?
Der Master. Alle drei Plattform-Dateien sind abgeleitete Zuschnitte desselben quadratischen Bildes, deshalb zahlt es sich auf jeder Plattform zugleich aus, die Aufmerksamkeit in einen Master zu investieren, der bei 32 px lesbar ist.
Windows zeigt nach einem Rebranding ein veraltetes Icon. Ist mein Build falsch?
Meist nicht. Windows speichert Icons pfadweise im Cache, darum können Explorer und Taskleiste die alte Glyphe nach einem Neubau behalten. Das Icon-Cache leeren oder die Executable umbenennen bringt die neue .ico zum Vorschein.
Generieren Sie Ihr Electron-App-Icon
Der Electron-Icon-Generator macht aus einem Satz einen 1024-px-Master, bereit dafür, dass electron-builder daraus .icns, .ico und Linux-PNGs schneidet.