ファビコンとElectron/Tauri：デスクトップWebアプリのブランディング

Webアプリを構築して、デスクトップアプリケーションとしてパッケージ化したいと思ったことはありませんか？ElectronやTauriを起動してビルドコマンドを実行すると...あの汎用的なデフォルトアイコンが表示されます。目指していたプロフェッショナルな外観とは程遠いですね。

ここで重要なのは、デスクトップアプリのアイコンはWebのファビコンとは全く異なる動作をするということです。publicフォルダにある小さな32x32のPNGでは不十分です。デスクトップアプリには複数のフォーマット、特定のサイズ、ほとんどのWeb開発者が考えたこともないプラットフォーム固有のファイルが必要です。

なぜファビコンだけでは不十分なのか

Webアプリがブラウザで実行されるとき、ファビコンはタブに表示されます。シンプルです。しかし、同じアプリをElectronやTauriでラップすると、突然以下のためのアイコンが必要になります：

アプリケーションウィンドウのタイトルバー
Dock（macOS）またはタスクバー（Windows）
インストーラーとセットアップウィザード
「プログラムの追加と削除」リスト
ファイルの関連付け
Spotlight検索とFinderプレビュー

これらのコンテキストはそれぞれ異なるサイズ、場合によっては全く異なるフォーマットを期待しています。そのため、単一のファビコンファイルではデスクトップアプリが未完成に見えてしまいます。

実際に必要な3つのフォーマット

Windows用ICO

WindowsはICOフォーマットを使用します。これは実際には1つのファイルに複数のサイズを保持するコンテナです。icoファイルには16、24、32、48、64、256ピクセルのレイヤーを含める必要があります。256pxのレイヤーは特に重要で、Windowsは高DPIディスプレイや大きなアイコンビューに使用します。

よくあるミスは、32pxレイヤーだけでicoを生成することです。タスクバーでは機能しますが、スタートメニューやファイルエクスプローラーではアプリがぼやけて見えます。

macOS用ICNS

AppleのICNSフォーマットも概念的にはICOに似ています。複数のサイズをまとめてバンドルします。ただし、サイズ要件はより厳格です。Retinaディスプレイ用の1xと2xバージョン両方で、16x16、32x32、128x128、256x256、512x512が必要です。

macOSのiconutilコマンドは、特別に構造化されたPNGフォルダをicnsファイルに変換できますが、正直なところ自動化ツールの方が簡単です。

Linux用PNG

Linuxデスクトップ環境はより柔軟です。ほとんどが標準サイズ（128、256、512）のPNGファイルセットを受け入れます。一部のelectron-builderやTauri設定は、単一の高解像度PNGを指定するだけで、システムにスケーリングを任せます。

Electronの設定

electron-builder（ほとんどのElectronプロジェクトで使用）を使用している場合、アイコン設定はpackage.jsonまたはelectron-builder.ymlに記述します：

{
  "build": {
    "appId": "com.yourapp.id",
    "icon": "build/icon",
    "mac": {
      "icon": "build/icon.icns"
    },
    "win": {
      "icon": "build/icon.ico"
    },
    "linux": {
      "icon": "build"
    }
  }
}

electron-builderはbuildResourcesディレクトリ（デフォルトはbuild）でアイコンファイルを探します。icon.icns、icon.ico、PNGファイルセットをそこに配置すれば設定完了です。

Electron Forgeの場合も同様ですが、異なる設定フォーマットを使用します。forge.config.jsファイルが各プラットフォームのアイコンパスを処理します。

Tauriの設定

Tauriは少し異なるアプローチを取ります。tauri iconコマンドが単一のソース画像から必要なすべてのフォーマットを生成します：

npm run tauri icon ./app-icon.png

これにより、すべてのプラットフォーム用に適切にフォーマットされたファイルを含むiconsフォルダ全体が作成されます。出力はデフォルトでsrc-tauri/icons/に配置されます。

tauri.conf.jsonはbundleセクションでこれらのアイコンを参照します：

{
  "bundle": {
    "icon": [
      "icons/32x32.png",
      "icons/128x128.png",
      "icons/128x128@2x.png",
      "icons/icon.icns",
      "icons/icon.ico"
    ]
  }
}

Tauri 2.0ではこの設定が簡略化され、bundleキーはtauriの下にネストされるのではなく、トップレベルに配置されるようになりました。

Webファビコンはまだ重要

