WordPressでファビコンを変更する方法

WordPressでファビコンを設定する方法をご紹介します。
『WordPress』と限定はしていますが、通常のサイトやブログでも
同様の方法で設定できますので、参考にしてもらえればと思います。

そもそもファビコンとはURL入力欄や、表示タブに表示されるサイトのアイコンのようなものです。
パッとタブの並びを見たときに、アイコンでどこのサイトかが判別できます。
（後は作る側の好みの問題だったりもしますが・・・）

今回はWordPressのプラグインは使いません。
プラグインは便利なんですが、色々な所に依存して、サイトの動作が
遅くなってしまうのは嫌なので。

というわけで、早速設定方法です。

１．ファビコンの画像を用意する
ファビコンに設定したい画像を作成します。
作成サイズは32×32でOKなんですが、私は実際に表示されるサイズが16×16なので
16×16で作成しています。
こちらに関しては、初めから16×16で作成する必要はありません。

今回は、『縮小専用。』というアプリを使って
こちらの画像を

※不遇の僧侶「リフ」さん。

16×16まで縮小しました。

画像ができたら、ファイル名を

favicon.ico

に変更します。

２．ファイルをアップロードする
WordPressの場合は、使用しているテンプレート内のディレクトリに
ファイルをアップロードします。

/wp-content/themes/xxxx　←『xxxx』の部分がテーマの名前

ここがテンプレートごとのディレクトリになります。

ここに先程作成したfavicon.icoをアップロードします。

通常はここにファイルをアップロードしますが、
テンプレートによっては
/wp-content/themes/xxxx/images
/wp-content/themes/xxxx/img
等、テンプレート用の画像ディレクトリが存在する場合もあるので
そちらは管理しやすい方で適宜修正して下さい。

３．ヘッダにタグを書く
WordPressの管理画面内に入り
『外観』　→　『テーマ編集』　から
header.phpを選択し、編集画面を開きます。
※ファイルを直接編集可能な場合はそちらかどうぞ

header.phpを開いたら、

</head>タグの直前の行に以下を追加します
<link rel=”shortcut icon” href=”ファビコンのファイルがある場所のパス/favicon.ico”>

WordPressの場合は、

<?php bloginfo(‘template_directory’); ?>

上記で『使用しているテンプレートのディレクトリ』という意味で、表示するときに
自動的に置き換えをやってくれるので、

<link rel=”shortcut icon” href=”<?php bloginfo(‘template_directory’); ?>/favicon.ico” />

このタグを記述し、保存します。

※既にファビコンが設定されているテンプレートの場合は、<header>～</header>の間に
既存のタグが記述されている場合がありますので、重複しないようにして下さい。

備考
『設定したのにファビコンが表示されない！！！』

と言う人は、ファビコンのURLを直接入力して、画像が参照できるか確認して下さい。
WordPressの置き換えタグを使った場合は、ブラウザでページを開いたら、
右クリックで「ソースを表示（ブラウザによって記述は違います)」を選択して
ページ内のHTMLのソースを確認して、生成されたファビコンのURLを確認して下さい。

直接URLを入力しても画像が出なかったり404 Not Foundとなってしまう場合は、
画像が正しくアップロードされていない可能性があります。
アップロードした場所等を再度確認して下さい。

『画像が見れるのにファビコンが表示されない』 or　『ファビコン画像が古いまま』

という人は、おそらくブラウザのキャッシュなので、
オプションや設定（これもブラウザにより異なります）から
キャッシュを削除してブラウザを再起動して再度アクセスしてみて下さい。

あと、ブックマークに古いファビコンの状態で登録してある場合は、
再登録しないとファビコンが更新されない場合があります。

というわけで、以上ファビコンの設定方法でした。