WordPress

WordPressでファビコンを設定する方法を分かりやすく解説

更新日 :

WordPressでファビコンを設定する方法を分かりやすく解説
WordPressでファビコンを設定したい!
自分のWordPressブログのサイトアイコンを設定したい!

今回はこういった悩みを解決していきます。

ブラウザのタブや履歴一覧、ブックマーク一覧に表示されるサイトアイコンのことをファビコンと言います

WordPressでウェブサイトを開設すると、デフォルトのファビコンはWordPressのアイコンになっています。

そこで今回はWordPressでファビコンを設定する方法について詳しく解説していきます。

WordPressブログを始めたばかりの初心者の方は必見です!

この記事でわかること

  • ファビコンとは
  • ファビコンを用意する方法
  • WordPressでファビコンを設定する方法

当サイトではプログラミングやWebサイト運営に関する記事を毎日投稿しています。
他の記事も合わせてご覧ください。

無料で被リンクを獲得できる120サイトをご紹介無料で被リンクを獲得できる64サイトをご紹介個人ブログを月間96,000PVに育て上げた方法

ファビコンとは

ファビコンとは

まずはファビコンの意味についてご紹介します。

ファビコンとは簡単に言えば「ウェブサイトのアイコン」のことで、ブラウザのタブやブックマーク一覧などで表示されます。

実際のビジュアルはこんな感じ。

ファビコン例

ファビコン例

ちなみにWordPressブログでは、初期状態でWordPressのアイコン画像がファビコンとして設定されています。

WordPressアイコン

ファビコンはSEOに直接的な原因を及ぼすわけではありませんが、サイトのイメージをユーザーに伝えたり、ブログのブランディングを高める手段として非常に有効的です。

少なくともデフォルト状態のWordPressマークのファビコンは変更したほうが良いでしょう。

ファビコンを用意する方法

ファビコン画像を用意する方法

WordPressでファビコンを設定する前に、まずは画像を用意しなくてはなりません。

ファビコン画像を用意する方法は以下の2つが挙げられます。

ファビコン画像を用意する方法

  • 自作する
  • 素材からダウンロードする

それぞれ詳しく見ていきましょう。

1. 自作する

デザイン経験がある方他サイトのファビコンと被りたくない方は自作した方が良いでしょう。

それぞれ自分の好きなデザインツールを使ってファビコン画像を作成しましょう

個人的には「Canva」というデザインツールがおすすめです。

Canvaは誰でもカンタンにオシャレなデザインを制作できる無料デザインツールです。

画像制作はもちろん動画やプレゼン資料の作成も簡単にできてしまうので、初心者の方必見のツールです!

ファビコン画像を作成する際は512ピクセル✕512ピクセル以上の正方形になるようにしましょう

Canvaの魅力や使い方について詳しく知りたい方はこちらの記事をご覧ください。

Canvaを使って超カンタンにアイキャッチ画像を作る方法
Canvaを使ってカンタンにアイキャッチ画像を作る方法

みなさんはブログやウェブサイトのアイキャッチ画像を工夫していますか? 「フリー画像で十分」 「画像加工の仕方がわからない」 そんな方に向けて今回は無料の画像加工ツールのCanva Proを使ってアイキ ...

続きを見る

2. 素材からダウンロードする

「画像を作る手間が面倒...」という方はファビコン配布サイトから素材をダウンロードするという方法もあります。

ここでは3つのファビコン素材サイトをご紹介します。

ICOOON MONO

ICOOON MONO

ICOOON MONOは正方形のアイコン画像をダウンロードできるフリー素材サイトです。

デフォルトは白黒ですが、オリジナルでカラーをカスタマイズすることもできます。

>> ICOOON MONO

FLAT ICON DESIGN

flat icon design

マテリアルでシンプルなデザインなら「FLAT ICON DESIGN」がオススメです。

こちらも商用利用可能な無料アイコン素材サイトです。

>> FLAT ICON DESIGN

Icons8

Icons8

Icons8」は無料商用利用が可能な海外のフリーアイコン素材サイトです。

画像使用の際にはリンク表記が必要になりますのでご注意ください。

>> Icons8

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

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

続いてはWordPressでファビコンを設定する方法について解説していきます。

WordPressでファビコン画像を設定する方法は以下の2つが挙げられます。

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

  • WordPressの標準機能から設定する
  • プログラムコードから設定する
  • WordPressプラグインで設定する

それぞれ詳しく見ていきましょう。

1. WordPressの標準機能から設定する

ファビコン画像はWordPressの標準機能から設定するのが一番簡単です。

まずはWordPress管理画面から「外観」→「カスタマイズ」に移動しましょう。

「外観」→「カスタマイズ」に移動

WordPressテーマによってレイアウトやデザインが違うかもしれませんが、「サイト基本情報」と書かれたメニューがあるはずですのでクリックします。

すると「サイトタイトル」「キャッチフレーズ」の下に「サイトアイコン」という項目があります。

「サイトアイコンを選択」という部分をクリックすると、メディアライブラリから画像を選択できるようになるので、お好みの画像を設定しましょう。

