【iPhone】ウェブクリップアイコンが表示されない

Question

制作したサイトをスマートフォンでアプリのように表示させたく
ウェブクリップアイコンを制作しました。

![イメージ説明]WIDTH:600

出典：https://sin-space.com/html/332/

調べたところ、head内に以下を記載し、index.htmlと同じ階層にアイコン画像を設置すると
アイコンが表示されるとのことで実行してみましたが、iPhoneのみ表示されません。。
（ウェブクリップアイコンが表示されず、トップページの画像がアイコンのように表示されます）
Androidは表示されます。

<link rel="apple-touch-icon-precomposed" href="サイトのURL/webclip.png" />

「apple-touch-icon-precomposed.png」という画像名にしてサーバーにアップしておくと勝手に反映される

というのも実行してみたのですが、表示されませんでした。

iPhoneはiPhone 6 PlusとTouchで実行した結果です。
他に情報があまりなかったのでこちらで質問させていただきます。
わたしはこれでできた！などご経験がある方がいらっしゃいましたらぜひ教えていただければ幸いです。

Answer 1

こんにちは。

公式ドキュメント iOS Developer Library（リンク）には、Web Clipについて下記のとおりの記述があります。

To specify an icon for the entire website (every page on the website), place an icon file in PNG format in the root document folder called apple-touch-icon.png
（Webサイト全体（Webサイト上のすべてのページ）のアイコンを指定するには、apple-touch-icon.png と命名したPNG形式のアイコンファイルをルートディレクトリに配置してください）

つまり、ルートディレクトリに apple-touch-icon.png を置いておけばいいということです。

厳密に iPhone、iPhone Retina、iPad、iPad Retina それぞれに対応させたい場合は、複数のサイズ（リンク）のアイコンをルートディレクトリに配置したうえで、HTMLに

<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">

と記述します。

ただし、公式ドキュメントには

If there is no icon that matches the recommended size for the device, the smallest icon larger than the recommended size is used. If there are no icons larger than the recommended size, the largest icon is used.
（デバイスの推奨サイズに一致するアイコンがない場合は、推奨サイズよりも大きな最小サイズのアイコンが使用されます。それがアイコンがない場合は、最大のアイコンが使用されます。※一部意訳）

とありますので、152x152（6 plusを考慮した場合は 180x180）のアイコンだけを作成し、
apple-touch-icon.png というファイル名でルートディレクトリに配置しておけばいいことになります。

今回の回答でリンクさせていただいた公式ドキュメントには開発の際に遭遇する問題を解決へと導く多くのことが書かれています。お時間があるときにでも、全文をご一読いただければと思います。

以上、ご参考いただければ幸いです。

Comments

[Don]

ご親切にご回答頂きましてありがとうございます。
大変参考になります。

こちらを拝見し、ルートディレクトリに
「apple-touch-icon.png」というファイル名で配置したのですが
やはりiPhoneホーム画面にはアイコンが表示されませんでした。。

何かやり方がいけないのかもしれません。。
少し時間がある際にお教えいただきました公式ドキュメントを確認してみたいと思います。
ありがとうございました。

[退会済みユーザー]

Donさん、コメント（返信）をいただきありがとうございます。
そうですか。上記が公式ドキュメントによる設置方法ですので、なにが原因なのかわかりませんね。

念のため確認させていただきますが、iPhoneでの操作ですが、Safariでサイトを開き、下部中央の共有ボタンを押して「ホーム画面に追加」を選択していますでしょうか。

なお、試してみる方法としては、
アイコンの名前を「webclip.png」などとしてルートディレクトリに配置し、
HTMLに
<link rel="apple-touch-icon" href="http://サイトのURL/webclip.png" />
と記述するといったこともあるのですが……

[退会済みユーザー]

追記
iOS 7 以降の Safariでは、「-precomposed」つきのファイルは扱わなくなったようですのでご注意ください。

[Don]

GeorgeCohta様
ご返信ありがとうございます。

お教え頂いたものも全て実施しているのですが、iPhoneのみ表示されません。。（泣）
Androidは表示されます。
まだiPhone 6 Plusでしか試せていないのですが、他の環境でも確認してみたいと思います。
ありがとうございました。

[Don]

GeorgeCohta様
こちらお教え頂いた方法で時間を置いて確認したところ解決いたしました！
ありがとうございました。

apple-touch-icon.pngと命名したアイコンファイルをルートディレクトリに設置し、
かつ、webclip.pngと命名したファイルもルートディレクトリに設置＆<link rel="apple-touch-icon" href="http://サイトのURL/webclip.png" />を記述しかなり時間をおいて確認したところ表示がされていました。

[退会済みユーザー]

Donさん、コメントをいただきありがとうございます。
無事に解決できてよかったです。