Electronアイコンジェネレーター:1つのマスターで、全プラットフォームへ
ElectronアプリはmacOS、Windows、Linuxへ出荷され、各プラットフォームはアイコンを別々の形で扱います。アプリバンドルには.icns、Windowsの実行ファイルには.ico、LinuxにはPNG。このElectronアイコンジェネレーターは1文から1024 pxのマスターを描き、Dockサイズで確認したうえで、electron-builderが切り出すためのクリーンなファイルを1枚だけ残します。
テキストから生成されたデスクトップアプリアイコン
デスクトップアプリ向けに描かれたアイコン集。Dockの並び、タスクバー、インストーラーのダイアログで耐える1つのマークばかりを、1文のプロンプトから生成しています。
Electronアプリがアイコンに求めるもの
electron-builderは仕事全体を1つの規約にまとめます。512 px以上の正方形のicon.pngかicon.svgをbuildリソースに置けば、すべてのターゲットプラットフォーム向けに変換してくれる、というものです。難しいのは決して変換ではなく、変換する価値のある1024 pxマスターを手に入れることです。512 pxのインストーラーから32 pxのタスクバーまで判読可能なマスター。そこを、このElectronアイコンジェネレーターが引き受けます。
build/の規約が変換を担う
electron-builderはbuild/icon.pngやbuild/icon.svgを自動で拾い、パッケージング中にプラットフォームのファイルを生成します。あなたの入力は、512 px以上の正方形マスター1枚だけです。
判定するのはDockサイズ
デスクトップアイコンは、16 pxのタイトルバーグリフと512 pxのRetina Dockタイルの間で生きます。全候補が小さいサイズでプレビューされるため、きれいなレンダリングではなく、シルエットで選べます。
AIが足りないマスターを描く
コンバーターは既にあるものをリサイズするだけです。マークがまだ存在しないなら、このジェネレーターが1文から、1つのビジュアル言語で、書き出し解像度のまま作ります。
Electronアイコンのサイズ:.icns、.ico、Linux PNGに何が入るか
これらのサイズを手作業で作ることはありません。表はelectron-builderがあなたの1枚のマスターから導くもので、Electronアイコンジェネレーターが満たすべきチェックリストとして扱ってください。
build/icon.png、唯一のソース
buildリソースにある512 px以上の正方形PNGが、3プラットフォームすべてをカバーします。1024 pxなら最大の.icnsバリアントに余地が残ります。このジェネレーターは、まさにそのマスターを書き出します。
Windows:実行ファイルの中のicon.ico
.icoには16、24、32、48、64、128、256 pxの切り出しが詰まります。エクスプローラー、タスクバー、ショートカット、実行ファイルのプロパティに表示され、.icoが欠けていたり小さすぎたりすると、ビルドが既定アイコンへフォールバックする原因になります。
macOS:アプリバンドルのicon.icns
.icnsは16 pxから1024 pxまでのバリアントを束ね、RetinaのDockやFinderの表示に応えます。.icnsが渡されなければ、electron-builderがマスターから描画します。
Linux:デスクトップ環境ごとのプレーンなPNG
LinuxターゲットはPNGサイズを参照します。通常はアプリストア向けの512 pxと、ダイアログサイズまで続く階段です。electron-builderが同じマスターからセットを出力します。
3ステップでElectronアプリアイコンを作る方法
Electronアイコンジェネレーターが1文から、buildリソースにelectron-builderが求める1枚のファイルへ進む流れです。
- 1
アプリを1文で記述する
例:「チャットアプリのアイコン、ダークタイルの上の丸い青い吹き出し、フラットスタイル」。主題1つ、形状の言語1つ。デスクトップアイコンはネイティブアプリの隣のDockの並びで判定されるため、コンパクトなシルエットが勝ちます。
- 2
Dockサイズで候補を判定する
全候補が小さくプレビューされます。32 pxでも判読可能なマークを選びましょう。ユーザーがタスクバーとウィンドウ切替で最初に出会うのが、そのサイズだからです。
- 3
1024 pxのマスターをbuild/へ置く
PNGを書き出してbuild/icon.pngとして保存します。electron-builderが次のパッケージ実行で.icns、.ico、Linux向けPNGへ変換するため、別ツールは不要です。
Electronアイコンを作る3つの方法
npmパッケージ、コンバーター、AIジェネレーターは、すべて同じbuild/フォルダに着地します。違うのはマスターがどこから来るかで、このElectronアイコンジェネレーターが1歩前から始まるのはそのためです。
| npmアイコンビルダー | オンラインコンバーター | SparkIconAI | |
|---|---|---|---|
| マスターはどこから | 別のツールで自分でデザイン、ツールは切り出しのみ | 既存の画像をアップロード | テキストプロンプトから生成 |
| プラットフォームセットの出力 | はい、build/icons/へ | たいてい1ダウンロード1形式 | electron-builderが切り出す1024 pxマスター |
| 動作する場所 | devDependenciesとCIの中 | ブラウザタブ | ブラウザタブ |
| 小サイズの判定 | なし、フルサイズしか見えない | まれ | 候補ごとのDockとタスクバーのプレビュー |
| デザイン変更 | デザインツールへ戻る | ソースから再書き出し | 文を編集して再実行 |
| 試用コスト | 無料、かかるのは時間 | 制限つきで無料 | 開始用の無料クレジット |
典型的なelectron-icon-builder系のnpmパッケージ、オンラインのアイコンコンバーター、AIアイコンジェネレーターの2026年時点での比較です。いずれの経路でも最終のプラットフォーム変換を行うのはelectron-builderです。個々のツールには差があります。
Dockで生き残るElectronアプリアイコンのプロンプト
1つをコピーして主題を差し替えるだけです。効くデスクトップアイコンのプロンプトは、主題1つ、形状の言語1つ、そして背景の決定を名指しします。プラットフォームのファイルは後から導かれるのであって、ここで描くものではありません。
ユーティリティアプリ
ターミナルウィンドウのアイコン、丸みのあるダークタイル、緑のプロンプトグリフ、フラットスタイル、32 pxでも判読可能
メディアアプリ
音楽プレーヤーのアイコン、グラデーションタイルの上のレコード盤、柔らかな影、文字なし
デベロッパーツール
コードエディターのアイコン、インディゴの角丸四角の上の山括弧、フラットで幾何学的なスタイル、透明背景
マスターからパッケージ済みアプリへ
ジェネレーターの仕事はマスターで終わり、その先はelectron-builderが運びます。きれいなレンダリングで止まるElectronアイコンジェネレーターは、パッケージングの話を書き切れません。決まった場所の1枚のファイルが、アイコンアセットの棚と、それを維持するスクリプトの束を置き換えるのです。
マスターをbuild/icon.pngとして保存
buildResourcesディレクトリは、electron-builderが走査する規約です。512 px以上の正方形PNGをicon.pngという名前で置けばそれで十分で、1024 pxならmacOSの最大バリアントもカバーします。
変換はelectron-builderに任せる
パッケージ実行の中で、macOSバンドル向けの.icnsを描画し、Windowsの実行ファイルへ.icoを詰め、Linux向けPNGを出力します。win.iconやmac.iconを独自ファイルへ向けるのは、上書きが必要なときだけです。
パッケージ結果を確認する
成果物をインストールか展開して、Dockやタスクバーを見ましょう。Windowsはアイコンを積極的にキャッシュするため、リブランド後も古いグリフが出るのはたいていOSのキャッシュであって、ビルドではありません。
Electronアイコンジェネレーターが代行すること
あなたの1文から、build/に置かれるマスターファイルまで、Electronアイコンジェネレーターが行うすべて。
書き出し解像度のマスター
候補は最初から1024 pxで描画されます。electron-builderが.icnsの全階段に望むサイズであり、生成とパッケージングの間にアップスケールを挟みません。
全候補に小サイズプレビュー
各レンダリングにはDockとタスクバーのプレビューが付きます。パッケージ済みアプリは512 pxよりずっと前の32 pxでユーザーと出会うからです。
透明または単色の背景
WindowsとmacOSはマスクの仕方が違います。透明で書き出して各プラットフォームにマスクを任せるか、どこでも意図的に見える角丸タイルを焼き込みます。
スタイルを離れないバリエーション
絞り込んだ候補のバリエーションを生成して、ビジュアル言語を保ったままシルエットと色を調整できます。
エコシステムが話すフォーマット
PNGとWEBPの書き出し、透明も単色も。ストアやドキュメントが別の切り出しを求めるときは、リサイザーのページがサイトを離れずにマスターを切り分けます。
デスクトップとWebで1つのブランド
同じプロンプトファミリーがサイトアイコンとファビコンのページにも流れるため、デスクトップアプリとWebサイトが1つのマークを共有します。
関連ツール
ブログ
さらに読む
アイコン、スタイル、書き出しワークフローに関する長めの読み物。
ElectronアイコンジェネレーターFAQ
サイズ、build/の規約、npmの経路、そしてなくならない既定アイコンのエラー。
Electronアイコンジェネレーターとは?
Electronアプリがパッケージするアイコンアセットを作るツールです。このページはAIで1024 pxマスターを生成し、Dockサイズでプレビューします。そのあとelectron-builderが、その1枚のファイルから、パッケージング中に.icns、.ico、Linux向けPNGを導きます。
Electronアプリに必要なアイコンサイズは?
512 px以上、理想的には1024 pxの正方形マスター1枚をbuild/icon.pngとして保存します。そこからelectron-builderが、16 pxから1024 pxまでのmacOS .icnsの階段、16 pxから256 pxまでのWindows .icoの切り出し、Linux向けPNGサイズを描画します。
electron-icon-builderのnpmパッケージはまだ必要?
ビルドがelectron-builderの既定動作を使うなら不要です。1枚のbuild/icon.pngかicon.svgが自動で変換されます。npmのビルダーが依然有用なのは、electron-builderを実行しないパイプラインに特定の.icoや.icnsを渡さねばならないときで、Electronアイコンジェネレーターのワークフローではまれなケースです。
Electronアプリが既定アイコンを表示するのはなぜ?
ログには「Default electron icon is used, reason: application icon is not set」と出ます。原因の多くは、build/icon.pngの欠落、最小サイズ未満のマスター、解決しない独自のwin.iconパスです。ファイルかパスを直して再ビルドしましょう。
electron-builderのconfigでアイコンを指定するには?
まずは既定値です。build/icon.pngは設定なしで拾われます。プラットフォームごとに上書きするなら、mac.iconに.icnsか512 px以上のPNG、win.iconに256 px以上の.ico、linux.iconにPNGのパスを設定します。
既存画像の変換ではなく生成もできる?
はい、それがこのElectronアイコンジェネレーターページの存在理由です。コンバーターはマークが既にあると想定します。ここではアプリを記述すれば候補が届き、勝者を1024 pxで書き出してbuildフォルダへ直接持っていけます。
このElectronアイコンジェネレーターは無料で試せる?
最初の生成は無料クレジットでカバーされます。各候補のレンダリングは1クレジットで、有料プランで生成量とアップスケールが追加されます。Electronアイコンジェネレーターの現在の階層は、上の料金セクションに一覧があります。
独自のアイコンテーマをもつLinuxディストリビューションでは?
Linuxのデスクトップ環境はアイコンテーマを通じてPNGを拡大縮小するため、クリーンな512 pxの切り出しはどこでもよく振る舞います。electron-builderが出力する標準セットを出荷し、マスクはテーマに任せましょう。
.ico、.icns、.png、どれが最重要?
マスターです。3つのプラットフォームファイルはすべて、同じ正方形画像から導かれた切り出しです。32 pxで読めるマスターへ注意を注げば、全プラットフォームで同時に報われます。
リブランド後にWindowsが古いアイコンを表示する。ビルドが悪い?
たいてい違います。Windowsはパス単位でアイコンをキャッシュするため、再ビルド後もエクスプローラーやタスクバーが古いグリフを保持することがあります。アイコンキャッシュを消すか、実行ファイルの名前を変えれば、新しい.icoが現れます。
Electronアプリアイコンを生成しよう
Electronアイコンジェネレーターが1文を1024 pxのマスターへ変えます。electron-builderがそこから.icns、.ico、Linux向けPNGを切り出せる状態で。