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

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

※当ブログでは商品・サービスのリンク先にプロモーションを含みます。ご了承ください。

takato(@n8takato)です!

WordPressでファビコンを設定する方法が知りたい

この記事は上記の課題に向けて作成しています。

WordPressでは簡単にファビコンを設定することが出来ます。

ファビコンの設定方法を知らないという方は是非読んでください。

この記事を読むメリット

  • WordPressでファビコンを設定する方法がわかる

この記事を書いた人

この記事を書いた僕はこんな人です!

  • 都内制作会社でwebデザイナー・webディレクターとして勤務
  • webデザイナー3年、webディレクター1年目
  • web制作現場で学んだことを発信している人
目次

ファビコンとは何か?

始めにファビコンについて説明します。

ファビコンとは?

  • タブ上に表示されるロゴ

ブラウザでサイトを見る際、タブ上にロゴが表示されます。

ファビコンを設定することでロゴが表示されるようになります。

※ファビコンを設定すると、ブックマークに登録された際ブックマーグバーにもファビコンが表示されます。

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

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

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

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

  • WordPress本体の機能で追加する
  • 「functions.php」を編集して追加する
  • プラグインで追加する

WordPress本体の機能で追加する

1つ目はWordPress本体の機能で追加するを使った方法です。

WordPressにはファビコンを設定出来る機能が既に存在します。

①WordPressの管理画面から「外観」→「カスタマイズ」を選択します。

WordPressの管理画面から「外観」→「カスタマイズ」を選択します。
「カスタマイズ」の選択

するとサイトのトップページが表示されます。

するとサイトのトップページが表示されます。
サイトのトップページ

②「WordPress設定」→「サイト基本情報」→「サイトアイコン」を選択。

この状態で「WordPress設定」→「サイト基本情報」→「サイトアイコン」を選択します。
「サイトアイコン」の表示

③画像をアップします。

ファビコンをアップロードします。アップロードした画像はファビコンとして設定されます。
アイコンのアップロード

アップロードした画像がファビコンに設定されます。

「functions.php」を編集して追加する

2つ目は「functions.php」を使った方法です。

※「functions.php」はWordPressの中心的なファイルになります。記述を間違えるとサイトが正しく表示されなくなることもあります。プログラミングに詳しくない方にはおすすめしない方法です。

①管理画面より「外観」→「テーマファイルエディター」を開きます。

WordPressの管理画面から「外観」→「テーマファイルエディター」を選択します。
「テーマファイルエディター」を開く

②続いて「編集するテーマを選択」から子テーマを選択します。

「編集するテーマを選択」から子テーマを選びます。
子テーマの選択

※子テーマの「functions.php」を編集します。親テーマの「functions.php」に記入すると、テーマ更新時に記述が消えてしまいます。そのため子テーマを選ぶようにしてください。

③子テーマを選択した状態で「functions.php」を選びます。

続いて「functions.php」を選択します。
「functions.php」の選択

※テーマによっては「header.php」に記述する場合があります。「header.php」がある場合はそちらに記述してください。

④「functions.php」の<head></head>の間に下記コードを記入します。

<link rel=”shortcut icon” href=”ファビコン画像のリンク”>

※「ファビコン画像のリンク」はメディアライブラリからファビコンを選択するとURLをコピー出来ます。

「メディアライブラリ」からファビコンにしたい画像を選択するとURLが表示されます。
画像URLのコピー

⑤上記コードを記入したら「ファイルを更新」を選択します。

「ファイルを更新」を選択します。
「ファイル更新」の選択

これでファビコンが設定されます。

プラグインで追加する

3つ目はプラグインを使った方法です。

使用するプラグインは下記のものになります。

使用するプラグイン

  • Favicon Rotator

①WordPress管理画面より「プラグイン」→「新規追加」を選択します。

WordPressの管理画面より「プラグイン」→「新規追加」を選択します。
プラグインの新規追加

②プラグインの検索から「Favicon Rotator」を検索します。

「プラグインの検索」から「Favicon Rotator」を検索します。
プラグインの検索

③「今すぐインストール」を選択します。

「Favicon Rotator」が表示されたら「今すぐインストール」を選択します。
「Favicon Rotator」のインストール

④「有効化」を選択します。

インストールを終えたら「有効化」してください。
「Favicon Rotator」の有効化

⑤WordPress管理画面から「外観」→「Favicon」を選択します。

続いてWordPress管理画面から「外観」→「Favicon」を選択します。
「Favicon」の選択

⑥「Browser Icon」からファビコン画像を追加します。

「Browser Icon」からファビコンをアップロードします。
「ファビコン」のアップロード

最後に「設定の保存」を選択します。

アップロードした画像がファビコンとして設定されます。

※「Touch Icon」はスマホのホーム画面用のアイコンです。こちらも画像をアップロードするだけで表示されるようになります。

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

ファビコンの画像を用意する方法は2通りあります。

ファビコン画像の用意

  • デザインソフトで自作する
  • 素材サイトからダウンロードする

デザインソフトで自作する

1つ目はデザインソフトで自作する方法です。

Illustratorなどのデザインソフトで作成することが出来ます。

※ファビコンはシンプルなものが多いので作るのが簡単そうに見えますが意外と大変です。ロゴデザインの制作経験が無いと少し大変かもしれません。初心者の方には次の方法をおすすめします。

あわせて読みたい
【illustratorとは?】できることを紹介します! Illustratorで出来ることを知りたい この記事は上記の課題に向けて作成しています。 これからIllustratorを使う方向けに、Illustratorで出来ることを紹介します。 Illus...

素材サイトからダウンロードする

2つ目は素材サイトからダウンロードする方法です。

フリーの素材サイトを使用することで無料でダウンロード出来ます。

僕がおすすめする素材サイトは「icooon-mono」です。

「icooon-mono」は無料で使用出来ます。ファビコンの種類が豊富でおすすめです。
icooon-mono

種類が豊富なのが特徴です。

自分で作るのが大変という方はこちらのサイトをご利用ください。

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

ファビコンを設定するメリットは「サイトのブランディングに役立つ」です。

ファビコンはブランドイメージに直結する

会社には「ロゴ」が存在します。

ロゴの仕上がりによってその企業の認知度やイメージに影響が生じます。

フォビコンは「webの世界のロゴ」になりますので、サイトのイメージに何かしらの影響をもたらします。

※企業ロゴとは異なりファビコンは「日頃から目にするものでは無い」です。そのため企業ロゴほどの影響力はありません。あくまでブランディングに役立つくらいの感覚で考えていてください。

WordPressにファビコンを設定するのは簡単

最後にまとめです。

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

  • WordPress本体の機能で追加する
  • 「functions.php」を編集して追加する
  • プラグインで追加する

ファビコンの設定はWordPress本体の機能を使うことをオススメします。

まだ設定していない方は是非やってみてください。

あわせて読みたい
現役webデザイナーがオススメするスクール3選! webデザインを学ぶのにオススメなスクールを知りたい この記事は上記の課題に向けて作成しています。 webデザインが学べるスクールがいくつか存在します。 その中でオス...
あわせて読みたい
WordPressのバージョンを確認する方法を紹介! WordPressのバージョンを確認する方法を知りたい この記事は上記の課題に向けて作成しています。 WordPressでは簡単にバージョンを確認する事が出来ます。 バージョンを...
あわせて読みたい
WordPressのcssはどこ?わかりやすく説明します! WordPressはどこでcssを記述すれば良いの? この記事は上記の課題に向けて作成しています。 WordPressはcssを記述してカスタマイズすることが出来ます。 cssの記述場所...
  • URLをコピーしました!
目次