SparkIconAISparkIconAI
🚀 最新の GPT Image 2.5 モデルを導入!
✨ SparkIconAI 3.0 登場:無限キャンバスでアイコンを自由に生成・進化
🚀 最新の GPT Image 2.5 モデルを導入!

Electronアイコンジェネレーター:1つのマスターで、全プラットフォームへ

ElectronアプリはmacOS、Windows、Linuxへ出荷され、各プラットフォームはアイコンを別々の形で扱います。アプリバンドルには.icns、Windowsの実行ファイルには.ico、LinuxにはPNG。このElectronアイコンジェネレーターは1文から1024 pxのマスターを描き、Dockサイズで確認したうえで、electron-builderが切り出すためのクリーンなファイルを1枚だけ残します。

インスピレーションギャラリー

テキストから生成されたデスクトップアプリアイコン

デスクトップアプリ向けに描かれたアイコン集。Dockの並び、タスクバー、インストーラーのダイアログで耐える1つのマークばかりを、1文のプロンプトから生成しています。

AI-generated metallic icon
AI-generated 3d icon
AI-generated minimalist icon
AI-generated glassy icon
AI-generated clay icon
AI-generated line icon
AI-generated hand drawn icon
AI-generated metallic icon
AI-generated 3d icon
AI-generated glassy icon
AI-generated minimalist icon
AI-generated glassy icon
AI-generated line icon
AI-generated 3d icon
AI-generated minimalist icon
AI-generated clay icon
AI-generated metallic icon
AI-generated hand drawn icon
AI-generated glassy icon
AI-generated line icon
AI-generated 3d icon
AI-generated glassy icon
AI-generated metallic icon
AI-generated 3d icon
AI-generated neon icon
AI-generated line icon
AI-generated clay icon
AI-generated minimalist icon
AI-generated glassy icon
AI-generated metallic icon
AI-generated hand drawn icon
AI-generated 3d icon
AI-generated minimalist icon
AI-generated metallic icon
AI-generated glassy icon
AI-generated clay icon
AI-generated metallic icon
AI-generated 3d icon
AI-generated line icon
AI-generated glassy icon
AI-generated minimalist icon
AI-generated 3d icon
AI-generated neon icon
AI-generated line icon
AI-generated metallic icon
AI-generated clay icon
AI-generated glassy icon
AI-generated 3d icon
AI-generated metallic icon
AI-generated minimalist icon
はじめに

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つのビジュアル言語で、書き出し解像度のまま作ります。

1枚の1024 px Electronアプリアイコンのマスターが、buildフォルダの中でicon.icns、icon.ico、Linux向けPNGセットへ展開されていく図
サイズマトリクス

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つ、形状の言語1つ。デスクトップアイコンはネイティブアプリの隣のDockの並びで判定されるため、コンパクトなシルエットが勝ちます。

  2. 2

    Dockサイズで候補を判定する

    全候補が小さくプレビューされます。32 pxでも判読可能なマークを選びましょう。ユーザーがタスクバーとウィンドウ切替で最初に出会うのが、そのサイズだからです。

  3. 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のビルドパイプライン。1024 pxのアイコンマスターがbuild/icon.pngとして保存され、electron-builderがicns、ico、Linux向けPNGを切り出し、アイコンつきのアプリがDockに並ぶ
機能

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の経路、そしてなくならない既定アイコンのエラー。

1

Electronアイコンジェネレーターとは?

Electronアプリがパッケージするアイコンアセットを作るツールです。このページはAIで1024 pxマスターを生成し、Dockサイズでプレビューします。そのあとelectron-builderが、その1枚のファイルから、パッケージング中に.icns、.ico、Linux向けPNGを導きます。

2

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サイズを描画します。

3

electron-icon-builderのnpmパッケージはまだ必要?

ビルドがelectron-builderの既定動作を使うなら不要です。1枚のbuild/icon.pngかicon.svgが自動で変換されます。npmのビルダーが依然有用なのは、electron-builderを実行しないパイプラインに特定の.icoや.icnsを渡さねばならないときで、Electronアイコンジェネレーターのワークフローではまれなケースです。

4

Electronアプリが既定アイコンを表示するのはなぜ?

ログには「Default electron icon is used, reason: application icon is not set」と出ます。原因の多くは、build/icon.pngの欠落、最小サイズ未満のマスター、解決しない独自のwin.iconパスです。ファイルかパスを直して再ビルドしましょう。

5

electron-builderのconfigでアイコンを指定するには?

まずは既定値です。build/icon.pngは設定なしで拾われます。プラットフォームごとに上書きするなら、mac.iconに.icnsか512 px以上のPNG、win.iconに256 px以上の.ico、linux.iconにPNGのパスを設定します。

6

既存画像の変換ではなく生成もできる?

はい、それがこのElectronアイコンジェネレーターページの存在理由です。コンバーターはマークが既にあると想定します。ここではアプリを記述すれば候補が届き、勝者を1024 pxで書き出してbuildフォルダへ直接持っていけます。

7

このElectronアイコンジェネレーターは無料で試せる?

最初の生成は無料クレジットでカバーされます。各候補のレンダリングは1クレジットで、有料プランで生成量とアップスケールが追加されます。Electronアイコンジェネレーターの現在の階層は、上の料金セクションに一覧があります。

8

独自のアイコンテーマをもつLinuxディストリビューションでは?

Linuxのデスクトップ環境はアイコンテーマを通じてPNGを拡大縮小するため、クリーンな512 pxの切り出しはどこでもよく振る舞います。electron-builderが出力する標準セットを出荷し、マスクはテーマに任せましょう。

9

.ico、.icns、.png、どれが最重要?

マスターです。3つのプラットフォームファイルはすべて、同じ正方形画像から導かれた切り出しです。32 pxで読めるマスターへ注意を注げば、全プラットフォームで同時に報われます。

10

リブランド後にWindowsが古いアイコンを表示する。ビルドが悪い?

たいてい違います。Windowsはパス単位でアイコンをキャッシュするため、再ビルド後もエクスプローラーやタスクバーが古いグリフを保持することがあります。アイコンキャッシュを消すか、実行ファイルの名前を変えれば、新しい.icoが現れます。

Electronアプリアイコンを生成しよう

Electronアイコンジェネレーターが1文を1024 pxのマスターへ変えます。electron-builderがそこから.icns、.ico、Linux向けPNGを切り出せる状態で。