WordPressでファビコンを表示させる方法【初心者向け】

WordPressで【ファビコン(favicon)】を表示させる方法を初心者向けに解説した記事です。ファビコンとは、ブラウザ上のタブなどに表示されるサイトのアイコンです。テーマを編集する方法とプラグインを使う方法の2つを紹介しています。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

ブラウザ上のタブや、お気に入り一覧で表示されるそのサイトのアイコンを「ファビコン(favicon)」といいます。

TechAcademyマガジンのファビコンはこの画像のように表示されています。

fav1

 

ファビコンは単に装飾ではなく、ブランディング力向上や、クリック率UPの効果があるとも言われています。

WordPressでもファビコンを簡単に表示することができます。

なお本記事は、TechAcademyのWordPressオンラインブートキャンプの内容をもとに紹介しています。

 

大石ゆかり

田島メンター!!WordPressでファビコンってどうやって変更するんでしたっけ?

田島悠介

ファビコンを変更する方法は「テーマを編集する方法」と「プラグインで変更する方法」の2種類あるんだ。両方知っておいて損はないから、両方教えてあげるね。

大石ゆかり

はい、お願いします!!!

 

今回は、

の2つの方法に分けて紹介します。

 

 

事前準備:favicon用のファイルを作成する

まず、事前準備としてfaviconの画像を用意します。ファビコン用画像の作り方は簡単です。

画像はPhotoshopなどの画像作成ソフトで、正方形で作り、それをfaviconの形式(.ico)に変換します。

 

ファイルの変換はFavicon From Picsというサイトが便利です。

fav2
fav3

サイトにアクセスし、ファイルをアップすると変換してzipファイルのダウンロードが可能になります。

zipファイルを解凍したら、いよいよfaviconの設定を行います。

 

 

テーマファイルを編集する方法

FTPソフトを利用して、任意の場所にfaviconアイコン(拡張子が.ico)をアップロードする方法です。

今回は、WordPress本体と同じ階層にアップロードした前提で説明します。
(wpというフォルダの中にwordpressがある場合は、wpというフォルダの中にアップロードします)

 

次に、ダッシュボード>外観>テーマ編集をクリックします。

fav4

 

右側にたくさんテーマ用のファイルが羅列してあるので、その中の「ヘッダー(header.php)」をクリックします。

fav5

 

ソースコードが表示されたら、</head>を探してください。

fav6
見つかりにくい時はCtrlキー+F(Macの場合は⌘+F)を押すと、ページ内検索ができます。

 

ここで下記のソースコードをコピー&ペーストしてください。

<link rel=”SHORTCUT ICON” href=”http://ドメイン名/wp/ファビコン名.ico” />

日本語部分は、自分のサイトに合わせて変更しましょう。

Faviconファイルをアップロードした場所によって、href=” “の部分の表記が変わるので、注意が必要です。

 

完了したら、「ファイルを更新」ボタンを押すと、反映されます。

 

 

[PR] WordPressで挫折しない学習方法を動画で公開中

プラグインを利用する方法

テーマを直接編集するのは難しい、という場合はプラグインを利用すると便利です。

いろいろなプラグインがありますが、今回はFavicon Rotatorというプラグインを使用します。
まずは、このプラグインをインストールします。

やり方がわからない場合は、WordPressプラグインのインストール方法の記事を御覧ください。

 

インストールが完了したら、
ダッシュボード>外観>Faviconをクリックし、設定画面を開きます。

fav7

 

「Add Icon」というボタンをクリックし、faviconに設定したい画像を選択します。

fav8

 

ファイル形式やサイズは自動調整されるので、特に事前にファイル変換等はしなくても大丈夫です。

画像をアップロードしたら、ウィンドウ下部の「Add Browser Icon」をクリックします。

fav9

これでしばらくすると、faviconが反映されます。

反映に時間がかかる場合があるので、焦らず待ってみてください。

 

 

うまくいきましたか?

WordPressをさらにカスタマイズしたい場合は、WordPressでウィジェットを編集する方法の記事も合わせてご覧ください。

 

大石ゆかり

ファビコンを変更できました♪ありがとうございました!

田島悠介

ファビコンってとても地味だけど、サイトのイメージを表すからきちんと変更しておくことが大事だね♪

大石ゆかり

はい、そうですね♪

 

[お知らせ]TechAcademyでは、WordPressを使ってカスタマイズしたオリジナルサイトを構築できるWordPressオンラインブートキャンプを開催しています。期間中の8週間は現役エンジニアのメンターが毎日学習をサポートするので、独学よりも効率的に学ぶことができます。