WordPressのファビコン設定は3分で出来ます！

公開日： 2015/03/03 : 最終更新日：2015/06/08 マークアップ

ワードプレスのファビコン設定方法を知りたい

このブログもそうですが、WordPressで作成されたサイトのファビコン設定。
なんか難しいのかなー？という方のため、3分で出来るようご説明を。

ファビコンとは？

難しい説明はやめにして、簡単にいうと、このブログを見ているブラウザの最上部アドレスバーやタブ内に下の画像のように表示されているものがファビコンです。

そうです。この小さなアイコンがファビコンです。

ではワードプレスに設定をしましょう。

ここからの流れにそって進めて下さい。
非常に簡単な流れですから、誤りないよう注意して下さい。

正方形の画像を用意します。

一般的なファビコンであれば64px四方サイズで十分です。
多少大きい分には後で整形できますので問題ありません。
ここでは、
dondon_icon
上記のような画像を用意してみました。
各自、正方形の画像を用意して下さい。（png、gif、jpg画像）

ツールにアップして、ファビコン用ファイルにします。

前項で用意した画像を変換ツールでファビコン用に変換します。
次の無料ツールを利用します。
http://favicon.qfor.info/c/
上記サイトへアクセスしたら、
icon_sakuseihouhou
画像ファイル：準備した画像を読み込ませましょう。
オプション：特別なこだわりがなければ「16pxにリサイズ」を選びます。
短い辺に合せてカットする(トリム処理)：チェックせず（正方形画像を用意しているのでチェック不要）
減色しないを選択。

最後に「アイコンを作成」ボタンをクリックすることで、アイコン画像がダウンロードされます。

ファイル名を変更しよう

例では、ファイル名が「54f5538c7b99f.ico」になりました。これを
「favicon.ico」に変更します。
ランダムな文字列をfaviconに変更するだけです。

サーバーにアップしよう

では、用意したアイコンファイルをサーバーにアップしましょう。
通常は、WordPressをインストールしたディレクトリにアップします。
upsaki1
上記画像のように、WordPressのindex.phpやlicense.txtと同列に並ぶ階層にアップしています。
これで完了です。

上手くいかない場合には、テーマフォルダの中にアップしてみましょう。
upsaki2
あなたのWordPressをインストールしたサーバーの
/wp-content/themes/theme-name
へアクセスします。（※theme-nameにはあなたが有効化しているテーマの名前が入ると思います。）
上の画像のようにfunction.phpと同列にアップすればOKです。

正しいマークアップをしたい場合・まだファビコンが表示されない場合

ここでは、テーマフォルダ内にアップした場合を想定しています。（/wp-content/themes/theme-nameへアップした場合を想定）
次の1行をhead内に記載しましょう。

<link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/favicon.ico" />

typeまで正しく記述する場合には、下のように記述します。

<link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/favicon.ico" type="image/vnd.microsoft.icon" />

多くのWordPressテーマでは、header.phpファイルにheadタグがあるかと思いますので、headと/headの間に1行加えましょう。場所はどこでも良いですが、さほど重要なタグではないため、出来るだけ後方にしましょう。

※ここまでの説明では分かりづらい方のために、実際に追加したソース例を。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title></title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="all" />
<?php wp_head(); ?>
<link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/favicon.ico" />
</head>

上記のように/headの直前でOKです。

補足

ファイルをアップしたり、head内に上書きした際、ファビコンが正常に反映されているか確認するため、数回ブラウザを更新しましょう。（あなたのサイトを見ている状態でF5ボタンを押すと再読み込みが掛かり、更新されます。）
通常、ファビコンが読み込まれるのに数回の更新を必要とする場合があります。これは古いキャッシュ（情報）が残っているため発生するもので、正常です。

この設定に因るSEO効果はありませんが、ファビコンがあるとブックマークから見つけやすく、ブログのイメージが濃くなり再訪問も増える効果を期待出来ますね。