ここで人々が混乱することがあります：デスクトップアイコンを設定した後でも、Webファビコンはアプリ内で使用されます。ElectronやTauriアプリがWebコンテンツを読み込むとき、webviewはブラウザと同様にfavicon.icoをリクエストします。

つまり、両方が必要です：

OS レベルのUI用のデスクトップアプリケーションアイコン（icns、ico、png）
内部webviewコンテンツ用のWebファビコン

Webファビコンをスキップすると、一部の内部ブラウザクロームやdevtoolsで壊れたアイコンが表示される可能性があります。軽微な問題ですが、簡単に修正できます。

単一ソースからアイコンを生成

15種類以上のアイコンバリアントを手動で作成したい人はいません。実際に機能するツールは以下の通りです：

Electron用：

electron-icon-builder - 1024x1024のPNGを渡すと、必要なすべてを出力
electron-icon-maker - 同様の機能、npmパッケージ

Tauri用：

組み込みのtauri iconコマンド - すでにTauri CLIを使用している場合は最も簡単なオプション

汎用：

Real Favicon Generator - Webベース、WebファビコンとデスクトップアイコンJ両方を処理
IconVectors - 単一のSVGをICO、ICNS、PNGセットに変換

キーは、少なくとも1024x1024ピクセルのソース画像から始めることです。SVGは完璧にスケールするのでさらに良いです。

デザインの考慮事項

デスクトップアイコンはWebファビコンとは異なるコンテキストで存在します。いくつかの点に注意：

シンプルさはスケールダウンする。 512pxのアイコンは素晴らしく見えるかもしれませんが、16pxでどのようにレンダリングされるか確認してください。複雑なディテールはぼやけた塊になります。

実際の背景でテスト。 macOSのDockアイコンは半透明の背景に配置されます。Windowsのタスクバーアイコンはライトテーマかダークテーマの上にあるかもしれません。両方のシナリオでアイコンに十分なコントラストがあることを確認してください。

プラットフォームの慣例を尊重。 macOSアイコンには微妙な影と角丸があることが多いです。Windowsアイコンはよりフラットな傾向があります。これらに正確に従う必要はありませんが、認識しておくとアプリがネイティブに感じられます。

マスカブルバリアントを検討。 一部のコンテキスト（特にモバイルも行う場合のAndroid）では、アイコンを円や角丸の正方形にクロップします。セーフゾーンを考慮してデザインしてください。

よくある問題と修正

リビルド後にアイコンが更新されない？ ElectronとTauriの両方が開発中にアイコンを積極的にキャッシュします。ビルド出力ディレクトリを完全にクリアしてリビルドしてみてください。

Windowsでアイコンがぼやける？ icoファイルに256pxレイヤーが欠けています。必要なすべてのサイズを含むツールで再生成してください。

macOSで汎用アイコンが表示される？ icnsファイルが不正な形式か間違った場所にある可能性があります。iconutil -c icns YourIcon.iconset -o icon.icnsを実行してゼロから再生成してください。

Linuxでdockにアイコンが表示されない？ 一部のデスクトップ環境では、.desktopファイルを通じてアイコンを登録する必要があります。electron-builderまたはTauri設定のLinux固有の設定を確認してください。

すべてをまとめる

クロスプラットフォームデスクトップアプリの適切に設定されたアイコンセットアップは次のようになります：

build/
├── icon.icns          # macOSアプリケーションアイコン
├── icon.ico           # Windowsアプリケーションアイコン
├── icon.png           # Linux用512px
├── 256x256.png        # 追加のLinuxサイズ
└── 128x128.png

さらに、webviewコンテンツ用の通常のWebファビコンをpublicまたはstaticディレクトリに配置。

この追加の努力は報われます。洗練されたアイコンは、アプリが完全でプロフェッショナルであることをユーザーに示します。単にシェルにラップされたWebページではありません。これは人々が最初に見るものの1つであり、第一印象は重要です。

参考資料

Electron Forge Icon Guide - Electronアプリへのアイコンの作成と追加に関する公式ドキュメント
electron-builder Icons - electron-builderアイコンセットアップの設定リファレンス
Tauri App Icons - アイコン生成と設定に関するTauri 2.0ドキュメント
Apple Icon Image Format - ICNSフォーマット仕様のWikipediaリファレンス
Define Your App Icons - MDN - PWAのアプリアイコン要件に関するMozillaガイド