鬼簡単なfaviconの作成・設定方法
たかがfavicon、されどfavicon。
ちっちゃいアイコン置くだけだし余裕だろ！
と思っていたら意外とスムーズに行かなくて萎えました。
またfaviconで詰まったらイヤなので、faviconを鬼簡単に設定する方法を書いておきます。
まずはfaviconを作る
まず、フォトショやイラレで 512 x 512の画像を用意します。
サイズはなんでもいいですが、大きめで作った方がいいです。最低でも200 x 200は欲しいです。
複雑なアイコンは避け、シンプルでわかりやすいデザインにしましょう。
リサイズする
faviconは16x16,32x32,180x180,192x192のサイズをそれぞれ用意する必要があります。
自分でやるのもいいですが、鬼簡単をコンセプトにしているので、ここはジェネレーターを使ってサクッとやらせて頂きます。
Real Favicon Generatorを使います。
画像をアップロードし、プレビューを確認しながら背景色や余白を調整します。
背景色や余白を自由に調節できる
調整が完了したらfaviconをダウンロードします。
後はfaviconをサイトのルートディレクトリの直下に置き、生成されたコードをheadタグに貼り付けるだけです。
site.webmanifestをリネーム
上記ツールでfaviconを生成したときに出力されるファイルの一つにsite.webmanifestというものがありますが、site.webmanifestだとChromeでエラーが出てしまいます。
ここはsite.webmanifestの代わりにmanifest.jsonとしてもOKみたいなので、リネームしておきます。
ウェブアプリマニフェストは、ウェブアプリケーションについて、ウェブアプリをダウンロードしたり、ユーザーにネイティブアプリと同じように見せる（例えば、端末のホーム画面にインストールされ、ユーザーに素早いアクセスと豊かな操作性を提供するなどの）ために必要なの情報を JSON テキストファイルで提供します。 PWA のマニフェストには、その名前、作者、アイコン、バージョン、説明、および (他のものの中で特に) 必要なすべてのリソースのリストが含まれています。
https://developer.mozilla.org/ja/docs/Web/Manifest
ディレクトリごとにfaviconを変えたい時
manifest.jsonの中のパスを変え忘れがちなので注意
おわりに
なんだかんだ意外と大変なfavicon設定。
昔はfaviconを作るだけでもダルかったらしいのですが今時はReal Favicon Generatorなどの文明の利器があるので積極的に活用していきたいですね。
参考
https://sdesignlabo.com/web/favicon/
https://realfavicongenerator.net/
https://allabout.co.jp/gm/gc/23917/3/
https://www.creamu.co.jp/blog/web/2020/01/sitewebmanifest_manifestjson_favicon.html
https://developer.mozilla.org/ja/docs/Web/Manifest
Discussion