この記事では「はてなブログ」のブログアイコン、ファビコン（favicon）を変更する方法を解説します。
ブログアイコン（ファビコン）の画像を変えてみたけれど、検索結果のファビコンが変わらない、表示されない、反映しない…という人も読んで試してみてください。ファビコンの指定方法が正しくないのかもしれません。
ファビコンの指定方法が正しければ、Googleなどの検索結果に表示されるファビコン（favicon）の画像イメージは下図のように変化します。
ブログを立ち上げたばかりの時（画像未設定）、検索結果に表示されるファビコンは地球のイメージのアイコンが表示されます。
地球イメージのファビコンのサイトは（素人っぽいので）検索結果に表示されてもクリックされにくいため、ブログアイコンに新しい画像を設定しましょう。
（設定済みの画像がある場合はそのファビコンが表示されます）
検索結果に表示されるファビコンが、ブログアイコン（ファビコン）に使うことを指定した画像に置き換わります。
多くの人はアイコン画像が表示されているサイトの方が情報の信頼性が高いと感じます。（読まれやすい）
画像変更時、画像が置き換わる（書き換わる）まで、少し時間がかかります
ファビコンの変更が反映されない場合の原因と対処方法も解説しています。
一緒にブログアイコン（ファビコン）の正しい設定方法を、詳しく確認していきましょう。
- はてなブログのブログアイコン、ファビコンの表示画像を変える方法
- ブログアイコン（ファビコン）の作成方法
- ファビコンを設定したのに画像が変わらない場合に試すこと
- まとめ｜ファビコンの変更方法と変わらないときの対処方法
はてなブログのブログアイコン、ファビコンの表示画像を変える方法
はてなブログのブログアイコン（ファビコン）の画像を変更、設定する方法を図解します。
まず、大きな流れを把握した上で細かい調整を行えるよう、次の順で確認していきます。
- ファビコンをはてなブログに設定（変更）するやり方を確認
- ファビコンの画像に使えるファイル形式を確認
- 実際にファビコンに使う画像を作って設定する
ではまず、ファビコンの設定（変更）方法です。
ブログアイコン、ファビコンの変更方法（設定の手順）
はてなブログのファビコンを変更するには、以下の手順で行います。
❶ダッシュボード（管理画面）＞❷設定＞❸基本設定＞❹ブログアイコン＞❺保存する
上記の図解の「❹ブログアイコン」で指定（選択）した画像が、ブラウザや検索結果に表示されるファビコンとして利用されます。
なお、すでに表示されているアイコンを別の画像を変更する場合は、上記❹で「画像を削除する」にチェックし、「❺保存する」をクリックしてブログアイコンが削除されたあと、再度❶〜❹に進んで新しい画像を選択してください。
ブログアイコン（ファビコン）に指定できるファイルの種類
はてなブログで、ブログアイコン（ファビコン）に対応している画像ファイルの形式は、JPEGとPNGの2種類だけです。
はてなブログのブログアイコンは「ico」形式のファイルには未対応なので注意です。
ファビコンの無料作成サイト（自動作成サイト）でアイコンを作成する場合は、jpegかpngファイルで出力できるサイトを選びましょう。
ブログアイコン（ファビコン）の作成方法
では実際にブログアイコン（ファビコン）を設定・変更してみましょう。
ファビコンの「おすすめの設定」とアイコンを手軽に作成する方法をご紹介します。
ブログアイコン（ファビコン）のおすすめ設定（ガイドライン）
はてなブログの「ブログアイコン」のおすすめの設定は、次のとおり。
- ごちゃごちゃした画像ではなく、シンプルな画像を選ぶ
- 192ピクセル×192ピクセル以上で48の倍数の大きさにする
- 画像のファイル形式はJPEGまたはPNGにする
1の理由は簡単。ブログアイコンはブログの顔になるから。わかりやすく認知される画像を選んだ方が、あなたのブログに有利です。
また次の２つの理由から、2の画像の大きさは192×192px以上にしましょう。ちなみに当ブログのブログアイコンの大きさは192×192pxです。
- はてなブログ ヘルプで 公式に、192×192pxより大きい正方形の画像を推奨していること。
- Googleの ガイドライン で、検索結果に表示されるファビコン用の画像の大きさを48×48pxの倍数にすることがに定められているため。
指定できる画像のファイル形式（拡張子）は先に確認したとおり、.jpg や .png にします。
ブログアイコンの作成
ブログアイコンの作成は、上記のガイドラインに沿うように、自分で画像を作成したり、フリー画像を切り貼りして作成することが可能です。
ですが、もっと簡単に作るなら、無料で使えるファビコン作成サイトを利用してもOK。
例えば、Canva、icooon-mono、icons8 などでファビコンを作成できます。利用条件は各サイトのライセンス条項を確認ください。
作成したアイコン画像は、画像ファイルの形式をjpegかpng形式にして保存しましょう。
ファビコンを設定したのに画像が変わらない場合に試すこと
作成したアイコン画像を使って「ブログアイコン、ファビコンの変更方法（設定の手順）」でブログアイコン（ファビコン）を設定できましたか？
ファビコンが表示される部分は、おもにブラウザと、検索結果画面の２箇所。表示画面を確認してみてください。
＜favicon 1＞
ブラウザのタブに表示されるファビコンのイメージは下図のとおり。
＜favicon 2＞
検索結果のファビコンの表示イメージは下図のとおり。
２箇所とも、指定したブログアイコンが表示されていますか？
ファビコンが変わらない（反映しない）時に確認すること①
ブラウザのタブのファビコンは通常はすぐに変わります。
ファビコンを設定（変更）したのにアイコン表示が変わらない場合、次のことを試してください。
- ファビコンの画像ファイルの形式を確認。
192×192px以上の正方形のJPEGかPNGファイルを設定していますか？ - 利用しているブラウザの古いキャッシュの削除。
ブラウザごとのキャッシュの削除方法は次のリンク先の資料（Chromeのキャッシュと Cookie の消去、iOSの Safari からキャッシュ、Cookie を消去する）を確認してください。 - はてなブログのheadに次のコードを追記・設定する。（おまじない）
❶ダッシュボード（管理画面）＞❷設定＞❸詳細設定＞❹「<head>要素にメタデータを追加」に次のコードを追加＞❺保存する
<link rel="icon" type="image/png" href="画像のアドレス"> 詳しい手続きを確認する
- 画像アドレスを確認してコードを完成
ブログアイコンの画像をはてなフォトライフにアップロードし、画像アドレスをコピーしてHTMLコードの画像アドレスの部分に貼り付け、コードを完成させる
アイコン画像をフォトライフに登録しておく - HTMLコードをheadに貼り付ける
❶ダッシュボード（管理画面）＞❷設定＞❸詳細設定＞❹「<head>要素にメタデータを追加」の最下行に上で確認・作成したHTMLコードを追記＞❺保存する
ファビコンが変わらない（反映しない）時に確認すること②
「ファビコンが変わらない（反映しない）時に確認すること①」を行ったらブラウザのタブのファビコンは変わるはずです。ですが、Google検索結果に表示されるブログのファビコンはすぐには変わりません。
Googleサーチコンソールを使って、Googleにファビコンを変えたことを知らせましょう。
はてなブログの記事のURLをインデックス登録する方法の記事を参照し、ブログのトップページのURLを検査し「インデックス登録をリクエスト」してください。
ここまでしておけばあとはGoogleに画像が登録されるのを待つだけです。
数日から数週間で検索結果に表示されるファビコンが変わりますよ！
まとめ｜ファビコンの変更方法と変わらないときの対処方法
ということで、ブログのイメージに合うブログアイコン（ファビコン）を設定しましょう。そして、この記事の対策をしておけば、検索結果に表示されるファビコンも変わります。
反映しなかったり、表示画像が変わらない場合は、「ファビコンが変わらない時に確認すること」で解説した内容を試してください。
なお、headに記入したHTMLコードは、検索結果にファビコンが表示されるようになったら外して（削除して）OKです。
