apple-touch-iconのサイズを1024pxにしてみる

このウェブサイトのapple-touch-iconのサイズを180×180pxから1024×1024pxに変えてみることにしました。

2016年12月に更新されたらしい、今ではアーカイブされたAppleのドキュメントによると「ホーム画面で表示されるアイコンのサイズはAppleのヒューマンインタフェースガイドラインを参照してください」とのことです。iOSおよびiPadOSでの最大サイズは180pxのようです。

ところで、macOSのSafariではDockにウェブサイトを追加でき、Launchpadにもアイコンが表示されます。このとき、/Users/user/Applicationsに.appファイルが作成されます。Finderでギャラリー表示にすると、自分の環境では約414px（Retinaでは828px相当）のサイズでアイコンが表示されます。Launchpadでは約104px（Retinaでは208px相当）で表示されます。

apple-touch-iconのサイズはmacOSを考慮してもいいかもしれないと思いました。アーカイブされたドキュメントではなく、生きているドキュメントはないか探してみたところ、Webkitのブログを見つけました。以下が関連する記事です。

これらの記事から以下のようなことが読み取れました。

Can I useを見ると、iOSのSafari 15.4以降でマニフェストファイルのiconsがサポートされているようです。

Safari 17.2に関する記事ではSVGアイコンの対応に触れていましたが、macOSのSafari 18.0では現時点で表示されませんでした。SVG対応については、ファビコンと合わせて首をながくして待つことにします。

つぎに、<head>要素でapple-touch-iconを書かずに、以下のマニフェストファイルを使って、ホーム画面にアイコンが表示されるかテストしてみました。

{
	"icons": [{
		"src": "/appicon-1024.png",
		"sizes": "1024x1024"
	}]
}

テストの結果は以下のとおりです。

サイズやOSに応じてデザインを変えないならば、1024pxのアイコンをマニフェストファイルに定義するだけでいいかもしれないと感じました。

purposeキーにmaskableを指定してAndroidのChromeで検証したところ、セーフゾーンを侵食するケースがあり、思うような結果になりませんでした。とりあえずセーフゾーンを設けておいて、maskableは見送りました。

しかし、ここで落とし穴がありました。<head>要素でapple-touch-iconを書かない場合、macOSとiOSの両方で、Safariのスタートページにある「お気に入り」でアイコンが表示されませんでした。したがって、マニフェストファイルだけではなく、apple-touch-iconも書くことにしました。

Apple Developerにはおなじみの1024pxというサイズ。たくさんアイコンを用意するのは手間がかかるので、これで手を打ちたいです。