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=” “の部分の表記が変わるので、注意が必要です。
完了したら、「ファイルを更新」ボタンを押すと、反映されます。
[PR] WordPressで挫折しない学習方法を動画で公開中
プラグインを利用する方法
テーマを直接編集するのは難しい、という場合はプラグインを利用すると便利です。
いろいろなプラグインがありますが、今回はFavicon Rotatorというプラグインを使用します。
まずは、このプラグインをインストールします。
やり方がわからない場合は、WordPressプラグインのインストール方法の記事をご覧ください。
インストールが完了したら、ダッシュボード>外観>Faviconをクリックし、設定画面を開きます。
「Add Icon」というボタンをクリックし、faviconに設定したい画像を選択します。
ファイル形式やサイズは自動調整されるので、特に事前にファイル変換などはしなくても大丈夫です。
画像をアップロードしたら、ウィンドウ下部の「Add Browser Icon」をクリックします。
さらに「設定を保存」ボタンをクリックします。
これでしばらくすると、faviconが反映されます。
反映に時間がかかる場合があるので、焦らず待ってみてください。
うまくいきましたか？
WordPressをさらにカスタマイズしたい場合は、WordPressでウィジェットを編集する方法の記事もあわせてご覧ください。
ファビコンを変更できました♪ありがとうございました！
ファビコンってとても地味だけど、サイトのイメージを表すからきちんと変更しておくことが大事だね♪
はい、そうですね♪
コスパとタイパ、両方結果的に良くなる良くなる学び方とは？
「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ
結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。
コスパ・タイパ最適化の参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困ったときに、質問や相談できる相手がいるため挫折しなかった
- ・プロとして必要なスキルのみを深く学べたので無駄がなかった
- ・副業案件の提供と納品までのサポートがあったので目的を達成できた
安価・短期間で広く浅く学んでも意味がありません。
本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に
無料相談
に参加してみませんか？
カウンセラー・現役のプロへ、何でも気軽に無料相談可能。
30分か60分お好きな時間が選べて、かつ3回まで
すべて無料で
ご利用できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
WordPressを学習中の方へ
これで解説は終了です、お疲れさまでした。
- つまずかず「効率的に」学びたい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
WordPressでのサイト制作を学習していて、このように思ったことはありませんか？
テックアカデミーのWordPressコースでは、第一線で活躍する「プロのエンジニア/Webデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、WordPressを使ったオリジナルサイト構築を学べます。
まずは一度、一週間の無料体験で学習の悩みや今後のキャリアについて話してみて、「現役のプロから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします。
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
