• WordPressの使い方/操作方法

【WordPressのファビコン】を簡単に設定・表示する方法&効果的なファビコンを作るコツ

2021.6.4

WordPressにファビコンを設定、表示させる方法を解説します。

ファビコン(favicon)とはそのサイトのアイコンのことで、検索結果画面やブラウザのタブなどに表示されます。

WordPressのファビコンの例
  • ▲上記の赤枠部分がファビコンです。

本記事ではWordPressでファビコンを設定する3つの方法や、より効果的なファビコンを作成するコツなどを、

初心者にもわかりやすいようキャプチャ画像を使ってくわしく解説します。

  • ※本記事で紹介している情報は執筆時点のものであり、閲覧時点では変更になっている場合がございます。また、ご利用の環境(ブラウザ、サーバー、プラグイン、テーマ、またはそのバージョンや設定、WordPress本体のバージョンや設定など)によっては本記事の情報通りに動作しない場合がございます。あらかじめご了承ください。

目次

WordPressにファビコンを設定するメリット

そもそもWordPressにファビコンを設定させると、どんなメリット・利点があるのでしょうか?

ファビコンのメリット
  • 検索結果に表示される
  • クリック率が上がる
  • ブランディングに役立つ
  • 再来訪率・熟読率が向上する

ファビコンを設定しておくと、検索された時に検索結果画面に表示されます。

良いファビコンを作ることができれば、検索結果画面上で目立ちますし、ユーザーからクリックされやすくなります。

メディアのブランディングにも役立ちますし、良い記事を書いて読者を満足させることができれば、その後のリピート訪問や記事の熟読率の向上にもつながります。

WordPressにファビコンを設定する方法

WordPressにファビコンを設定、表示する方法を解説します。

ファビコンを設定するには以下の3つの方法があります。

  • WordPressのデフォルト機能を使う
  • WordPressのテーマファイルを編集する
  • WordPressプラグインを使う

WordPress4.3以降のバージョンでは、デフォルト機能を使って簡単にファビコンを設定することがきるようになりました。

なので通常は1つ目を実施すればOKです。

WordPressのデフォルト機能を使う

WordPressにデフォルトで搭載されている機能を使って、ファビコンを設定してみましょう。

WordPressファビコンの設定画面を開く

WordPress管理画面の左メニューから、「外観」→「カスタマイズ」へと進みます。

WordPressファビコンの設定画面_サイト基本情報

「サイト基本情報」を選択します。

  • ※ご利用中のテーマによっては若干メニューの項目などが変更になっている可能性がありますが、流れはだいたい同じです。
WordPressファビコンの設定画面_サイトアイコンを選択

「サイトアイコン」の項目があるので、ここからファビコンの設定をおこないます。

WordPressファビコンの設定画面_画像を選択

ロゴに設定する画像にチェックを入れ、右下の「選択」ボタンを押下します。

  • ※ファビコン画像の推奨サイズやファイル形式については、のちほど解説しています。
WordPressファビコンの設定画面_画像を切り抜く

必要に応じて画像を切り抜いてください。

とくに必要がない場合はなにもする必要はありません。

「画像の切り抜き」を押下して先に進みます。

WordPressファビコンの設定画面_公開する

「公開」ボタンを押下します。

WordPressファビコンの設定画面_ファビコンの表示が完了

ファビコンが変更されました。

WordPressのテーマファイルを編集する

前述のとおり、WordPress4.3以降は前述の方法でファビコンを設定できます。

しかし何らかの事情で旧いバージョンのWordPressを利用している場合、WordPressのテーマファイルを編集することでファビコンを設定することもできます。

実際にやってみましょう。

  • ※テーマファイルを直接編集する場合には、事前に必ずバックアップをとって下さい。
WordPressファビコンのテーマファイル編集_テーマエディターを開く

WordPress管理画面の左メニューから、「外観」→「テーマエディター」へと進みます。

WordPressファビコンのテーマファイル編集_header.phpを開く

「header.php」の編集画面を開きます。

WordPressファビコンのテーマファイル編集_タグを挿入

</head>の記載の上に、下記のタグを挿入してください。

<link rel="shortcut icon" href="ファビコンに指定したい画像のURL">
  • ※ファビコンに設定する画像は、拡張子を.icoにしてください。

挿入したら「ファイルを更新」ボタンを押下します。

WordPressファビコンのテーマファイル編集_ファビコンの表示が完了

