[WP] FaviconがSafariとChromeで違うものが表示されている

相変わらず Stinger 3 との格闘が終わらない @azur256 です。今日も新テーマにしてからのカスタマイズミスをみつけてしまいました。

Faviconが違う！

ふとしたキッカケで気づいたのですが、Chrome と Safari で表示されている Favicon が違っていました。

こちらが Chrome です。

こちらが Safari

まったく想像もしていなかった出来事だったので何が起こっているのかサッパリわからず、一瞬思考停止しました。
気を取り直してソースを見直したところ…

Faviconの設定が2つあることが判明。

一つがオリジナルの Favicon の設定

<link rel="shortcut icon" href="http://azur256.com/wordpress/wp-content/themes/stinger3ver20130925/images/rogo.ico" />

1	<link rel="shortcut icon" href="http://azur256.com/wordpress/wp-content/themes/stinger3ver20130925/images/rogo.ico" />

もう一つは自分で functions.php で追加している Favicon の設定。

この 2 つが違うものを指し示していた結果、先に宣言されている方を有効にするのか、後に宣言されている方を有効にするのかがブラウザによって異なってしまい、表示が違ってしまったようです。

今回は header.php で宣言されているオリジナルの以下の行を削除することにしました。

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

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

この結果、無事に Safari でも期待した Favicon が表示されるようになりました。

これだけ直すのは悔しかったので…

ついでと言ってはなんですが、同じアイコンがらみということで、ノリロウさん (@norirow) のエントリしていたiPhone のホーム画面用のアイコンの設定も同時に行いました。

今更だけどブログのアイコンをiPhoneのホーム画面で表示できるようにしてみた。

114x114px のファイルを用意して子テーマの functions.php でヘッダに追加する関数を追加しました。

// Add apple-touch-icon
add_action('wp_head', 'addAppleTouchIcon');
if(!function_exists('addAppleTouchIcon')):
	function addAppleTouchIcon() {
		echo '<link rel="apple-touch-icon-precomposed" href="/images/Profile-07-114.png" />' . "\n\n";		
	}
endif;

// Add apple-touch-icon

add_action('wp_head', 'addAppleTouchIcon');

if(!function_exists('addAppleTouchIcon')):

function addAppleTouchIcon() {

echo '<link rel="apple-touch-icon-precomposed" href="/images/Profile-07-114.png" />' . "\n\n";

}

endif;

これでOKと思って実行してみたのですが、なぜか画像が変わりません。

PC のブラウザでソースを見ても特におかしなところはありませんでした。でも、アイコンが変わらないということは、先ほどの Favicon 同様に２重定義されているかもしれませんので、テーマの中のソースを全て検索してみたところ header.php に記載がありました。しかも、スマートデバイスの時だけ出力されるようになっていました。

header.php の以下の記載をコメントアウトします。

<link rel="apple-touch-icon-precomposed" href="<?php echo get_template_directory_uri(); ?>/images/apple-touch-icon-precomposed.png" />
<meta

<meta

どうせ header.php を修正するのだし、PC 版には不要な行なのだから header.php を直接修正してもイイかも、と思ったのですが、将来別のテーマに移動する時にできるだけ自分のカスタマイズをそのまま持っていきたいので、敢えて functions.php で拡張するようにしました。

これで正しく表示されるようになりました。