favicon から Electron アプリアイコンを作成

パッケージングしたElectron appがまだ既定のElectron logoを表示している場合は、アプリのネイティブバンドルアイコンが未設定です。faviconファイルからelectron app iconを作成するには、platformごとのassetが必要です。rel='icon'で宣言したページリソースは、インストール済みappのiconとは別のものです（[HTML Standard](https://html.spec.whatwg.org/multipage/links.html#rel-icon)）。

前提条件

• Electron project、electron-builderを用意し、ImageMagickをPATH上で利用できるようにしてください。
• 正方形のSVG、または利用可能な最大のPNG faviconを用意してください。16ピクセルのrasterを拡大しても、鮮明な画像は期待できません。
• macOSのcommandを実行する場合は、sipsとiconutilが使えるmacOSのshellを開いてください。

元ファイルがない場合は、How to Download a Favicon from Any Websiteを参照してください。Mzu favicondlを使えば、PNGとICOに変換できます。

faviconファイルからelectron app iconを作成する

1. 1024ピクセルのマスターを作成する。 アートワークを透明な正方形キャンバスの中央に配置します。

   magick -background none favicon.svg -resize '1024x1024>' -gravity center -extent 1024x1024 icon.png

   favicon.svgを実際のファイルに置き換えてください。vector artworkを優先し、小さなrasterは書き直してからexportしてください。
2. 複数解像度のICOを作成する。 PNGのファイル名を変更してもICOは作成できません。

   magick -background none favicon.svg -define icon:auto-resize=256,128,64,48,32,24,16 icon.ico

   実際の入力ファイルに置き換えてください。また、icon.pngをicon.icoと同じディレクトリに置いてください。
3. macOS上でマスターからmacOS向けICNSを作成する:

   mkdir -p icon.iconset
   sips -z 16 16 icon.png --out icon.iconset/icon_16x16.png
   sips -z 32 32 icon.png --out icon.iconset/[email protected]
   sips -z 32 32 icon.png --out icon.iconset/icon_32x32.png
   sips -z 64 64 icon.png --out icon.iconset/[email protected]
   sips -z 128 128 icon.png --out icon.iconset/icon_128x128.png
   sips -z 256 256 icon.png --out icon.iconset/[email protected]
   sips -z 256 256 icon.png --out icon.iconset/icon_256x256.png
   sips -z 512 512 icon.png --out icon.iconset/[email protected]
   sips -z 512 512 icon.png --out icon.iconset/icon_512x512.png
   cp icon.png icon.iconset/[email protected]
   iconutil -c icns icon.iconset -o icon.icns

   これにより、ネイティブICNSコンテナが生成されます。
4. electron-builderに各assetを指定する。electron-builder.ymlで次のように設定します。

   win:
     icon: build/icon.ico
   mac:
     icon: build/icon.icns
   linux:
     icon: build/icon.png

   3つのファイルをすべてbuild/にコピーしてください。npx electron-builderを実行し、対象platformのpackageを確認してください。

よくある落とし穴

• ブラウザの favicon だけを使う。 タブの favicon は、アプリケーションのバンドルアイコンを置き換えるものではありません。デザインの区别については、Favicon と App Icon の違いを参照してください。
• PNG の拡張子を ICO に変更する。 拡張子を変更しても、複数サイズのコンテナは作成されません。上記の変換コマンドを使用してください。
• クロップによってマークが失われる。 重要な形状は端から離して配置し、最小の表示サイズでテストしてください。ネイティブアイコンには、フルロゴよりもシンプルなアートワークが必要です。
• パスの不一致。 YAML 内のパスはプロジェクト設定を基準とした相対パスであり、Linux のパスは大文字と小文字を区別します。ビルド前に、すべてのファイルが存在することを確認してください。

まとめ

favicon を元のアートワークとして使用し、各プラットフォームのネイティブ形式に書き出したうえで、 packaging tool が正しいアイコンを各アプリケーションのバンドルに配置するようにしてください。Mzu favicondlは favicon から PNG および ICO への準備を処理するため、mast 清潔で再現性の高い Electron ビルドに集中できます。