ブラウザのタブのところに画像を表示させたい
ネットサーフィンをしていると、PCブラウザのタブにサイトアイコン(ファビコン)が表示されているサイトを見かけると思います。
「自分のブログではタブに画像が表示されていない・・・」
ブログはじめたてはわからないものですよね。
この記事を参考にすることで、Wordpressでのサイトアイコンの設定方法がわかるようになります。
Contents
サイトアイコン(ファビコン)とは?
サイトアイコン(ファビコン)とはホームページのシンボルになる画像のことです。
具体的には、fa-arrow-up上画像のようにいろいろな個所で使われる画像です。タブ画像、ブックマーク、スマホのアイコンに使われています。
サイトアイコン設定をしておくべき理由は大きく2つ
- 自サイトが認知される
- 見た目が良くなる
簡単に説明しますね。
自サイトが認知される
文字通り、サイトアイコンでサイトを覚えてくれる人は多いようです。
YouTubeのサイトアイコンなんて、誰でもしっているサイトアイコンになっていますね。
ネットサーフィンをしているときのことを思い出していただきたいのですが、サイトを別タブで開きすぎた時はアイコンアイコンを頼りに見たいサイトを選んでいないでしょうか?
このようにサイトの区別がつきやすくなる効果も期待できます。
見た目が良くなる
自分のサイトを作ったからには、目に見える部分はこだわりたいですよね。
タブやブックマークに何の表示されないのはあまりにも寂しい・・・
WordPressでのサイトアイコン(ファビコン)設定方法
WordPressの編集メニュから
fa-check-square-o『外観』⇒『カタログ』をクリック⇒『サイト基本情報』をクリックします。
『入力補助設定』からサイトアイコンを設定をしていきます。
fa-check-square-o『サイトアイコンを選択』をクリックすると、画像を選択できるようになるのでサイトアイコンにしたい画像を選択します。
fa-check-square-o画像が設定されたら『公開』をクリックして完了です。
更新をすれば、PC表示のタブにサイトアイコンが表示されるので確認をしてください。
fa-lightbulb-oPOINT
アイコン設定のPOINT
- 512ピクセル×512ピクセル以上の画像を用意
- PNGの画像を使用
512ピクセル(縦)×512ピクセル(横)以上の画像を用意
正方形の画像を用意する必要はありません。
画像サイズさえ条件を満たしていれば、『サイトアイコンを選択』をクリックをしてから正方形に画像を編集はできるので安心してください。
PNGの画像を使用
PNGの画像を使用した方が、PCタブで表示されたときにも見栄えが良くなります。
fa-arrow-downこんな感じですね。
ういちゃうよね・・
まとめ
サイトアイコン(ファビコン)の設定は簡単にできるのがわかっていただけたと思います。
サイトアイコンを設定していないサイトと差をつけることができますね。
試しに設定をしてみてください。