ベーシックな設置方法とdata URI schemeを使った方法

hedear.phpをカスタマイズする基本的なやり方

WordPressにfaviconを設置します。

テーマを構成するファイルの一つhedear.php内のheadタグ内に下の一行を追加することでfaviconを設置可能です。

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

このやり方の場合はテーマのルートディレクトリにfavicon.icoを配置しておく必要があります。

header.phpのカスタマイズする際には、子テーマを活用するのがおすすめです。

wp_headアクションフックを利用したやり方

テーマの関数をコーディングするfunctions.phpを使ってfaviconを設置することも可能です。

functions.phpの最後に下の関数を追加します。

function add_favicon()
{
  $favicon='<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico" />';
  echo $favicon;
}

add_action('wp_head', 'add_favicon');

この方法は、header.phpの

<?php wp_head(); ?>

にfaviconを表示するHTMLを出力します。そのため、wp_head()の記述が無いテーマだとHTMLが出力されないので、その場合にはwp_head()を追加する必要があります。

data URI schemeでfaviconを表示

favicon.icoへのHTTPリクエストを減らす

上の2つの方法の好きな方を利用してfaviconを表示することが出来ますが、data URI schemeを使って外部データを参照せずに、faviconを追加することが可能です。

data URI schemeを使えばHTTPリクエストが発生しないので、パフォーマンス面で有利に作用すると言われています。

これまでfavicon.icoを設置せずにブログを運用してきたのですが、faviconに対する連続的なHTTPリクエストを送信するブラウザがあるため、faviconをdata URI scheme化する方法はパフォーマンスアップに有効と考えられます。

data URI schemeコンバーター

既存の画像をdata URI schemeに変換するツールがあります。Webで検索したところImage to data URI convertorがヒットしました。

画像を変換してfaviconを表示するHTMLに組み込んだのが下の状態です。

<link rel="shortcut icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAbSURBVDhPYzix/zlJaFQDMWhUAzFo0GnY/xwAi9huHx5lHSgAAAAASUVORK5CYII=" />

IE7対応

IE7はdata URI scheme未対応なので、PHPで分岐処理をしてあげます。

if( strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE 7.0') )
{
  $output='<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico" />';
}
	
else
{
  $output='<link rel="shortcut icon" href="data:image/png;base64,iVBORw.......AAASUVORK5CYII=" />';
}