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

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

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

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

• ※ご利用中のテーマによっては若干メニューの項目などが変更になっている可能性がありますが、流れはだいたい同じです。

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

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

• ※ファビコン画像の推奨サイズやファイル形式については、のちほど解説しています。

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

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

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

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

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

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

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

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

• ※テーマファイルを直接編集する場合には、事前に必ずバックアップをとって下さい。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

これで完了です。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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