これまで、私は次のようにAppleTouchアイコンの行を頭の中に含めてきました。
<link rel="apple-touch-icon" href="https://stackoverflow.com/apple-touch-icon.png">
ただし、Q＆Aの「アップルタッチアイコンの正しいピクセル寸法は何ですか？」受け入れられた回答には、Appleのガイドラインに従って3つの画像が必要であると記載されています。
では、これらをコードのヘッドセクションに挿入するにはどうすればよいでしょうか。
回答:
ミニマリストソリューション-推奨
一般的な方法は、予想される最高の解像度である単一の180x180アイコンを作成し、iOSデバイスに必要に応じて縮小させることです。それは次のように宣言されます：
<link rel="apple-touch-icon" href="/path/to/apple-touch-icon.png">
徹底的な解決策-推奨されません
Appleの仕様では、iOS7の新しいサイズが指定されています。
さらに、合成済みアイコンは非推奨になりました。
結果として、新しいデバイス（iOS7を実行）と古いデバイス（iOS6以前）の両方をサポートするための一般的なコードは次のとおりです。
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
さらに、apple-touch-icon.pngという名前の180x180の画像を作成する必要があります。
iOSは/apple-touch-icon-76x76.png、HTMLコードで興味深いものが見つからない場合、のようなURLを探すことに注意してください（IEが行っていることと少し似ています/favicon.ico）。したがって、ファイル名を上に置いておくことが重要です。Android / Chromeもこれらの画像を使用していることを考慮することも重要です。
このファビコンジェネレータがこれらすべての画像を一度に作成できることを知りたいと思うかもしれません。完全開示：私はこのサイトの作者です。
<link rel="apple-touch-icon" href="https://stackoverflow.com/apple-touch-icon.png" type="image/png" />いるだけで十分です。また、異なるサイズの写真を作成した場合でも、私が知る限り、すべてのapple-touch-iconリンクを削除するだけで、iOSは適切なサイズ（apple-touch-icon-180x180など）からファイル自体を検索します。 png）、他のファイルが見つからない場合はapple-touch-icon.pngを使用します。
apple-touch-icon）に関する情報がない場合は、ルートディレクトリで特定のサイズを探します。
どうぞ、これがお役に立てば幸いです。
Appleにあなたのために美的ビットを実行させたい（光沢を追加する）場合は、これらを<head>タグに追加します。
<link rel="apple-touch-icon" href="apple-touch-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-iphone4.png" />
<link rel="apple-touch-icon" sizes="144x144" href="apple-touch-ipad-retina.png" />
Appleが光沢なしで画像を表示するように画像を事前に構成したい場合は、次のようにします。
<link rel="apple-touch-icon-precomposed" href="apple-touch-iphone.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-ipad.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-iphone4.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-ipad-retina.png" />
複数の画像を含めると、iOSデバイスは正しいサイズを探し、その画像を自動的に利用します。例の画像の名前からわかるように、Retinaディスプレイを搭載したiPadには144x144pxのアイコンが必要であり、iPhone 4 / 4S / 5には114x114pxのアイコンが必要です。元のiPad（およびiPad 2は、画面の解像度も同じです）72x72pxのアイコンが必要で、元のiPhoneにはサイズ指定は必要ありませんが、参考までに57x57pxです。
これらの回答のいくつかはすでに古くなっているので、http：//realfavicongenerator.net/を使用してすべての画像とマークアップを生成することをお勧めします-それが維持できることを期待して、使用するたびに数ユーロを寄付しますiOS、Android、Windowsで現在有効なものについては最新なので、そうする必要はありません。
2018年の時点で、Apple DevelopersWebサイトはiOSデバイスに対して以下を推奨しています。
<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">
<link rel="apple-touch-startup-image" href="/launch.png">
<meta name="apple-mobile-web-app-title" content="AppTitle">
アプリのタイトルがウェブサイトのタイトルに置き換わります。通常、あなたはそれが欲しいでしょう。スタートアップ画像は、アプリの起動中に表示されるものです。
WebクリップのWebページアイコンの指定
ユーザーがWebアプリケーションまたはWebページのリンクをホーム画面に追加できるようにすることができます。アイコンで表されるこれらのリンクは、Webクリップと呼ばれます。次の簡単な手順に従って、iOS上のWebアプリケーションまたはWebページを表すアイコンを指定します。
Webサイト全体（Webサイトのすべてのページ）のアイコンを指定するには、apple-touch-icon.pngというルートドキュメントフォルダーにPNG形式のアイコンファイルを配置します。
単一のWebページのアイコンを指定するか、WebサイトのアイコンをWebページ固有のアイコンに置き換えるには、次のようにWebページにリンク要素を追加します。
<link rel="apple-touch-icon" href="/custom_icon.png">
上記の例では、custom_icon.pngをアイコンのファイル名に置き換えます。異なるデバイス解像度に複数のアイコンを指定するには（たとえば、iPhoneデバイスとiPadデバイスの両方をサポートする）、次のように各リンク要素にサイズ属性を追加します。
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
デバイスに最適なサイズのアイコンが使用されます。サイズ属性が設定されていない場合、要素のサイズはデフォルトで60 x 60になります。デバイスの推奨サイズに一致するアイコンがない場合は、推奨サイズよりも大きい最小のアイコンが使用されます。推奨サイズよりも大きいアイコンがない場合は、最大のアイコンが使用されます。
link要素を使用してアイコンが指定されていない場合、Webサイトのルートディレクトリで、プレフィックスがapple-touch-icon ...のアイコンが検索されます。たとえば、デバイスの適切なアイコンサイズが60 x 60の場合、システムは次の順序でファイル名を検索します。
apple-touch-icon-76x76.png
apple-touch-icon.png
ウェブページのアイコンの指標については、アイコンと画像のサイズをご覧ください。
注：iOS 7のSafariは、アイコンに効果を追加しません。古いバージョンのSafariは、-precomposed.pngサフィックスが付いた名前のアイコンファイルにエフェクトを追加しません。詳細については、「最初のステップ：iTunesConnectでのアプリの識別」を参照してください。
私はアップルの仕様を読んだことがないので、認めなければなりませんが、私のサイトのログによると、これらの画像はルートに必要です：
apple-touch-icon-72x72.png
apple-touch-icon-76x76.png
apple-touch-icon-120x120.png
apple-touch-icon-152x152.png
apple-touch-icon-72x72-precomposed.png
apple-touch-icon-76x76-precomposed.png
apple-touch-icon-120x120-precomposed.png
apple-touch-icon-152x152-precomposed.png
私のプルリクエストからhttps://github.com/h5bp/mobile-boilerplate（iPhone 6アイコン付き）へ：
<!-- iPad and iPad mini (with @2× display) iOS ≥ 8 -->
<link rel="apple-touch-icon-precomposed" sizes="180x180" href="img/touch/apple-touch-icon-180x180-precomposed.png">
<!-- iPad 3+ (with @2× display) iOS ≥ 7 -->
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="img/touch/apple-touch-icon-152x152-precomposed.png">
<!-- iPad (with @2× display) iOS ≤ 6 -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/touch/apple-touch-icon-144x144-precomposed.png">
<!-- iPhone (with @2× and @3 display) iOS ≥ 7 -->
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="img/touch/apple-touch-icon-120x120-precomposed.png">
<!-- iPhone (with @2× display) iOS ≤ 6 -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/touch/apple-touch-icon-114x114-precomposed.png">
<!-- iPad mini and the first- and second-generation iPad (@1× display) on iOS ≥ 7 -->
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="img/touch/apple-touch-icon-76x76-precomposed.png">
<!-- iPad mini and the first- and second-generation iPad (@1× display) on iOS ≤ 6 -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/touch/apple-touch-icon-72x72-precomposed.png">
<!-- Android Stock Browser and non-Retina iPhone and iPod Touch -->
<link rel="apple-touch-icon-precomposed" href="img/touch/apple-touch-icon-57x57-precomposed.png">
<!-- Fallback for everything else -->
<link rel="shortcut icon" href="img/touch/apple-touch-icon.png">
<!--
Chrome 31+ has home screen icon 192×192 (the recommended size for multiple resolutions).
If it’s not defined on that size it will take 128×128.
-->
<link rel="icon" sizes="192x192" href="img/touch/touch-icon-192x192.png">
<link rel="icon" sizes="128x128" href="img/touch/touch-icon-128x128.png">
<!-- Tile icon for Win8 (144x144 + tile color) -->
<meta name="msapplication-TileImage" content="img/touch/apple-touch-icon-144x144-precomposed.png">
<meta name="msapplication-TileColor" content="#222222">
<link>クライアントのキャッシュにない場合、各タグのすべてのファイルがダウンロードされますか？ページが要求されている場所（電話、タブレット、PC、Windows、Android ...）に関係なく？私は、パフォーマンスへの影響を懸念ビット...だ