WordPressでファビコンを表示させる方法【初心者向け】
WordPressで【ファビコン（favicon）】を表示させる方法を初心者向けに解説した記事です。ファビコンとは、ブラウザ上のタブなどに表示されるサイトのアイコンです。テーマを編集する方法とプラグインを使う方法の2つを紹介しています。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
ブラウザ上のタブや、お気に入り一覧で表示されるそのサイトのアイコンを「ファビコン（favicon）」といいます。
テックアカデミーマガジンのファビコンはこの画像のように表示されています。
ファビコンは単に装飾ではなく、ブランディング力向上や、クリック率UPの効果があるとも言われています。
WordPressでもファビコンを簡単に表示できます。
目次
田島メンター！！WordPressでファビコンってどうやって変更するんでしたっけ？
ファビコンを変更する方法は「テーマを編集する方法」と「プラグインで変更する方法」の2種類あるんだ。
両方知っておいて損はないから、両方教えてあげるね。
はい、お願いします！！！
事前準備：favicon用のファイルを作成する
まず、事前準備としてfaviconの画像を用意します。
ファビコン用画像の作り方は簡単です。
画像はPhotoshopなどの画像作成ソフトで正方形で作り、それをfaviconの形式（.ico）に変換します。
ファイルの変換はFavicon From Picsというサイトが便利です。
サイトにアクセスし、ファイルをアップすると変換してzipファイルのダウンロードが可能になります。
zipファイルを解凍したら、いよいよfaviconの設定を行います。
テーマファイルを編集する方法
FTPソフトを利用して、任意の場所にfaviconアイコン（拡張子が.ico）をアップロードする方法です。
今回は、WordPress本体と同じ階層にアップロードした前提で説明します。
（wpというフォルダの中にWordPressがある場合は、wpというフォルダの中にアップロードします）
次に、ダッシュボード>外観>テーマエディターをクリックします。
右側にたくさんテーマ用のファイルが羅列してあるので、その中の「ヘッダー(header.php)」をクリックします。
ソースコードが表示されたら、</head>を探してください。
見つかりにくい時はCtrlキー＋F（Macの場合は⌘+F）を押すと、ページ内検索ができます。
ここで下記のソースコードをコピー&ペーストしてください。
<link rel=”SHORTCUT ICON” href=”http://ドメイン名/wp/ファビコン名.ico” />
日本語部分は、自分のサイトに合わせて変更しましょう。
faviconファイルをアップロードした場所によって、href=” “の部分の表記が変わるので、注意が必要です。
完了したら、「ファイルを更新」ボタンを押すと、反映されます。
プラグインを利用する方法
テーマを直接編集するのは難しい、という場合はプラグインを利用すると便利です。
いろいろなプラグインがありますが、今回はFavicon Rotatorというプラグインを使用します。
まずは、このプラグインをインストールします。
やり方がわからない場合は、WordPressプラグインのインストール方法の記事をご覧ください。
インストールが完了したら、ダッシュボード>外観>Faviconをクリックし、設定画面を開きます。
「Add Icon」というボタンをクリックし、faviconに設定したい画像を選択します。
ファイル形式やサイズは自動調整されるので、特に事前にファイル変換などはしなくても大丈夫です。
画像をアップロードしたら、ウィンドウ下部の「Add Browser Icon」をクリックします。
さらに「設定を保存」ボタンをクリックします。
これでしばらくすると、faviconが反映されます。
反映に時間がかかる場合があるので、焦らず待ってみてください。
うまくいきましたか？
WordPressをさらにカスタマイズしたい場合は、WordPressでウィジェットを編集する方法の記事もあわせてご覧ください。
ファビコンを変更できました♪ありがとうございました！
ファビコンってとても地味だけど、サイトのイメージを表すからきちんと変更しておくことが大事だね♪
はい、そうですね♪
WordPressを学習中の方へ
これで解説は終了です、お疲れさまでした。
- つまずかず「効率的に」学びたい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
WordPressでのサイト制作を学習していて、このように思ったことはありませんか？
テックアカデミーのWordPressコースでは、第一線で活躍する「プロのエンジニア/Webデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、WordPressを使ったオリジナルサイト構築を学べます。
まずは一度、一週間の無料体験で学習の悩みや今後のキャリアについて話してみて、「現役のプロから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします。
