WordPress

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

2020年11月30日

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

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

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

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

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

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

今回のテーマはこちら!

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

当サイトではウェブサイトやブログに関する記事を毎日投稿しています。
他の記事も合わせて読んでいただけると嬉しいです。

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

ファビコンとは

ファビコンとは

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

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

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

ファビコン例

ファビコン例

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

WordPressアイコン

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

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

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

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

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

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

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

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

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

1. 自作する

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

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

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

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

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

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

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

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

続きを見る

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のプラグインをインストールする手順

続きを見る

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

プログラミングとWordPressに溺れた私立大学生。フリーランスのiOSエンジニアとしてアプリ開発しています。その傍らWeb集客のベンチャー企業で勤務。主にフロントエンドエンジニア・WebアプリケーションエンジニアとしてWebアプリケーション開発、SEOマーケティング、データビジュアライゼーションといった業務もしてます。好きな言語はSwiftとPythonとPHPとRuby。趣味はApex Legendsとゲーミングデバイス集め。

-WordPress

Copyright © wagtechblog All Rights Reserved.