apple-touch-iconがiPhoneで反映されないときの対応

2017年02月06日

「apple-touch-icon」とは、iOS用に、ホーム画面にサイトが追加されたときに表示されるアイコンです。
iPhoneで、サイト閲覧時にメニューから「ホーム画面に追加」をしたときに表示されます。

設置方法としては、アイコン用の画像をアップロードし、ヘッダで

<link rel="apple-touch-icon" sizes="サイズxサイズ" href="https://サイトURL/apple-touch-icon.png" />

のように記述してからアップします。
画像名は「apple-touch-icon.png」としておくとヘッダに記述しなくても拾ってくれるらしいのでそうしておくのが一般的のようですが、必ずしも指定しないといけないわけではないようです。

このアイコンを設置されたときに、「正しく記述して画像もアップしたのにテストしてみると反映されていない」ということがあったので対応方法について書いておきます。

まずは画像サイズによっては反映されないこともあるようなので、画像サイズは適切かどうかを確認してみてください。
（※サイズは様々なサイズで可能なようですが、私が試してみた場合では144×144で反映されました）

以下の方法を試してみると良いと思います。

１・Safariのキャッシュを消去する

iPhoneのSafariに残っているキャッシュがクリアされていないと反映されなことがあるようです。
キャッシュの消去は「設定」→「Safari」→「履歴とWebサイトデータを消去」から消去できます。

２・画像名を変えて、パスの記述も変えてアップしてみる

この方法でも解決することがあります。
結局、キャッシュの問題なようですが、別名にした画像ファイルをアップしてみて、パスの記述を変更すると試してみると反映されていることがあります。