こんにちは！Office163スタッフのあべちゃんです！
「あべの成長記」は、私が日々の業務の中でぶつかる壁を共有することで皆さんのお役に立てればという思いで執筆しています。
「こんなことに○時間もつかってしまった…」「こんな便利な方法があったのか！」そんなことばかりの「ひよっこデザイナー」「ひよっこコーダー」「ひよっこウェブ製作者」のみなさま、共に頑張りましょう！！

今回は、このオウンドサイトを作成中に私がぶつかった「設定したファビコンがSafariとiOSで表示されない原因がBASIC認証にあった」という経験の共有をしたいと思います。
まだBASIC認証をかけたサイトのファビコン確認をしたことがない人のお役に立てたら嬉しいです。

前提として

・BASIC認証をかけてテストサイトを作成中
・ファビコン設定で使用したコードは以下（ルートは省略）
　<link rel=”icon” href=””>
　<link rel=”apple-touch-icon” href=”” sizes=”180×180″>
・アイコンの場所　img/favicon/○○.png

Safariでファビコンが表示されない

ファビコンをheadに設定し、ブラウザ確認を行なっていた私。
「Chromeおっけー！Firefoxおっけー！Safari…Safariに設定できてない！？」

そう、MacのSafari、iOSのSafariとChromeにてファビコンが表示されなかったのです。
ここから私の迷走は始まります。

迷走のはじまり

ここからはとりあえず虱潰しに調べます。
・ファビコン用コードを最低限の記述で表示を確認してみよう！→でない
・ファイルの階層が深すぎた？階層を上げてみよう！→でない
・Safariのバージョンが古いのかしら？→でない
・PC再起動でどうだ！→でない

過去のコードひっぱってきみたり、むしろファビコンの設定コード増やしてみたり、試行錯誤するも表示されません。
でない、でない、でない。
なんでSafariとiOSだけ！？どうして！？

まさか、BASIC認証が影響してる？

様々な対応をしていく中でふと「BASIC認証」の影響ってないのだろうかと思いつく。
本当にふと。遅い。遅いよ。
そして「BASIC認証　ファビコン」で調べると、でました、「表示されないことがある」という記事が！
有力候補を見つけるとテンションがあがりますね！

しかし、そこで狼狽るのがひよっこです。
「BASIC認証が原因であるという確認はどうしたらいいのだろう？」と思いますよね。
ここで初心者さんに共有したいポイントです！

こちらはボスからのアドバイスです！
BASIC認証範囲外の箇所にHTMLをアップして、確認する、という手法です。

「test_favicon」内のindex.htmlに記述する内容は本当に最低限のHTMLとファビコンのコードのみで大丈夫です。
この画像はあくまで例なのでimgの中にfavicon.icoのみ入ってますが、使用しているコードの動きを確認したいので階層やその他の画像などはご自分のコードに合わせてくださいね。（faviconフォルダやapple-touch-icon等）

さて、このような最低限のHTMLファイルでファビコンを確認してみると…Safariでもファビコンが表示されました！！
これで問題があったのは「BASIC認証」だと結論づけることができました。

私のコードが悪いわけではなかったという喜び。
もっと早くにBASIC認証に気が付けなかったのかという悲しみ。
共に乗り越えていきましょう。

今回の学び

それでは今回のまとめです。

BASIC認証を、ではないです。BASIC認証も、ですよ！！
何が原因かはきっとそれぞれ理由がありますからね。
でも「想定できる選択肢の幅」を増やすことで、きっとエラー対応とか早くなっていくはず。
地道に経験値を増やしていきましょう。

あべの成長記では、このように「きっとみんなもぶつかるよね！？」という事柄を共有していきたいと思います。
一緒に成長しましょうー！