ファビコンは設定してるのにアンドロイドスマホで自分のブログを確認するとタイトルの横は以前のWordpress画像から変わらずのまま。そこで修正をして行きます。
先日設定したファビコンの記事はこちら。（第14話。ファビコンとは？その設定方法について！超簡単。）
まずGoogleで調べて見るとファビコンが表示されない時の対策が幾つか書いてありましたが、今回目を付けたのはキャッシュをクリアする記事。そしてPWAアイコン設定の記事。
PWAを設定するとスマホでホーム画面に追加したときのホームアイコンのように画像設置が出来るらしい。
ファビコン問題を検索していてPWA設定関連が出て来たのでこの設定はやって無いなと目を付けました。更にホームアイコンの様に自分のブログを設置したい気持ちもありとにかくPWA設定やってみます。
PWAアイコンの登録方法（THE THOR）
きたっしーのブログは“THE THOR”のテーマを使ってるので以下はTHE THORのやり方になります。
- 外観
- カスタマイズ
- PWA設定[THE]
- アイコンの設定
- 3種類それぞれのサイズ画像を全て登録
- 公開
下準備として3種類サイズ画像の用意とメディアにアップを先に済ませておく
3種類サイズ画像は“peko-step”と言うところからベース画像のサイズ変更を行いました。いちおう名前の所にサイトのリンク貼っておきましたが“画像 ピクセル 変換”などでGoogle検索すると他にも色々なサイトが出て来ると思います。
3種類のサイズ画像が出来たら全てWordpressのメディアにアップしましょう。後は上の手順に沿ってPWA設定するだけです。
キャッシュの削除
キャッシュは持ってるスマホや機種によってやり方が微妙に違うのでそれぞれの機種に合ったやり方でキャッシュ削除してみてください。
作業後に確認すると何とファビコンがキチンと表示されました！
PWAを設定するとホーム画面にアプリの様な感じでアイコン画像設置ができると書いてあったので、折角なのでホーム画面に設定してみます。
ファビコン画像をアンドロイドスマホのホーム画面に設定
これをしておくとアプリを立ち上げる感覚で自分のブログにワンクリックでジャンプ出来ます。勿論アイコンは先ほど設定した好みの画像がホーム画面トップに設置されます。
- Google Chromeを起動させアイコン設置したいサイトを検索して表示させる
- Google Chrome右上にあるメニューアイコンから“ホーム画面に追加”を選ぶ
- 名前を決めて追加をクリック
- “自動的に追加”若しくはアイコンを長押しでそのまま好きなところに配置
以上となります。