Apple Webサイトのタッチアイコン
これまで、Apple Touchアイコンの頭に次のような行を追加しました。
<link rel="Apple-touch-icon" href="/Apple-touch-icon.png">
ただし、 Q＆A "Apple-touch-iconの正しいピクセルサイズは？" に記載されていますAppleのガイドラインに従って、現在3つの画像が必要であるという受け入れられた答え。
では、これらをコードのヘッドセクションに挿入するにはどうすればよいでしょうか？
これが役立つことを願っています。
あなたが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" />
precompose画像を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デバイスは正しいサイズを探し、その画像を自動的に利用します。例の画像の名前からわかるように、網膜ディスプレイを搭載したiPadには144x144pxのアイコンが必要です。iPhone4/4S/5には元のiPad（およびiPad 2、画面の解像度に違いはありません）72x72pxのアイコンが必要で、元のiPhoneにはサイズの指定は必要ありませんが、参考のために57x57pxです。
最小限のソリューション-推奨
一般的な方法は、予想される最高の解像度である単一の180x180アイコンを作成し、iOSデバイスで必要に応じて縮小することです。以下で宣言されます：
<link rel="Apple-touch-icon" href="/path/to/Apple-touch-icon.png">
包括的なソリューション-Not推奨
Appleの仕様 iOS7の新しいサイズを指定：
- 60x60
- 76x76
- 120x120
- 152x152
- 180x180
さらに、事前構成されたアイコンは非推奨です。
その結果、新しいデバイス（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は、HTMLコードで興味深いものを見つけられない場合、/Apple-touch-icon-76x76.pngのようなURLを探すことに注意してください（IEが/favicon.icoで行っていることに似ています）。上記のファイル名を保持することが重要です。また、 Android/Chromeもこれらの画像を使用している であることを考慮することも重要です。
この favicon generator はこれらのすべての画像を一度に作成できることを知りたいかもしれません。完全な開示：私はこのサイトの著者です。
これらの回答のいくつかはすでに古くなっているため、 http://realfavicongenerator.net/ を使用してすべての画像とマークアップを生成することをお勧めします。 iOSで現在有効なもの、つまりAndroid＆Windows.
WebクリップのWebページアイコンの指定
ユーザーがWebアプリケーションまたはWebページリンクをホーム画面に追加できるようにすることができます。アイコンで表されるこれらのリンクは、Webクリップと呼ばれます。以下の簡単な手順に従って、iOS上の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になります。デバイスの推奨サイズに一致するアイコンがない場合、推奨サイズより大きい最小のアイコンが使用されます。推奨サイズよりも大きいアイコンがない場合は、最大のアイコンが使用されます。
リンク要素を使用してアイコンが指定されていない場合、Apple-touch-icon ...プレフィックスが付いたアイコンをWebサイトのルートディレクトリで検索します。たとえば、デバイスの適切なアイコンサイズが60 x 60の場合、システムは次の順序でファイル名を検索します。
Apple-touch-icon-76x76.png
Apple-touch-icon.png
ウェブページのアイコンの指標については、アイコンと画像のサイズをご覧ください。
注：iOS 7のSafariはアイコンに効果を追加しません。 Safariの古いバージョンでは、-precomposed.pngサフィックスが付いた名前のアイコンファイルに効果が追加されません。詳細については、「ファーストステップ：iTunes Connectでアプリを識別する」を参照してください。
ソース： Apple touchアイコンの仕様
2018年の時点で、 Apple Developers Webサイト は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">
ウェブサイトのタイトルはアプリのタイトルに置き換わります。通常、あなたはそれが欲しいでしょう。起動画像は、アプリの起動中に表示されるものです。
私はAppleの仕様を読んだことがありません、認めなければなりませんが、私のサイトのログによると、これらの画像はルートに必要です：
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">
