UWPアプリのタイルアイコンを作るのは苦行。（Windows 11 対策）

ayamadori.hatenablog.com

最初に記事を書いたのは5年半前か。。。
来たるべき Windows 11 に備えてアイコンを作り直した。その中で確認できたことを覚え書き。
※まだプレビュー版なので今後変更の可能性あり

Windows 11 ではタイルまわりがかなり整理（というか削除？）されるので、作るアイコンの種類も減らせると思うんだけど、当面は Windows 10 との互換性を確保するために対応続ける必要がありそう。
とりあえずもう何年も更新されてないドキュメントを何とかしてくれ。。。

Match the look of the app tile logo and use your app's background color rather than making the icon transparent. Have the logo extend to the edge without padding it. Test your icons on white backgrounds.

前はよく分かってなかったところがちょっと分かった気がする。要は

アイコン内に白色（#FFFFFF）が多い*1と、パディング部の透過色が認識されず、白色扱いになる

ということのようだ。対策としては白色の代わりにちょっと色を付けてあげれば良い。少なくとも#FBFBFBではOKで、パディング部が正しく透過される。

スプラッシュスクリーン

blogs.windows.com スプラッシュスクリーンの背景がアクセントカラーからテーマに合った色に変わった。

Tailor your resources for language, scale, high contrast, and other qualifiers - UWP applications | Microsoft Docs

Compatibility behavior

For backwards compatibility, Windows includes logic to detect a monochromatic icons and check whether it contrasts with the intended background. If the icon fails to meet contrast requirements, Windows will look for a contrast-white version of the asset. If that’s not available, Windows will fall back to using the plated version of the asset.

おそらくこの辺りのことだと思うんだけど、

アイコンの色が薄いと、ライトテーマでもスプラッシュスクリーンの背景が自動的にダークテーマの色になる

アイコン色を濃くすれば正しくライトテーマの背景になるけど、そのしきい値というか定量的な判断基準は不明。
白単色のアイコンがライトテーマだと白黒反転するのは認識していたけど、これは知らなかった。

Visual Studio のマニフェストデザイナー

この機能がいつ追加されたか把握していないんだけど、[Windows ライトテーマの色変換を適用します]は正直役に立たない。

f:id:ayamadori:20210816161635p:plain

アイコンの白色部をライトテーマ用アイコンでのみ黒色に反転してくれるんだけど、微妙に白色が残ってしまって見た目が汚い。

アイコンデザイン

これは今も昔もガイドラインが無いので、たぶん今後も出てこないだろうな。。。
MS公式アプリのうち、おそらく唯一アイコンの SVG が公開されてる Windows Terminal を参考にした。
terminal/Terminal.svg at main · microsoft/terminal · GitHub

グラデーションはリニアで、11時の方向に明るくしていく。

<linearGradient id="" x1="" y1="" x2="" y2="" gradientUnits="userSpaceOnUse">
<stop stop-color="{狙いのRGB}"/>
<stop offset="1" stop-color="{狙いのRGB＋#1A1A1A}"/>
</linearGradient>