はじめに
こんにちは！株式会社ソニックムーブでフロントエンドを担当しています森です
今回、担当している案件でファビコン設定の依頼をいただきました
ファビコン・アイコン設定はこれまで複雑を極めてきましたが、以下の記事のように現在はたった5つの画像ファイルさえ用意できればすべての場合に対応できるようです！
意気揚々と作業に取り掛かったわけですが、なぜか「Apple Touch Icon のみが反映されない」事象が発生して妙に時間を消費してしまったので、備忘録として残しておきます
結論から言うと、Webアプリ全体にかけていたBasic認証が原因だったわけですが、解決までにいたった流れも紹介しようと思います
やったこと
ファビコン・各種アイコンの設定
各種アイコン画像を用意し、以下のように設定しました。
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
Google Chrome, IE に関してはこの設定で問題なく表示されました。
しかし、Safariに関してはファビコンは表示されるものの、Apple Touch Icon については反映されず、デフォルトのアイコンが表示されるばかりでした。
Apple Touch Iconとは？
iPhoneやiPadのホーム画面上にWebページへのリンクを追加したときに表示される、Apple製デバイス用の画像です。
原因の考察
上記の現象について不思議な点が一つあって、localhostでは問題なく表示されるというものでした。
したがって、当初は「ビルドプロセスになんらかの原因があるのでは？」と考え、以下のようにあらゆることを試してみたのですが、解決には至りませんでした。
- devtoolsで画像がちゃんと読み込まれているか検証
- Safariのキャッシュを削除・端末の再起動
- 検証用iPhoneの設定に問題がないか検証
- ビルドツールのドキュメントを読んで設定を変更
- 画像ファイルの命名や階層を変更 etc.
そして解決！
ユニットメンバーに相談したところ、Basic認証が原因ではないか？との意見をいただきました。
自分もこの記事は読んでいたのですが、認証突破した後も表示されなかったので関係ないと思っていました。しかし、試しにインフラ担当者にお願いしてBasic認証の対象から /apple-touch-icon.png のパスのみ外してもらうと、うまく表示されました！
得られた知見
- Basic認証をかけた Safari, iOS Safari のみで起こる現象
- 本番環境でBasic認証を外す予定のアプリでは問題なし
-
Apple Touch Iconの画像へのパスのみBasic認証の対象から外せば表示される
- ただしアイコン画像が完全にオープンになってしまうことを許容できるか確認が必要
- 許容できないなら、別の認証方法を導入するか、画像の読み込み方法を変更するしかないかも？
Discussion