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

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 が必要です。 これは最も一般的なアイコン サイズを対象としており、256 ピクセルのアイコンを提供することで、Windowsはアイコンをスケールダウンするだけで済み、決して上がらないようにします。

アイコン サイズと MSIX マニフェストの関係

アプリの MSIX (または AppX) マニフェストを確認した場合は、 Square44x44Logo や Square150x150Logo などのエントリに気付いた可能性があります。 これらは 基本サイズであり、アプリで必要なサイズだけではありません。 Windowsでは、ディスプレイ スケール ファクターを使用して、実行時に要求する実際のピクセル サイズを決定します。 マニフェストは基本イメージファイル名 (たとえば、 Square44x44Logo.png) を指し、修飾子 ( Square44x44Logo.scale-200.png など) を使用して事前にスケーリングされたバリアントを指定します。 Windows、ユーザーの表示設定に最適な一致を選択します。

次の表は、各マニフェスト エントリが各スケール ファクターで実際のピクセル サイズにどのようにマップされるかを示しています。

マニフェスト エントリ 基本サイズ 100% 125% 150% 200% 250% 300パーセント 400%
Square44x44Logo 44 px 44 px 55 px 66 px 88 px 110 px 132 px 176 px
Square150x150Logo 150 px 150 px 188 px 225 px 300 px 375 px 450 px 600 px
Wide310x150Logo 310×150 px 310×150 px 388×188 px 465×225 px 620×300 px 775×375 px 930×450 px 1240×600 px
Square310x310Logo 310 px 310 px 388 px 465 px 620 px 775 px 930 px 1240 px
Square71x71Logo 71 px 71 px 89 px 107 px 142 px 178 px 213 px 284 px
ストアロゴ 50 px 50 px 63 px 75 px 100 px 125 px 150 px 200 px

アプリ一覧アイコンでは、ターゲット サイズのバリエーション (下の [アプリ アイコン] セクションに記載されています) もサポートしています。これは、タスク バー アイコン、コンテキスト メニュー、およびアイコンがタイルパディングなしで表示されるその他の UI 要素に使用Windows。 ターゲット サイズアセットは、スケール ファクターではなく、正確なピクセル ディメンション (16、24、32、48、256 など) で指定されます。

Tip

可能なすべてのサイズを作成する必要はありません。 少なくとも、 Square44x44Logo エントリと Square150x150Logo エントリに対して 100%、200%、および 400% スケールに加えて、[ アプリ アイコン ] セクションに一覧表示されているターゲット サイズのバリエーションを資産に提供します。 Windowsは、中間スケール ファクター (125%、150%、250%、および 300%) で使用可能な最も近い資産を選択します。

完全なマニフェスト スキーマについては、「 VisualElements」を参照してください。

透明な背景

アイコンは、透明な背景で最もよく見えます。 アプリのブランド化でアイコンを背景にメッキする必要がある場合は、それも問題ありません。 ただし、透明なアイコンが無料で取得するいくつかのテーマ設定機能を再実装する必要があります。 たとえば、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.スケール-400_別形式-カラフル_テーマ-ライト.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
  • LargeTile.scale-400_altform-colorful_theme-light.png

注

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 に発行するために必要です。

既定/濃色テーマ (必須)

  • 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
  • Last updated on