• HOME > 
  • WordPress > 
  • ワードプレスでファビコンを設定する方法【画像付きで解説】

ワードプレスでファビコンを設定する方法【画像付きで解説】

投稿日:

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

カテゴリー記事のアイキャッチ画像
広告
広告

ファビコンとは?

ファビコンとはサイトを表すアイコンのことで、サイトを開いているときにブラウザのタブに表示されたり、お気に入りやブックマークされたときにサイトを示すアイコンとして表示されます。

ワードプレスの公式サイトのファビコンにはワードプレスのマークが使われています。

ファビコン

テキストよりもサイトを印象付けやすく、ブックマークなどでユーザーに見つけてもらいやすくなるというメリットがあります。

また、しっかりと作り込まれた独自のファビコンが表示されていれば、ユーザーがサイトに信頼感を持ってもらいやすくブランディングの効果やイメージアップにもつながると思います。

ロゴとは違う?

あくまでファビコンは、WEBサイトのシンボルマークとしてタブなどに表示させるアイコンを指した呼び方です。

ロゴやシンボルマークを所有していればそのままファビコンとしても利用できます。(ファビコンは正方形なので元々のロゴの形状によっては加工が必要になる場合もあります)

もちろんWEBサイトのファビコン用に新しく作成することもあります。

ちなみに当サイトは下図をファビコンとして設定しています。

当サイトのファビコン

ファビコンが表示される場所の例

WEBサイトのファビコンは、次のような場所で表示されます。

ブラウザのタブ

最もファビコンを目にする機会が多いのはブラウザのタブかと思います。

タブにはサイトタイトルやページタイトルが表示されますが、文字数が制限されており一目では何のサイトを開いたタブかが分からないこともあります。

そんな場合でもファビコンであれば即座にサイトを視認することができます。

ブックマーク

タブと同じように、お気に入りにもファビコンは表示されます。

タブレットやスマートフォンなどのデバイスでは比較的大きめに表示されると思います。

ワードプレスでファビコンを設定する方法

ワードプレスであれば簡単にファビコンを設定できます。

ファビコンを設定する機能に関してはどのようなテーマを使用していても標準で備わっているはずです。

管理画面左側のメニューから、「外観」の「カスタマイズ」をクリックします。

管理画面左側のメニュー

カスタマイズ画面に切り替わり、左側にカスタマイズメニューが表示されます。

カスタマイズ画面

サイト基本情報をクリックしてください。次のような画面に変わります。

サイト基本情報

サイト基本情報設定では、「ロゴ」と「サイトアイコン」が登録できます。ファビコンは下の「サイトアイコン」に登録します。ロゴの方はサイトタイトルという意味合いに近く、ヘッダーやフッターなどテーマによって指定された場所に表示されます。

「サイトアイコンを選択」をクリックするとメディアライブラリが開きます。アップロードしてあるものから選択するか新規アップロードします。

サイトアイコンを選択

なおファビコンに登録する画像の推奨サイズは512px×512pxの正方形とされています。

大きいサイズの場合はトリミングが必要

推奨サイズを上回る画像を選択した場合、切り抜きを行い画像の一部のみをファビコンとして設定します。

切り抜き

切り抜きが完了すると「サイト基本情報」にタブでの見え方がイメージとして表示されます。

ボタンを押せば変更や削除が可能です。

タブでの見え方

最後に「公開」ボタンを押して保存します。

公開

以上でファビコンが設定できました。ワードプレスにログインした状態でもタブにはファビコンが表示されるようになります。

タブにはファビコンが表示される

ファビコンを設定する時の注意点

ファビコンの設定にきまりはなく自由ですが、設定する場合はいくつか注意した方が良い点があるのでご紹介します。

画像サイズに注意する

当然ながらファビコンは小さく表示されることがほとんどです。

細かなデザインをほどこしても実際にタブで表示したときにはつぶれてしまう可能性があります。

