はてなブログのブログアイコンを設定する方法です。
ブラウザの上部や、はてなブログをスマホで開いた時の、ヘッダーに表示されます。
意外と多い、ブログアイコンが表示される箇所
ブログアイコンは、上記のほかに、お気に入りやショートカットに登録した時も表示されます。
- Webブラウザのアドレス表示欄や、タブ、お気に入り(ブックマーク)
- スマートフォンのホーム画面に作成したショートカットアイコン
- スマートフォンのはてなブログヘッダー
ブログアイコン画像の用意
ブログアイコンに設定する画像を用意します。
- 対応している画像形式:JPEG、PNG
- 推奨サイズ:192×192ピクセルより大きい正方形の画像
Canvaで作成しました。
「デザインを作成」でカスタムサイズを選択。400px×400pxにしてみました。
Canvaはフォーマットのサイズ指定がしやすいので、正方形の画像制作に便利です。
画像をブログアイコンに設定する
作成した画像を、はてなブログに設定します。
[設定]→[基本設定]に移動。
「ブログアイコン」で画像をアップロードして、ページ下部の「変更する」ボタンをクリックします。
スマホのヘッダーにも変更が反映される
上記でブログアイコンを設定すると、スマートフォンのヘッダーにもアイコンが表示されます。
[デザイン]→[スマートフォン]→ヘッダ「ブログアイコン」からも、設定可能。
(どちらかにアップロードすると、両方とも登録されます)
変更が反映されない時は「キャッシュクリア」
画像を何度か登録し直していると、変更したのに古い画像から変わらなくなることがあります。
そうなった場合は、ブラウザのキャッシュをクリアします。
Chromeの場合、ブラウザ上部の「:」をクリック→「その他のツール」→「閲覧履歴を消去」へ進みます。
表示された画面で、「キャッシュされた画像とファイル」にチェックが入っていることを確認し、「データを削除」を実行します。
以上で、ブログアイコンの作成と登録が完了です。