・apple-touch-iconを設定したのに表示されないんだけど？
こんな疑問にお答えします。
headタグにapple-touch-iconnの設定記述をしたのに、iPhoneでみたら表示されないという事態になったことありませんか？
僕は実際あります(笑)
ただ何かしらの問題解決をすれば対処可能です。
ということで、この記事では「apple-touch-iconが表示されない時の対処法」について解説していきます！
・apple-touch-iconが表示されない時の対処法
目次
iPhoneでファビコンが表示されない？【大前提として】
まず対処法をお伝えする前に、大前提として「apple-touch-icon」のコード記述などがあっているかどうかご確認ください。
こちらの記事で詳しく解説しております。
【favicon】スマホのファビコン設定方法【IOS（iPhone）・Android】 【解決】iPhoneでファビコンが表示されない？【apple-touch-icon】
iPhoneでファビコンが表示されない時に、試してほしい対処法がこちら
- 画像の名称を変更
- ベーシック認証が原因
- Safariのキャッシュを削除
順にみていきましょう、
まずpng画像の名称は「apple-touch-icon.png」で設定しましょう。これは念のために。
下記コードのように。
<link rel="apple-touch-icon" href="./img/apple-touch-icon.png" sizes="180x180">そして念のためサイズは180×180で。
180pxのサイズがベストらしいです
次は対処ではないですが、ベーシック認証をかけているかどうかが原因ということ。
実はベーシック認証をかけていると、ファビコンが表示されないんだそう。
事実僕も、ベーシック認証を解除してみてみると、すぐにファビコンが表示されたということがあります。。この仕様をしらずに、沼にはまった時間をかける人は多そう。。
最後の対処方は、Safariのキャッシュを削除することです。
iPhone側にSafariのキャッシュが残ってしまい、過去のファビコン設定がそのまま反映されてしまう。もしくは設定の反映がされていない場合があります。
そのため「apple-touch-icon.png」画像のファビコンが表示されない場合は、iPhoneのSafariのキャッシュを削除してから見てみましょう。
これでキャッシュを削除することができます。
ただ全てのサイトデータを削除するので、その点はご自身で判断して行ってください。
【解決】iPhoneでファビコンが表示されない？【apple-touch-icon】：まとめ
- 対処①：画像の名称は「apple-touch-icon.png」で設定
- 対処②：ベーシック認証をかけてないサイトで試す
- 対処③：iPhoneのSafariのキャッシュを削除
apple-touch-iconが表示されない時は、これらの対処方を試してみよう！
