Windows アプリのアイコンを作成する
アプリのアイコンを設計したら、アイコン ファイル自体を作成する必要があります。 Windowsでは複数のテーマ、表示解像度、スケール ファクターがサポートされているため、アイコンの複数のバージョンを指定して、すべてのデバイスで任意のサイズで適切に表示されるようにする必要があります。
アイコン のサイズ (WPF、UWP、WinUI)
Windowsは、アイコンの表示場所とユーザーの表示スケール設定に応じて、さまざまなサイズでアプリ アイコンを表示します。 次の表に、アイコンの表示にWindows使用できるすべてのサイズを示します。
アイコンのサイズ (Win32)
Windows ICOファイルは長い間使用されてきました。 上記の完全なセットのサブセットである標準サイズが使用されています。
アイコンのスケーリング
Windowsにアプリのアイコンが表示されると、最初に正確なサイズの一致が検索されます。 完全に一致するものがない場合は、上記の次のサイズを探してスケールダウンします。 アプリにアイコンサイズを追加すると、Windowsはピクセルに完全に一致することが多く、スケーリングされたアイコンに適用されるスケーリングの量が減ります。
Windows 11スケール ファクター | 100% | 125% | 150% | 200% | 250% | 300% | 400% |
---|---|---|---|---|---|---|---|
コンテキスト メニュー、タイトル バー、システム トレイ | 16px | 20px | 24px | 32px | 40px | 48px | 64px |
タスク バー、検索結果、すべてのアプリの一覧を開始する | 24px | 30px | 36px | 48px | 60px | 72px | 96px |
スタート ピン | 32px | 40px | 48px | 64px | 80px | 96px | 256px |
注意
アプリには、16 x 16、24 x 24、32 x 32、48 x 48、および 256 x 256 が必要です。 これは最も一般的なアイコンサイズをカバーし、256pxアイコンを提供することで、Windowsはアイコンを縮小するだけで、決して上がらないようにします。
透明な背景
アイコンは、透明な背景で最もよく見えます。 アプリのブランド化でアイコンを背景にメッキする必要がある場合は、それも問題ありません。 ただし、透明なアイコンが無料で取得するいくつかのテーマ機能を再実装する必要があります。 たとえば、2 つの異なる背景にメッキされたアプリのアイコンのバージョンを指定できます。1 つは明るいテーマに適し、もう 1 つはダーク テーマに適しています。
アイコンとバリエーションの完全な一覧
Windowsは、さまざまな UI コンテキストでさまざまなアイコンアセットを利用します。 Windows 10 Windows 11 & の間で使用量が少し変わりました。
次の一覧では、対応する各アイコンWindows含める必要がある特定のファイル名を定義します。
アプリのアイコン
Windows 10と 11 では、AppList アイコンはアプリのプライマリ アイコンです。 タスク バー、スタート ピン、すべてのアプリの一覧、検索結果の一覧など、いくつかの場所で使用されます。 Windows 11は、現在のスケール ファクターに基づいてすべてのアプリの一覧に適切なアイコンを選択しますが、指定した場合は明示的に定義された特定のアイコンを使用Windows 10。
アイコンが同じ場合でも、3 つのテーマ バリエーション (既定、明るいテーマ、ダーク テーマ) すべてに個別のファイルが必要です。 これらのファイルを指定しない場合は、最小コントラスト比を確保するために、アイコンがシステム アイコン プレートに表示されます。
アプリ 一覧のターゲット サイズ (必須)
- AppList.targetsize-16.png
- AppList.targetsize-20.png
- AppList.targetsize-24.png
- AppList.targetsize-30.png
- AppList.targetsize-32.png
- AppList.targetsize-36.png
- AppList.targetsize-40.png
- AppList.targetsize-48.png
- AppList.targetsize-60.png
- AppList.targetsize-64.png
- AppList.targetsize-72.png
- AppList.targetsize-80.png
- AppList.targetsize-96.png
- AppList.targetsize-256.png
ダーク テーマ (必須)
- AppList.targetsize-16_altform-unplated.png
- AppList.targetsize-20_altform-unplated.png
- AppList.targetsize-24_altform-unplated.png
- AppList.targetsize-30_altform-unplated.png
- AppList.targetsize-32_altform-unplated.png
- AppList.targetsize-36_altform-unplated.png
- AppList.targetsize-40_altform-unplated.png
- AppList.targetsize-48_altform-unplated.png
- AppList.targetsize-60_altform-unplated.png
- AppList.targetsize-64_altform-unplated.png
- AppList.targetsize-72_altform-unplated.png
- AppList.targetsize-80_altform-unplated.png
- AppList.targetsize-96_altform-unplated.png
- AppList.targetsize-256_altform-unplated.png
淡色テーマ (必須)
- AppList.targetsize-16_altform-lightunplated.png
- AppList.targetsize-20_altform-lightunplated.png
- AppList.targetsize-24_altform-lightunplated.png
- AppList.targetsize-30_altform-lightunplated.png
- AppList.targetsize-32_altform-lightunplated.png
- AppList.targetsize-36_altform-lightunplated.png
- AppList.targetsize-40_altform-lightunplated.png
- AppList.targetsize-48_altform-lightunplated.png
- AppList.targetsize-60_altform-lightunplated.png
- AppList.targetsize-64_altform-lightunplated.png
- AppList.targetsize-72_altform-lightunplated.png
- AppList.targetsize-80_altform-lightunplated.png
- AppList.targetsize-96_altform-lightunplated.png
- AppList.targetsize-256_altform-lightunplated.png
アプリ リスト スケール (Windows 10) (省略可能)
- AppList.scale-100.png
- AppList.scale-125.png
- AppList.scale-150.png
- AppList.scale-200.png
- AppList.scale-400.png
明るいテーマ (Windows 10) (省略可能)
- AppList.scale-100_altform-colorful_theme-light.png
- AppList.scale-125_altform-colorful_theme-light.png
- AppList.scale-150_altform-colorful_theme-light.png
- AppList.scale-200_altform-colorful_theme-light.png
- AppList.scale-400_altform-colorful_theme-light.png
注意
アイコンの上に targetsize-*-altform-unplated アセットを含めなければ、サイズが小さくなり、タスク バーとスタート画面のアイコンの背後に望ましくないバックプレートが表示されます。
タイル
Windows 10では、小、中、広、大の 4 つのタイル サイズがサポートされています。
既定/暗いテーマ (部分的に必須)
- SmallTile.scale-100.png
- SmallTile.scale-125.png
- SmallTile.scale-150.png
- SmallTile.scale-200.png
- SmallTile.scale-400.png
- MedTile.scale-100.png
- MedTile.scale-125.png
- MedTile.scale-150.png
- MedTile.scale-200.png
- MedTile.scale-400.png
- WideTile.scale-100.png
- WideTile.scale-125.png
- WideTile.scale-150.png
- WideTile.scale-200.png
- WideTile.scale-400.png
- LargeTile.scale-100.png
- LargeTile.scale-125.png
- LargeTile.scale-150.png
- LargeTile.scale-200.png
- LargeTile.scale-400.png
淡色テーマ (省略可能)
- SmallTile.scale-100_altform-colorful_theme-light.png
- SmallTile.scale-125_altform-colorful_theme-light.png
- SmallTile.scale-150_altform-colorful_theme-light.png
- SmallTile.scale-200_altform-colorful_theme-light.png
- SmallTile.scale-400_altform-colorful_theme-light.png
- MedTile.scale-100_altform-colorful_theme-light.png
- MedTile.scale-125_altform-colorful_theme-light.png
- MedTile.scale-150_altform-colorful_theme-light.png
- MedTile.scale-200_altform-colorful_theme-light.png
- MedTile.scale-400_altform-colorful_theme-light.png
- WideTile.scale-100_altform-colorful_theme-light.png
- WideTile.scale-125_altform-colorful_theme-light.png
- WideTile.scale-150_altform-colorful_theme-light.png
- WideTile.scale-200_altform-colorful_theme-light.png
- WideTile.scale-400_altform-colorful_theme-light.png
- LargeTile.scale-100_altform-colorful_theme-light.png
- LargeTile.scale-125_altform-colorful_theme-light.png
- LargeTile.scale-150_altform-colorful_theme-light.png
- LargeTile.scale-200_altform-colorful_theme-light.png 8 LargeTile.scale-400_altform-colorful_theme-light.png
注意
Windows 11はタイルアセットを使用しませんが、現在、Microsoft Storeに発行するには、少なくとも 100% の中タイルアセットが必要です。 アプリWindows 10 & 11 の互換性がある場合は、できるだけ多くのタイル アセットを含むことをお勧めします。
スプラッシュ スクリーン
スプラッシュ画面は、アプリ アイコンアセットのように明るいテーマと濃色テーマに対応することもできます。
[Default]
- SplashScreen.scale-100.png
- SplashScreen.scale-125.png
- SplashScreen.scale-150.png
- SplashScreen.scale-200.png
- SplashScreen.scale-400.png
ダーク テーマ (省略可能)
- SplashScreen.scale-100_altform-colorful_theme-dark.png
- SplashScreen.scale-125_altform-colorful_theme-dark.png
- SplashScreen.scale-150_altform-colorful_theme-dark.png
- SplashScreen.scale-200_altform-colorful_theme-dark.png
- SplashScreen.scale-400_altform-colorful_theme-dark.png
淡色テーマ (省略可能)
- SplashScreen.scale-100_altform-colorful_theme-light.png
- SplashScreen.scale-125_altform-colorful_theme-light.png
- SplashScreen.scale-150_altform-colorful_theme-light.png
- SplashScreen.scale-200_altform-colorful_theme-light.png
- SplashScreen.scale-400_altform-colorful_theme-light.png
バッジ ロゴ
バッジ アイコンは、Windows 10ロック画面で使用され、ほとんどのアプリでは必要ありません。
Windows 10 (省略可能)
- BadgeLogo.scale-100.png
- BadgeLogo.scale-125.png
- BadgeLogo.scale-150.png
- BadgeLogo.scale-200.png
- BadgeLogo.scale-400.png
パッケージ ロゴ (Microsoft Store ロゴ)
これらの資産は、Microsoft Storeに発行するために必要です。
既定/ダーク テーマ (必須)
- StoreLogo.scale-100.png
- StoreLogo.scale-125.png
- StoreLogo.scale-150.png
- StoreLogo.scale-200.png
- StoreLogo.scale-400.png
淡色テーマ (省略可能)
- StoreLogo.scale-100_altform-colorful_theme-light.png
- StoreLogo.scale-125_altform-colorful_theme-light.png
- StoreLogo.scale-150_altform-colorful_theme-light.png
- StoreLogo.scale-200_altform-colorful_theme-light.png
- StoreLogo.scale-400_altform-colorful_theme-light.png