はてブのぶ

はてブ大好きの覚え書き

はてなブログ|ブラウザの小さいマーク(ブログアイコン)を設定しよう

はてなブログのブログアイコンを設定する方法です。

はてなブログのブログアイコンを作成する

ブラウザの上部や、はてなブログをスマホで開いた時の、ヘッダーに表示されます。

はてなブログスマホのブログアイコン

 

意外と多い、ブログアイコンが表示される箇所

スマートフォンのホーム画面アイコン

ブログアイコンは、上記のほかに、お気に入りやショートカットに登録した時も表示されます。

  • Webブラウザのアドレス表示欄や、タブ、お気に入り(ブックマーク)
  • スマートフォンのホーム画面に作成したショートカットアイコン
  • スマートフォンのはてなブログヘッダー

ブログアイコン(favicon)について(はてなブログ)

 

ブログアイコン画像の用意

ブログアイコンに設定する画像を用意します。

  • 対応している画像形式:JPEG、PNG
  • 推奨サイズ:192×192ピクセルより大きい正方形の画像

ブログアイコンを作成する

Canvaで作成しました。
「デザインを作成」でカスタムサイズを選択。400px×400pxにしてみました。

Canvaはフォーマットのサイズ指定がしやすいので、正方形の画像制作に便利です。

 

画像をブログアイコンに設定する

作成した画像を、はてなブログに設定します。

[設定]→[基本設定]に移動。

「ブログアイコン」で画像をアップロードして、ページ下部の「変更する」ボタンをクリックします。

はてなブログにブログアイコンを設定

スマホのヘッダーにも変更が反映される

上記でブログアイコンを設定すると、スマートフォンのヘッダーにもアイコンが表示されます。

[デザイン]→[スマートフォン]→ヘッダ「ブログアイコン」からも、設定可能。

(どちらかにアップロードすると、両方とも登録されます)

ブログアイコン

 

変更が反映されない時は「キャッシュクリア」

画像を何度か登録し直していると、変更したのに古い画像から変わらなくなることがあります。

そうなった場合は、ブラウザのキャッシュをクリアします。

Chromeの場合、ブラウザ上部の「:」をクリック→「その他のツール」→「閲覧履歴を消去」へ進みます。

はてなブログキャッシュのクリア

表示された画面で、「キャッシュされた画像とファイル」にチェックが入っていることを確認し、「データを削除」を実行します。

閲覧履歴を消去

 

以上で、ブログアイコンの作成と登録が完了です。