ファビコンが変更されました。

WordPressプラグインを使う

WordPress4.3よりも旧いバージョンのWordPressを利用している場合、かつテーマファイルを自力で修正することが難しい場合、

ファビコンを設定できるWordPressプラグインを使うという方法もあります。

今回は「Favicon Rotator」を使ってファビコンを設定してみましょう。

Favicon Rotator_プラグインの追加画面を開く

WordPress管理画面の左メニューから、「プラグイン」→「新規追加」へと進みます。

Favicon Rotator_プラグインのインストール

右上の検索窓に「Favicon Rotator」と入力します。

プラグインが見つかったら「今すぐインストール」ボタンを押下します。

Favicon Rotator_プラグインの有効化

「有効化」ボタンを押下します。

Favicon Rotator_プラグインの設定画面

WordPress管理画面の左メニューから、「外観」→「Favicon」へと進みます。

Favicon Rotator_アイコンを追加

上記のような設定画面が表示されますので、「Add Icon」ボタンを押下します。

Favicon Rotator_画像のアップロード

メディアの選択画面が表示されますので、新しい画像をアップロードするか、メディアライブラリから画像を選択してください。

Favicon Rotator_画像の選択

今回はメディアライブラリから画像を選択します。

ファビコンに設定したい画像の「表示」を押下します。

Favicon Rotator_画像の確定

「Add Browser Icon」ボタンを押下します。

Favicon Rotator_設定の保存

「Save Changes」ボタンを押下します。

Favicon Rotator_ファビコンの表示完了

ファビコンが変更されました。

(番外編)デフォルトのファビコンを削除

ちなみに、WordPressの最新バージョンでは、以下の画像のとおりWordPressのロゴがファビコンに表示されます。

WP Favicon Remover_WordPressロゴ

このままでも問題はないのですが、気になる方はプラグイン「WP Favicon Remover」でこれを削除することもできます。

実際にやってみましょう。

WP Favicon Remover_プラグインの追加

WordPress管理画面の左メニューから、「プラグイン」→「新規追加」へと進みます。

WP Favicon Remover_プラグインのインストール

右上の検索窓に「WP Favicon Remover」と入力します。

プラグインが見つかったら「今すぐインストール」ボタンを押下します。

WP Favicon Remover_プラグインの有効化

「有効化」ボタンを押下します。

WP Favicon Remover_ファビコンの削除完了

これで完了です。

ファビコンが削除されて、テーマのデフォルトアイコンに変わりました。

  • ※上記はCocoonのアイコンが表示されています。

ファビコン画像を作成する方法

ここではファビコンに使用する画像を作成する方法や、ファビコン画像のサイズとファイル形式について解説します。

ファビコン画像のサイズとファイル形式

WordPressのファビコン画像では、以下の画像サイズファイル形式が推奨されています。

  • サイズ:512 × 512ピクセル以上
  • ファイル形式:ico

WordPressの管理画面上では、下記の記載があります。

WordPressファビコンの推奨サイズ

画像サイズは512 × 512ピクセル以上にしてくださいとの注意書きがあります。

正方形が推奨されていますが、実際には画像を選択後にトリミングが可能なので、かならずしも正方形である必要はありません。

ファビコン画像は「.gif」「.png」「.ico」の3つのファイル形式が利用できます。

ただし、ブラウザによってはgifやpngのファビコン画像が表示されないものもあるため、icoで作成することをおすすめします。

ファビコン画像の作成方法

ファビコン画像を作る方法についてです。

画像作成についてはいくつかの手段があります。

  • ファビコンを自作する
  • フリー素材サイトを利用する
  • デザイナーに制作を依頼する

ファビコンは自分で作ることもできます。

Photoshopなどの画像編集ソフトが使えればベストですが、簡単なものであればPowerPointでも作ることができます。

また、CanvaというWebサービスを使えば、デザイナーが作成したたくさんのテンプレートをベースにしてアイコンを作成することができます。

アイコン画像があるフリー素材サイトからダウンロードするという方法もあります。

おすすめのフリー素材サイトをいくつか紹介します。

icooon-mono

シンプルなモノトーンのアイコン素材が6,000点以上。商用利用可能で無料でダウンロードできます。

FLAT ICON DESIGN

クオリティの高いフラットデザインのアイコン素材が特徴。商用利用可能で無料でダウンロードできます。

