• このエントリーをはてなブックマークに追加

ファビコン

葉(よう)葉(よう)

どうも。葉です。あなたは、ファビコンって何のことだか知っていますか?

ファビコンというのは、ブラウザのタブ部分に表示されているアイコンのことを言います。

例えば、こんなやつ。

賢威7コーポレートブルーファビコン

これは、自分だけのオリジナル画像に設定したいと思いませんか?
とこうことで、この記事ではWordPressでオリジナルのファビコンを設置する方法を丁寧に解説していきます。

じっくりと読み進めてくださいね。

1.ファビコンをオリジナルにするメリット

メリット1:ユーザーに優しい+目立つ!

インターネットをよく使う人などは、ブラウザにたくさんのタブを開きます。僕は、殆どの場合にタブを10個以上開いています。

こんな感じ。普段はもっとたくさん開いてます。笑

ファビコンタブ

そうすると、どのタブに何のページがあるのかがわからなくなってしまうんです。そんな時に、他の人とは違うオリジナルのファビコンを設定していると、ユーザーに対して

『私のサイトはここだよ!』

とアピールができます。

葉-ファビコン

このようにファビコンをオリジナルアイコンに変更することで、
『どのタブに何のサイトがあるのか?』
を一目で判断できるわけです。

お気に入りでもファビコンがあるとやっぱり目立つ!

葉-ファビコン2

メリット2:自己満足感

もう一つは、ただの自己満足です。笑

僕は、自分のファビコンを見ると
『細かいことだけど設定してよかったな~』
という気持ちになります。

また、自分のブログに愛着が湧くので自分のブログのことを前よりも好きになりました。

こういった理由から、ファビコンはオリジナル画像にすることをおすすめします。

2.ファビコンをオリジナルアイコンに変更する手順

では、実際にファビコンをオリジナルのものに変更していきます。手順としては、

  1. ファビコン用のアイコン画像を作る
  2. 作成したアイコン画像をファビコンに設定する
  3. ブラウザのキャッシュを削除する
    ※変更が反映されない場合のみ

です。

ファビコン用のアイコン画像を作る

ファビコン用のアイコン画像を作るにあたりおすすめの設定を紹介します。

奨励画像サイズ:152(px)×152(px)以上

ファビコンの主要な表示サイズは、以下のようになります。

  • 16(px)×16(px):IEのタブ
  • 32(px)×32(px):Chrome、Firefoxなどのタブ
  • 48(px)×48(px):Windowsのサイトアイコン
  • 152(px)×152(px):スマホで表示されるアイコン

この中で一番大きいサイズの152(px)×152(px)を作っておけば、他のサイズは圧縮表示してくれるので大きいサイズを1つで作っちゃえば問題なしです。

スマホでの表示を気にするなら。。。
スマホやタブレットのホーム画面に表示されるウェブクリップアイコンも意識するならより512(px)×512(px)のアイコン画像を作りましょう。
ウェブクリップアイコン
ファビコンの表示にこだわりがあるなら。。。

ただし、ファビコンの表示にこだわりがあるなら、マルチアイコンを作りましょう。
※マルチアイコンとは、複数の解像度のアイコンを1つの「.ico」ファイルに格納したもののことを言います。

おすすめの画像サイスは次の3つです。

  • 152(px)×152(px)
  • 32(px)×32(px)
  • 16(px)×16(px)

奨励画像形式:「.ico」

そして、アイコン画像のファイル形式ですが、古いブラウザでも表示できる「.ico」がおすすめです。先ほど紹介したマルチアイコンにも対応しています。

※「.png」「.gif」などでもアイコン画像として使用することは可能です。

おすすめファビコン作成サイト

では実際にオリジナルのファビコンを作ってみましょう。

こちらのサイトで直感的にファビコンを作成できますよ。

favicon.ico Generator

ファビコン作成時のポイント
ファビコンを作成する際のポイントはシンプルに作ることです。
表示サイズが小さいので複雑なデザインにすると、何がなんだかわからなくなってしまいます。

作成したアイコン画像をファビコンに設定する手順

次に、作成した画像をファビコンに設定しましょう。
『WordPressにアイコンをアップロード→ファビコンに設定』
の手順を詳しく解説していきます。

まず、WordPress管理画面の左メニューより『メディア』をクリックし、アイコンに設定したい画像をアップロードします。

WordPressにファビコン画像を設定

『外観→カスタマイズ』をクリックます。

WordPressにファビコン画像を設定2

『サイト基本情報』をクリックします。

WordPressにファビコン画像を設定3

『画像を選択』をクリックします。

WordPressにファビコン画像を設定4

ファビコンに使用する画像を選び『選択』をクリックします。

WordPressにファビコン画像を設定5

『保存して公開』をクリックします。

WordPressにファビコン画像を設定6

ブログを更新するとファビコンが設定した画像になっているはずです。

WordPressにファビコン画像を設定7

ファビコンが更新されない場合
ファビコンが更新されなかったら、ブラウザのキャッシュを削除してください。キャッシュに保持してあるデータが優先的に表示されている可能性があります。

ブラウザのキャッシュを削除する(Chromeの場合)

今回は、Chromeのキャッシュ情報を削除していきます。

Chromeの『履歴→履歴』をクリックします。

キャッシュ削除

『閲覧履歴データの消去…』をクリックします。

キャッシュ削除2

『キャッシュされた画像とファイル』にチェックを入れて『閲覧履歴データを消去する』をクリックします。

キャッシュ削除3

これでキャッシュの削除は完了です。
ファビコンが更新されているかどうか確認してください。

キャッシュを消してもファビコンが更新されない場合
まれにキャッシュを削除してもファビコンが更新されないことがあります。このようなときは、ブラウザを閉じたり、PCを再起動してみてください。

3.『まとめ』と『感想』

WordPressでプラグイン無しでファビコンを変更する方法を解説しました。

僕は、ファビコンに関してはとりあえず表示さえされてればいい!という考え方なので、「.png」形式で画像サイズ「512(px)×512(px)」のものを作成しました。

デザインに相当なこだわりがない限りは、ファビコンは、152(px)×152(px)以上の1サイズで十分です。

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

WordPress