![カテゴリー記事のアイキャッチ画像](https://web.skipjack.tokyo/wp-content/uploads/eyecatch/eyecatch_wp.png)
ファビコンとは?
ファビコンとはサイトを表すアイコンのことで、サイトを開いているときにブラウザのタブに表示されたり、お気に入りやブックマークされたときにサイトを示すアイコンとして表示されます。
ワードプレスの公式サイトのファビコンにはワードプレスのマークが使われています。
![ファビコン](https://web.skipjack.tokyo/wp-content/uploads/wp/favicon/favicon.jpg)
テキストよりもサイトを印象付けやすく、ブックマークなどでユーザーに見つけてもらいやすくなるというメリットがあります。
また、しっかりと作り込まれた独自のファビコンが表示されていれば、ユーザーがサイトに信頼感を持ってもらいやすくブランディングの効果やイメージアップにもつながると思います。
ロゴとは違う?
あくまでファビコンは、WEBサイトのシンボルマークとしてタブなどに表示させるアイコンを指した呼び方です。
ロゴやシンボルマークを所有していればそのままファビコンとしても利用できます。(ファビコンは正方形なので元々のロゴの形状によっては加工が必要になる場合もあります)
もちろんWEBサイトのファビコン用に新しく作成することもあります。
ちなみに当サイトは下図をファビコンとして設定しています。
![当サイトのファビコン](https://web.skipjack.tokyo/wp-content/uploads/wp/favicon/favicon_kb.png)
ファビコンが表示される場所の例
WEBサイトのファビコンは、次のような場所で表示されます。
ブラウザのタブ
最もファビコンを目にする機会が多いのはブラウザのタブかと思います。
タブにはサイトタイトルやページタイトルが表示されますが、文字数が制限されており一目では何のサイトを開いたタブかが分からないこともあります。
そんな場合でもファビコンであれば即座にサイトを視認することができます。
ブックマーク
タブと同じように、お気に入りにもファビコンは表示されます。
タブレットやスマートフォンなどのデバイスでは比較的大きめに表示されると思います。
ワードプレスでファビコンを設定する方法
ワードプレスであれば簡単にファビコンを設定できます。
ファビコンを設定する機能に関してはどのようなテーマを使用していても標準で備わっているはずです。
管理画面左側のメニューから、「外観」の「カスタマイズ」をクリックします。
![管理画面左側のメニュー](https://web.skipjack.tokyo/wp-content/uploads/wp/favicon/set.jpg)
カスタマイズ画面に切り替わり、左側にカスタマイズメニューが表示されます。
![カスタマイズ画面](https://web.skipjack.tokyo/wp-content/uploads/wp/favicon/set2.jpg)
サイト基本情報をクリックしてください。次のような画面に変わります。
![サイト基本情報](https://web.skipjack.tokyo/wp-content/uploads/wp/favicon/set3.jpg)
サイト基本情報設定では、「ロゴ」と「サイトアイコン」が登録できます。ファビコンは下の「サイトアイコン」に登録します。ロゴの方はサイトタイトルという意味合いに近く、ヘッダーやフッターなどテーマによって指定された場所に表示されます。
「サイトアイコンを選択」をクリックするとメディアライブラリが開きます。アップロードしてあるものから選択するか新規アップロードします。
![サイトアイコンを選択](https://web.skipjack.tokyo/wp-content/uploads/wp/favicon/set4.jpg)
なおファビコンに登録する画像の推奨サイズは512px×512pxの正方形とされています。
大きいサイズの場合はトリミングが必要
推奨サイズを上回る画像を選択した場合、切り抜きを行い画像の一部のみをファビコンとして設定します。
![切り抜き](https://web.skipjack.tokyo/wp-content/uploads/wp/favicon/set5.jpg)
切り抜きが完了すると「サイト基本情報」にタブでの見え方がイメージとして表示されます。
ボタンを押せば変更や削除が可能です。
![タブでの見え方](https://web.skipjack.tokyo/wp-content/uploads/wp/favicon/set6.jpg)
最後に「公開」ボタンを押して保存します。
![公開](https://web.skipjack.tokyo/wp-content/uploads/wp/favicon/set7.jpg)
以上でファビコンが設定できました。ワードプレスにログインした状態でもタブにはファビコンが表示されるようになります。
![タブにはファビコンが表示される](https://web.skipjack.tokyo/wp-content/uploads/wp/favicon/set8.jpg)
ファビコンを設定する時の注意点
ファビコンの設定にきまりはなく自由ですが、設定する場合はいくつか注意した方が良い点があるのでご紹介します。
画像サイズに注意する
当然ながらファビコンは小さく表示されることがほとんどです。
細かなデザインをほどこしても実際にタブで表示したときにはつぶれてしまう可能性があります。
また、ワードプレスでは512px×512pxが推奨サイズですので、上回るサイズで作ってしまうと設定するときに切り抜くことになってしまうので注意して下さい。
設定しないとデフォルトのファビコンが自動で表示される
ワードプレスでは、ファビコンの設定が行われていない場合、ブラウザ独自のファビコンではなく自動的にワードプレスのロゴがファビコンとして表示されます。
![ワードプレスファビコン](https://web.skipjack.tokyo/wp-content/uploads/wp/favicon/w-logo-blue.jpg)
特にこだわらないからそのままで構わないという方もいると思いますが、ワードプレスで作成したサイトであることが一目でわかってしまうということはセキュリティ上よくありません。
ワードプレスは狙われやすいから注意が必要
ワードプレスは世界的に有名で多くのシェアを獲得している反面、内部構造がオープンなため脆弱性が見つかりやすくハッキング対象として狙われやすくなっています。
例えばデフォルトのログインページはURLの末尾に「wp-admin」をつけるだけでアクセスできてしまうというのは広く浸透してしまっています。
アクセスできてしまえば総当たりにユーザー名やパスワードを入力してログインされる恐れがあるということです。
何でもいいからファビコンを設定しておけというのは極端ですが、フリー素材のアイコンなども簡単に手に入れることができますし、ワードプレスでファビコンを設定するのも説明した通り非常に簡単です。
ファビコンを変えたからといってセキュリティ対策にどれほど効果があるかは不明ですし、それ以外でもワードプレスかどうか調べることは可能ですが、少しの手間でリスクを多少でも軽減できるのであればやっておいて損はないかと思います。
まとめ
以上がワードプレスでファビコンを設定する方法です。
WEBサイトにとって必要不可欠なものではありませんが、こういったディティールが意外と見ている側が抱くイメージを左右すると思います。
せっかく自身で作るサイトですので細部までこだわりを持ってファビコンを設定してみてはいかがでしょうか。