icon rainbow

商用利用可能なアイコン素材(無料)をダウンロード可能。素材は6,500点以上あります。

ハンコでアソブ

判子風のおしゃれでかわいいアイコンが特徴です。商用利用可能で無料でダウンロードできます。

効果的なWordPressファビコンのコツ

ただ単純にWordPressにファビコンを表示させるだけでは、メリットを活かすことはできません。

効果的なファビコンを作るためのコツをいくつか紹介します。

目立つデザインにする

よりユーザーの目にとまりやすいファビコンにするためには、目立つデザインにすることをおすすめします。

ただ派手な色やデザインにすればいいわけではなく、他のサイトではあまり使われない色やデザインを選ぶことも大切です。

たとえばカラフルな色味のファビコンが多いのであれば、あえて黒を選んだほうが目立ちますよね。

サイト内容を表わすものにする

サイトの内容とまったく関係のないデザインにしてしまうと、ブランディングやクリック率にも不利になってしまいます。

ファビコンはそのサイトの内容を端的に表わすものにしましょう。

また、企業ロゴやサイトロゴのデザイン・色味との統一感も大切です。

シンプルで見やすいものにする

ファビコンの表示はとても小さいので、複雑なデザインにしてしまうとそこに何が描かれているのかを理解することができません。

ファビコンはシンプルで、小さくても見やすいデザインにすることをおすすめします。

WordPressのファビコン まとめ

WordPressにファビコンを設定・表示する方法を紹介しました。

ファビコンはWordPressのビルトイン機能で簡単に設定することができますので、ぜひ今回の内容を参考に試してみてください。

また、ファビコンのメリットを最大限に発揮させるためには、デザインや色味を工夫することも大切です。

目立ちやすく、サイトの内容を端的に表わすファビコンを作ることができれば、

クリック率の向上やリピート率の向上、サイトのブランディングにも役立ちます。

WordPressを始めるならConoHa WINGがおすすめ!

「WordPressでブログやアフィリエイトを始めたい!」

「もっと性能の良いレンタルサーバーに乗り換えたい!」

そんなあなたには、高性能・高速でお得なレンタルサーバーConoHa WINGをおすすめします。

ConoHa WINGのメリット
  • サイト表示が速い! 国内最速のレンタルサーバー
  • 初心者も安心! 簡単で使いやすい管理画面
  • 安定した稼働! 大量同時アクセスなどの高負荷にも強い
  • お得な料金設定! 836円/月~で始められる!
  • しかも初期費用が無料! さらに独自ドメインも永久無料!
  • ※2021年3月自社調べ

今なら最大36%おトク!

ConoHa WINGを 今すぐお申し込み

ConoHa WINGは日本マーケティングリサーチ機構による調査で、下記の3部門においてNo.1を獲得しています。

ConoHa WINGは3つのNo.1を獲得!
  • アフィリエイター・ブロガーが使いたいレンタルサーバー
  • WordPress利用者満足度
  • サポートデスク対応満足度
  • ※日本マーケティングリサーチ機構調べ 調査概要:2021年2月期_ブランドのイメージ調査

新規のお申し込みはこちら

Webにくわしくない初心者でもたった10分で始められるレンタルサーバー「ConoHa WING」。

とっても簡単だから今すぐ始めちゃいましょう。

今なら最大36%おトク!

ConoHa WINGを 今すぐお申し込み

また下記の記事では、ConoHa WINGを使ってWordPressを開設する方法を、画像付きでくわしく解説しています。

【WordPressの始め方】初心者でも最短10分でできる!簡単で失敗しない開設方法

  • WordPressの始め方

他社レンタルサーバーからお乗換えはこちら

他社のレンタルサーバーをご利用中で、ConoHa WINGにお乗り換えを検討されている方も安心です!

煩雑なレンタルサーバーの移行もかんたんにお乗換えいただけるよう、いくつかのサポートを用意しています。

  • WordPressかんたん移行ツール

    他社サーバーでお使いのWordPressを、ご自身でかんたんにConoHa WINGへ移行ができる無料のツールをご用意しています。

  • WordPress移行代行

    移行にかかる作業はすべて専門のプロが代行するので、待っているだけでWordPressを移行できます。

  • ConoHa WINGへの移行ガイド

    レンタルサーバーの移行作業は複雑ですが、ConoHa WINGでは移行作業の流れをわかりやすくご紹介しています。