はてなブログでfaviconを設置する方法を調べてみた

f:id:nanana-blog:20190726221917j:plain

こんばんは。

 

nanana-blog管理人のナナナです。

 

ブログを訪問し記事を読んでいただきありがとうございます。

 

本日は久しぶりにはてなブログの設定について書いていきます。

はてなブログでブログ運営をされている方でfavicon(ファビコン)を設置されている方は多いと思います。

私も設置をしようと思い、あまり調べず「favicon.ico」ファイルを作成したのですが、はてなブログでは「.ico」の拡張子は対応していなく、「.jpg」「.png」のみ対応でした。

はてなブログでfaviconを設置しようとしている方は、参考にしてください。

 

 
 

 

faviconとは何なのか

Webブラウザのタブに表示されている小さな画像がありますが、この画像のことをfaviconと呼びます。

f:id:nanana-blog:20190725233536j:plain

ファビコンは拡張子を「ico」として「favicon.ico」という名前で保存することが多いです。

しかし「ico」以外にも「png」「gif」「jpg」などの画像ファイルでも設置できます。

 はてなブログでは「png」「jpg」の画像ファイルが対象です。

 

 

 

なぜfaviconが必要なのか

Webブラウザでタブをたくさん開いていると、タブ内の文字が見えなくなってしまい、タブの中から目的のサイトを探すのが大変になってしまいます。

しかしfaviconを設置していると、他のタブと差別化が図れてすぐにサイトを判別することができます。

faviconの画像はどんな画像でも設置できますが、表示できるサイズが小さいので、なるべくシンプルでサイトと関連のある画像を設置すると良いです。

 

 

faviconの画像サイズはどのくらいなのか

Webブラウザによってブラウザのタブに表示される画像サイズが異なります。

IEは16px × 16px でChrome、Firefox、Safariなどは32px × 32pxになります。

はてなブログの場合は、画像を1つアップロードすると自動的にサイズを調整して表示させてくれます。

はてなブログのヘルプでは192px × 192pxを推奨しています。

 

 

 

はてなブログでfaviconを設置する方法

ダッシュボード ⇒ 設定 をクリックします。

f:id:nanana-blog:20190725235643j:plain

 

基本設定タブのブログアイコン項目にある「ファイルを選択」ボタンをクリックしてfaviconとして設置したい画像を選択します。

f:id:nanana-blog:20190725235855j:plain

 

画面の一番下にある変更ボタンをクリックして、保存をすればfaviconの設置は完了です。

設置後すぐに反映されますが、ファビコンが表示されない場合は、ブラウザのキャッシュを削除すると表示されます。

 

f:id:nanana-blog:20190726000308j:plain

設置したfaviconが表示されました。

 

 

最後に

いかがだったでしょうか。

本日ははてなブログでfaviconを設置する方法を紹介しました。

とても簡単に設置できますが、細かいデザインの画像を設置してしまうと見づらいfaviconになってしまうので、なるべくシンプルなfaviconを設置してみてください。

 

www.nanana-blog.com

www.nanana-blog.com

www.nanana-blog.com

www.nanana-blog.com