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のブログを見つけました。以下が関連する記事です。
- WebKit Features in Safari 17.2
- Web Push for Web Apps on iOS and iPadOS
- New WebKit Features in Safari 15.4
これらの記事から以下のようなことが読み取れました。
- macOSとiOSのSafari 15.4以降では、マニフェストファイルでアイコンを定義できるようになった
- ただし、マニフェストファイルで宣言したアイコンより
<head>
要素に書いたapple-touch-icon
が優先される - macOSでは、マニフェストファイルを使ってSVGか高解像度(1024px)のアイコンを提供すると最高の体験になる
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"
}]
}
テストの結果は以下のとおりです。
- iOS 15.8で表示される
- iOS 17.7で表示される
- iOS 18.0で表示される
- macOS Safari 18.0で表示される
- iPad OS 18.0で表示される
サイズやOSに応じてデザインを変えないならば、1024pxのアイコンをマニフェストファイルに定義するだけでいいかもしれないと感じました。
purpose
キーにmaskable
を指定してAndroidのChromeで検証したところ、セーフゾーンを侵食するケースがあり、思うような結果になりませんでした。とりあえずセーフゾーンを設けておいて、maskable
は見送りました。
しかし、ここで落とし穴がありました。<head>
要素でapple-touch-icon
を書かない場合、macOSとiOSの両方で、Safariのスタートページにある「お気に入り」でアイコンが表示されませんでした。したがって、マニフェストファイルだけではなく、apple-touch-icon
も書くことにしました。
Apple Developerにはおなじみの1024pxというサイズ。たくさんアイコンを用意するのは手間がかかるので、これで手を打ちたいです。