今回は、Bloggerでファビコンを設定する方法を紹介します。
また、合わせてファビコンが反映されない時にやるべきことも紹介します。
スポンサーリンク
そもそもファビコンとは？
ファビコンとは、「favorite icon」の略で、ブラウザでページを開いた時に、
ページタイトルの横に出たり、ブックマークに追加した時に出るアイコンです。
検索結果にも表示される、ブログの顔とも言えるようなものです。
ファビコンの設定方法
（事前に画像編集ソフトなどを用いてファビコン用の画像を作っておいてください）
ファビコンをアップロードする
Bloggerの管理画面を開いて、サイドバーから「設定」をクリックします。
設定を開いたら、一番最初に表示される「基本」の項目の一番下に「ファビコン」という
項目があるので、クリックします。
すると、こんな画面になるので、「ファイルを選択」をクリックし、ファビコンにしたいファイルを選択し、アップロードします。
（ページの注意書きにも書いていますが、100kb未満の正方形の画像である必要があります。）
アップロードしたら、「保存」をクリックして設定は完了です。
ページを開いて確認して見ましょう。
画像のように、ファビコンが設定されています。
ですが、このままではまだ問題があります。
この状態では、スマートフォンに対応できていません。
どういうことかというと、スマートフォンで「ページをホーム画面に追加」
した時に表示されるアイコンが、まだBloggerの標準アイコンのままなんです。
なので、今からスマホ用のファビコンを設定していきます。
スマホ用のファビコンを設定する
まずは、スマホ用の画像のリンクを取得します。
リンクさえ取得できれば方法はなんでもいいのですが、今回はBloggerで新しいページを作ってアップロードしました。
新しいページを作ってアップロードした場合は、コードがうじゃうじゃあって少し分かりづらいですが、この中から
src="画像のURL"
みたいなコードがあると思いますので見つけて、
""の中のURLだけコピーします。
HTMLにファビコンの記述を追加する
Bloggerの管理画面に戻り、サイドバーの「テーマ」をクリック。
「マイテーマ」の「カスタマイズ」の横にある ▼ みたいなマークをクリックし、
「HTMLを編集」をクリックします。
すると、HTMLの編集画面が開くので、下記のコードを <head> のすぐ下に追加します。
<link href="先程コピーしたURL" rel="apple-touch-icon-precomposed"/>
こんな感じです。
コードを追加できたら右上の「保存」マークをクリックして保存します。
これでスマホ用のファビコンの設定は完了です。
ファビコンが反映されない時は・・？
ファビコンを設定したのに、表示がされないことがたまにあります。
そういう時は、以下を試して見てください。
・ファビコンの再アップロード（PC用限定）
一旦アップロードしたファビコンを削除して、再アップロードするという方法です。
正直これは個人的におすすめできません。
アップロードし直すと、処理が一からやり直しになってしまうと思います。
それから、スマホ用のファビコンではこれは無意味です。
・Google サーチコンソールでページを再インデックスする
Googleにページを再度巡回させることで、反映させるという方法です。
おそらく一番効果あり
上の２つを試しても反映されない場合は、単なる時間の問題の可能性が高いです。
数日から数週間待てば反映されると思います。
今回のまとめ
今回はBloggerでブログのファビコンを設定する方法を紹介しました。
スマホのファビコンを設定するのにいちいちコードを追加しなければならないのが面倒でした。。
Bloggerさんには早くスマホ用のファビコンにも対応してもらいたいものです・・。
最後まで読んでいただきありがとうございました！