また、ワードプレスでは512px×512pxが推奨サイズですので、上回るサイズで作ってしまうと設定するときに切り抜くことになってしまうので注意して下さい。

設定しないとデフォルトのファビコンが自動で表示される

ワードプレスでは、ファビコンの設定が行われていない場合、ブラウザ独自のファビコンではなく自動的にワードプレスのロゴがファビコンとして表示されます。

ワードプレスファビコン

特にこだわらないからそのままで構わないという方もいると思いますが、ワードプレスで作成したサイトであることが一目でわかってしまうということはセキュリティ上よくありません。

ワードプレスは狙われやすいから注意が必要

ワードプレスは世界的に有名で多くのシェアを獲得している反面、内部構造がオープンなため脆弱性が見つかりやすくハッキング対象として狙われやすくなっています。

例えばデフォルトのログインページはURLの末尾に「wp-admin」をつけるだけでアクセスできてしまうというのは広く浸透してしまっています。

アクセスできてしまえば総当たりにユーザー名やパスワードを入力してログインされる恐れがあるということです。

何でもいいからファビコンを設定しておけというのは極端ですが、フリー素材のアイコンなども簡単に手に入れることができますし、ワードプレスでファビコンを設定するのも説明した通り非常に簡単です。

ファビコンを変えたからといってセキュリティ対策にどれほど効果があるかは不明ですし、それ以外でもワードプレスかどうか調べることは可能ですが、少しの手間でリスクを多少でも軽減できるのであればやっておいて損はないかと思います。

まとめ

以上がワードプレスでファビコンを設定する方法です。

WEBサイトにとって必要不可欠なものではありませんが、こういったディティールが意外と見ている側が抱くイメージを左右すると思います。

せっかく自身で作るサイトですので細部までこだわりを持ってファビコンを設定してみてはいかがでしょうか。

関連する記事

サムネイル

ワードプレスの固定ページにPHPファイルを読み込む方法【ショ……

2023年12月04日
ワードプレスの固定ページ(投稿ページ)内にPHPを書いたり、PHPファイルを読み込ませることができたら便利ですよね。「PHPファイルを作成して、ショートコードを使って固定ページ内に読み込ませる」という方法をご紹介します。
サムネイル

コンタクトフォーム7のショートコードをテーマファイル内に埋め……

2023年11月24日
テーマファイル(PHPファイル)内にコンタクトフォーム7のショートコードをそのまま記述しても、フォームを呼び出すことはできません。
サムネイル

ワードプレスで前後の記事の公開日を取得して表示する方法【ge……

2023年10月01日
最終更新日:2023年09月12日
ワードプレスの投稿ページで前後の記事の公開日を表示させたいときはget_previous_postとget_next_post関数を使います。
サムネイル

Elementor(エレメンター)の使い方を徹底解説【ページ……

2023年03月09日
最終更新日:2023年03月10日
Elementorは直感操作でワードプレスのサイトを構築できるページビルダープラグインです。ウィジェットをドラッグアンドドロップしていくだけでページのレイアウトを作成することが可能です。
サムネイル

ワードプレスのログイン画面をカスタマイズする方法【プラグイン……

2023年03月07日
最終更新日:2023年12月08日
ワードプレスのログイン画面はカスタマイズしてロゴや背景を変更することができます。ログイン画面のカスタマイズはプラグインを使うかfunctions.phpを編集して行います。
サムネイル

ワードプレスのコンタクトフォーム7で自動返信メールを設定する……

2023年02月28日
最終更新日:2023年03月10日
ワードプレスのContact Form 7プラグインを使って自動返信メールを設定する手順を解説します。フォームの編集画面で「メール(2)を使用」にチェックを入れると、設定項目が表示されて自動返信ができるようになります。
サムネイル

ワードプレスでログイン履歴を確認する方法【SiteGuard……

2023年01月26日
最終更新日:2023年03月10日
多くのセキュリティ対策プラグイン「SiteGuard WP Plugin」を使ってログイン履歴を確認する方法について解説します。