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

Note

アプリには、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

Note

アイコンの上に 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

Note

Windows 11 ではタイル アセットは使用されませんが、現在、Microsoft Store に発行するには、少なくとも 100% の中のタイルアセットが必要です。 アプリが Windows 10 と 11 の互換性がある場合は、できるだけ多くのタイル アセットを含むことをお勧めします。

スプラッシュ スクリーン

スプラッシュ画面は、アプリ アイコンアセットのように明るいテーマと濃色テーマにすることもできます。

既定値

• 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