Real Favicon Generatorを使ってファビコンを設定した時にハマったこと

front-end

ファビコンって

守備範囲広くて面倒ですよね。 もはや当たり前ですが、ずーっと前はfavicon.icoを準備するだけでよかったのが、スマホの「ホーム画面に追加」に対応とか、Winの「ピン留め」に対応とかいろいろとしなきゃならないことが多いです。 なので大きい画像を準備するだけでサクッとマルチデバイス対応してくれるReal Favicon Generatorを使って生成・設定しました。

指南してくれるサイトに沿って記述してアップ。 順調にことは運び、あれよあれよとレビューも終わってステージング環境に反映され、便利ツールを作ってくださった方に一礼してタスク完了。 全然面倒じゃない。本当に助かります。

一つ目にハマったこと

本番環境に反映されたのでふと見るとコンソールエラーが出てました。ファビコンで…。ヒィ？え？なんで？

コンソールエラーの原因はsite.webmanifestでした。 上記ツールで生成した時に出力されるファイルの一つで、Chromeだとエラーが出ます。

ウェブアプリマニフェストは、ウェブアプリケーションについて、ウェブアプリをダウンロードしたり、ユーザーにネイティブアプリと同じように見せる（例えば、端末のホーム画面にインストールされ、ユーザーに素早いアクセスと豊かな操作性を提供するなどの）ために必要なの情報を JSON テキストファイルで提供します。 PWA のマニフェストには、その名前、作者、アイコン、バージョン、説明、および (他のものの中で特に) 必要なすべてのリソースのリストが含まれています。

https://developer.mozilla.org/ja/docs/Web/Manifest

解消するにはsite.webmanifestをリネームするとありましたので、その通りにリネームしました。

ここはsite.webmanifestの代わりにmanifest.jsonとしてもOKみたいなので、リネームしておきます。

https://zenn.dev/toshihide2000/articles/a41031f1003cf2

慌てて修正して、ローカルで確認。無事解消されてたので、するりとレビューしてもらってステージング環境に反映。

二つ目にハマったこと

やれやれと思ったのも束の間、またしてもコンソールエラー。もちろんファビコンで…。いや、もういいよ

今度はCROSで怒られました。原因は先ほどリネームしたファイルを読み込んでいるAndroid用のlinkタグでした。

資格情報を必要とするマニフェストを読み取るときは、同じオリジンからのファイル読み取りであっても use-credentials の値を使用する必要があります。

<link rel="manifest" href="/manifest.json" crossorigin="use-credentials">

ローカルでは確認できないので…は言い訳ですね。はい、確認不足です。

結局ヒューマンエラー

一つ目も二つ目も結局は実装者である私の確認漏れが原因でした。

サーバーに上がった時点で確認していれば無駄にバグを発生させることもなかったのに。そしてヒヤリとすることもなかったのに。

上記ジェネレーターを使ってファビコンを生成・設定される方は、ぜひこの2つも確認して実装されることをお勧めします。

参考