Android用のファビコンが設定されない？
Favicon checker というファビコンについて正しく設定されているかをチェックするサービスがあります。本サイトをチェックしてみたところ、赤い表示がたくさん出たわけですが、なかでも見過ごせない表示がありました。Android Chrome で There is no icon for Android Chrome とのことです。これはなんとかせねばならないという備忘録の記事です。
ファビコンの設定について
WordPressでのファビコンは初期では カスタマイズ > サイト基本情報 > サイトアイコン より設定すればいいのですが、本サイトではAndroid Chrome用のファビコンは提供されませんでした。これは使っているWordPressテーマにも左右されるかもしれません。
原因ですがどうやら Android 端末の Chrome では site.manifest というファイルを参照してファビコンの情報を取得するようです。そのファイルがデフォルトでは存在しておらず、自分で記載して設定する必要があるとのことでした。ということで、早速対応を実施しました。
対応したこと
site.webmanifest を作成する
まずsite.webmanifest というファイルを作成しました。どのように作成すればいいかですが、 Favicon Generator というサイトで画像ファイルをアップロードすると自動で以下のファイルを作成してくれたため、それを利用することにしました。
site.webmanifestをWordPress の ルートディレクトリに配置する
作成したファイルをルートディレクトリに設置しました。ルートディレクトリでなくてもよいのかもしれませんが、Favicon Generator のインストール手順書に「Extract this package in the root of your web site. 」という記載があったため、今回はルートディレクトリに配置しました。
Extract this package in the root of your web site. If your site is http://www.example.com, you should be able to access a file named http://www.example.com/favicon.ico.HTML の head タグに manifest ファイルの指定先を記載する
最後に link タグに存在を知らせるためのコードを head タグ内に書いて、これで無事に緑色になりました。
さいごに
その他にも Windows 8 and 10 や Mac OS X El Capitan Safari などのファビコンにも特殊な設定が必要だったのですが、ルートディレクトリが汚れることを嫌って、自分は対応していません。致命的であれば対応しようと考えていますが、いまのところはこれで十分と判断しています。
今回は以上です。ファビコンは重要なので一度はチェックしておきましょう。それでは次の記事でお会いしましょう👋