ファビコンを簡単に設定する方法!ワードプレス・賢威

ファビコンて何のことかご存知ですか?

ウエブブラウザのアドレスバーとかタブのところに表示される「小さいアイコン(画像)」のことです。

favicon-001

私のサイトの場合、最初に設定されているのはこのマークでしたが、これをオリジナルデザインに変更しました。

現在はこのように表示されています!

favicon-002

ファビコンを自分だけのオリジナルなものにすると、他のサイトの差別化もできて、サイトに来てくれた方にも覚えてもらいやすくなります。

設定方法もとても簡単なので、よかったら是非導入してみて下さいね。

では、私の使っているワードプレスのテンプレート「賢威6.2」で、ファビコンを簡単に変更する方法をご紹介します。


賢威で簡単にファビコンを設定する方法

ファビコンに使いたい画像を準備

ファビコンに使う画像を用意します。必ず正方形の画像にしてください。

ファビコンのサイズは 「16px x 16px」 なので、それ以上のサイズを選びましょう。

私は「100px x 100px」のサイズを使用しました。


画像をアップロードしURLをコピー

favicon-003

その画像を メディアファイルから WordPress にアップロードし、画像のURLをコピーしておきます。

注意:四角の枠から見えている部分だけではなく、URLの全てをコピーしてくださいね。

テーマ編集のヘッダーファイルを変更

1. サイドバーから、「外観 – テーマの編集 – ヘッダー(header.php)」 ファイルへ

favicon-004

2. ヘッダーファイルから、下記のコードを見つけ、赤字の部分をファビコン用に保存した URL に変更します。

favicon-006

favicon-007

3. Header.php ファイルの「ファイルを更新」をクリック。


これで完了です!

テーマ編集で PHP ファイルを変更する時に忘れないで欲しいポイントがあります!



テーマ編集で php ファイルの内容を変更する時は、あらかじめ、その該当ファイル全部をテキストエディターなどにコピペしておくことを忘れないようにして下さいね。
(今回の場合だと、Header.php のファイルのページを全部ということです)

万が一、コードを変更する時に間違えた場合でも、オリジナルがあればすぐに元に戻して、最初からやり直すことができますので安心です!



通常、変更したファビコンが反映されるまで、少し時間がかかります。

なかなか変更されない場合は、ブラウザのキャッシュを削除してみてください。

サブコンテンツ

このページの先頭へ