注意点としてはファビコン画像のサイズは512ピクセル✕512ピクセル以上の正方形が望ましいとされています。

もし長方形の画像を選択した場合、切り抜き編集画面が表示されるのでうまい具合に正方形にトリミングしましょう。

トリミング

画像の拡張子は「png」でも「ico」でも大丈夫です

選択が終わったら右上の「公開する」ボタンをクリックして設定を保存しましょう!

こちらの方法はWordPressテーマによって極稀に設定できないことがありますのでご注意ください。

2. プログラムコードから設定する

ファビコン画像はプログラムコードを編集して設定することも可能です。

まずはWordPress管理画面から「外観」→「テーマエディター」に移動します。

テーマエディターへ

テーマエディター画面に移動したら親テーマの中からテーマヘッダー(header.php)を選択して開きます。

テーマヘッダーへ

ファイルを開いたら</head>を探して、タグの直前にファビコン設定用のプログラムを挿入します。

ファビコン設定用のコード挿入

</head>が見つからない時は「⌘+F(Mac)」または「Ctrl+F(Windows)」でサイト内検索を行うのがオススメです。

</head>の直前に挿入するファビコン設定用のHTMLコードはこちら。

 ファビコン設定用のHTMLコード
<link rel="icon" href="ファビコン画像のURL">
<link rel="apple-touch-icon" href="ファビコン画像のURL">

コードを挿入できたら「ファイルを更新」を押して変更を保存しましょう。

3. WordPressプラグインで設定する

3つ目はWordPressプラグインを使って設定する方法です。

今回紹介するのは「Favicon Rotator」というプラグインです。

Favicon Rotator

まずはFavicon Rotatorをインストール&有効化しましょう。

>> Favicon Rotator

WordPressプラグインのインストール方法がわからない方はこちらの記事をご覧ください。

WordPressのプラグインをインストールする手順をご紹介
WordPressのプラグインをインストールする手順

「WordPressでプラグインをインストールする方法が分からない」 「プラグインをインストールする方法は2つあるって本当?」 WordPressブログを始めたてのときにぶつかるのが「WordPres ...

続きを見る

Favicon Rotatorの導入が完了したら設定画面に移動します。

WordPress管理画面から「外観」→「Favicon」に移動しましょう。

Favicon Rotator設定

するとご覧のようにブラウザアイコンとタッチアイコンの2つを設定できるようになっています。

Favicon Rotator今回はブラウザのファビコンを設定するので「Browser Icon」の「Add Icon」をクリックし、ファビコン画像を設定しましょう。

最後に「Save Changes」を押せば設定完了です!

サイトを再読み込みすればファビコン画像が反映されているはずです。

まとめ:WordPressでファビコンを設定する方法

まとめ:WordPressでファビコンを設定する方法

WordPressでファビコンを設定する方法のまとめ

  1. ファビコンとはウェブサイトのアイコンのこと
  2. ファビコン画像は自作するかフリー素材からダウンロードしよう
  3. WordPressでファビコンを設定する方法は3つある

今回はWordPressでファビコンを設定する方法をご紹介しました。

ファビコン画像はサイトのイメージを鮮明に伝える"顔"のような役割を持っており重要性はかなり高いです。

特にWordPressではファビコンの設定が非常にカンタンです。

今回紹介した方法をぜひ実践してみてくださいね!

最高のファビコン画像を設定してより良いサイト運営を心がけましょう。

もしも分からない部分があればお問い合わせフォームで質問して頂ければすぐに返信致します。

今サイトではこれからもウェブサイト運営に関する有益な情報をたくさん発信していきますので応援よろしくお願いします!

ブログが思うように伸びなくて挫折しかけている方へ
初心者・未経験者でも大丈夫。
読むだけでその日から実践できるSEO対策を学びませんか?
>> 個人ブログを月間96,000PVに育て上げた裏ワザを徹底解説
>> ブログ開始4ヶ月でドメインパワーを0→28に上げた方法を全部教えます

  • この記事を書いた人(著者情報)
wagtechblog

wagtechblog

本サイトの運営者・管理人。慶應義塾大学環境情報学部卒。人材系のWeb系メガベンチャー企業に新卒入社。兼業でフリーランスとしてiOSアプリ開発、Web開発、Webメディア運営、SEOマーケティング等を行う。IT人材系のベンチャー企業でiOSエンジニア、Web系メガベンチャー企業でWebアプリケーションエンジニア、士業のスタートアップ企業でフロントエンドエンジニア、Web系メガベンチャー企業でプロダクトマネージャー兼SEOディレクター、ゲーム系のスタートアップ企業で最高技術責任者(CTO)、学生向けプログラミングスクールで講師の勤務経験あり(インターンを含む)。好きなプログラミング言語はSwiftとPythonとPHPとRubyとJavaScript。侍エンジニア塾元受講生。エンジニアやプログラミングスクールでの体験・経験に基づいた記事を執筆。
保有資格:ITパスポート / 基本情報技術者試験 / TOEIC730点 / 日商簿記3級

-WordPress

Copyright © wagtechblog All Rights Reserved.