Windows アプリのアイコンを作成する

  • [アーティクル]

A diagram that shows several icon locations in Windows 11.

アプリのアイコンを設計したら、アイコン ファイル自体を作成する必要があります。 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に発行するために必要です。

既定/ダーク テーマ (必須)

  • 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