hysryt
commented
6 years ago ウェブクリップ用のウェブページアイコンの指定
ウェブクリップとはホームスクリーンに設置したWebページへのリンクのこと。 ウェブサイト全体に適用させたいアイコンはドキュメントルートにapple-touch-icon.pngで配置する。 特定のページに適用させたいアイコンはlink要素で画像ファイルを明示する。
<link rel="apple-touch-icon" href="/custom_icon.png">デバイスピクセル比に応じて画像ファイルのサイズを変更したい場合はlink要素を複数記述する。
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-retina.png">デバイスピクセル比に応じて最適なものが選択される。 現在の推奨アイコンサイズは以下の通り（ iOS Human Interface Guidelines の App Icon を参照）。
| デバイス | アイコンサイズ |
|---|---|
| iPhone | 180px × 180px (60pt × 60pt @ 3x) |
| 120px × 120px (60pt × 60pt @ 2x) | |
| iPad Pro | 167px × 167px (83.5pt × 83.5pt @ 2x) |
| iPad, iPad mini | 152px × 152px (76pt × 76pt @ 2x) |
iPhone のデバイスピクセル比は以下の通り（iOS Human Interface Guidelines の Image Size and Resolutionを参照）。
| デバイス | デバイスピクセル比 |
|---|---|
| iPhone XS Max | 3 |
| iPhone XS | 3 |
| iPhone XR | 2 |
| iPhone X | 3 |
| iPhone 8 Plus | 3 |
| iPhone 8 | 2 |
| iPhone 7 Plus | 3 |
| iPhone 7 | 2 |
| iPhone 6s Plus | 3 |
| iPhone 6s | 2 |
| iPhone SE | 2 |
推奨サイズと一致する画像がない場合はそれより大きいうちの最小のファイルが使用される。推奨サイズより大きいサイズがない場合は全てのアイコンのうち一番大きいサイズの画像が使用される。
link要素でアイコンが指定されていない場合はルートディレクトリのapple-touch-iconから始まるPNGファイルを使用する。
https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html