【WordPress】ファビコン(favicon)を表示させる簡単な方法

ファビコンはブラウザのタブなどで表示されるアイコンのことで、クリック率やブランディングに効果があると言われています。
ファビコンの設置方法は非常に簡単なので、できれば設置しておきたいものです。

そこでこの記事ではファビコンの設置における、簡単な方法を2つ解説していきます。




favicon画像の準備

画像の準備

まずはファビコンに設定する画像の準備をします。

ワードプレスにおいてファビコン用の画像は幅512px×高さ512px以上が推奨となっています。
ファイルはPNGがオススメです。

この記事では『Adobe Illustrator CC』で作成しています。
素材などをダウンロードした画像でもファビコンとして使用できますが、できれば他のサイトと被らないオリジナルの方がいいでしょう。

メディアに画像を読み込む

作成した画像をワードプレス管理画面のサイドバーにある『メディア』から読み込んでいきます。
メディア画面より『新規追加』をクリックし、ファイルをアップロードします。

アップロードしたファイルのURLは後で使用するため、コピーをとっておきましょう。
これで準備は完了です。

テーマファイルの編集で設置する方法

ワードプレスではテーマファイルのheader.phpを編集することでファビコンの設置ができます。

header.phpへ移動

ワードプレス管理画面のサイドバーにある『外観』の中の『テーマの編集』をクリックします。
テーマの編集画面へ移行後、右側のテーマファイルの中の『テーマヘッダー』を選択します。

ファビコンの設置はこの『header.php』を編集していきます。

header.phpの編集

まずはheader.phpの中にある『</head>』を探します。
この</head>の前に

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

というコードを入れ込みます。
※ファビコンの画像のURLという部分はメディアに入れたファビコン用画像のURLに置き換えてください。

編集が完了したら『変更を保存』をクリックします。
ブラウザで確認するとfaviconが表示されていることが確認できます。

※変更が反映されない場合はブラウザの履歴をクリアするなどを試してしてみてください。

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

ファビコンの設置のもう一つの方法がプラグインを使用した設置です。

Favicon Rotatorのインストール

ワードプレス管理画面のサイドバーから『プラグイン』を選択し、『新規追加』をクリックします。
新規追加画面で”Favicon Rotator”と検索し、プラグインの『今すぐインストール』のボタンをクリックします。

インストールが完了したら『有効化』しておきましょう。

Favicon Rotatorの設定

Favicon Rotatorの有効化が完了したら、ファビコンの設定を行います。

ワードプレス管理画面の『外観』の中にある『Favicon』をクリックします。
これでFavicon Rotatorの画面へ移行するので、ここで『Add Icon』をクリックします。

アイコン画像を設定する画面に切り替わるので、ここで先ほど入れた画像を選択します。
選択が完了したら下部にある『Add Browser Icon』をクリックします。

この後Favicon Rotatorのメイン画面に戻るので『Save Changes』をクリックすれば完了です。
ブラウザで確認するとファビコンが表示されていることが確認できます。

まとめ

この記事ではファビコンの設置方法についてお伝えしました。

〈ファビコンの設置方法〉

テーマファイル編集を行い設置する
プラグインを入れて設置する

2種類の方法を紹介しましたが、どちらも初心者でもできる簡単な内容となっています。
(どちらも簡単なので、エラーを防ぐためプラグインを入れるよりテーマファイルを編集する方法がオススメです。)

ファビコンはブランディング効果としても設置しておいた方がいいので、ぜひチャレンジしてみて下さい。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA