WordPressにfaviconとiOS用アイコンを追加[追記あり]

2012年4月18日2016年1月23日iPad/iPod/iPhone,Web-log・ココログ関連,WordPress

iPod touchで、アメブロで芸能人ブログを見ていて、「ホーム画面に追加」ってすると、プロフィール写真がアイコンになります。

これって、どういう仕組みなのかな〜と思っていたら、わかりました。

Safari Web Content Guide: Configuring Web Applications

webページのヘッダ部分に、次の様に書いておけば良いみたいです。

<link rel="apple-touch-icon" href="http://example.com/custom_icon.png" />

WordPressで、ヘッダ部に記述を追加するのは実現するにはどうすれば良いのかを調べたら、次のwebページを見つけました。ありがとうございます。

WordPress のよくあるカスタマイズコード functions.php 多め
7. ファビコンを表示する

なるほど、functions.phpに書いておけば、スマートに設定できるのか!

このサイトの作者さんは、他にも色々WordPressのカスタマイズ技をまとめられていて、非常に参考になります。

favicon自体については、次のWikipediaを参考にしました。日本語版よりも充実しています。iOSのアイコンの事も、ここで知ったのです。

Favicon – Wikipedia, the free encyclopedia

IEとそれ以外のブラウザで共通に使える様にし、かつweb標準に従う様にしようとすると、面倒ですね。

結局、favicon.icoをルートフォルダに置いて、faviconは次の様に指定する事にしました。

<link rel="icon" type="image/vnd.microsoft.icon" href="http://example.com/favicon.ico" />

そして出来上がったのが、次のコードです。これを、functions.phpに追加しておきます。

add_action('wp_head', 'theme_blog_favicon');
function theme_black_blog_favicon() {
        switch_to_blog(1);
        echo '    <link rel="icon" type="image/vnd.microsoft.icon" href="'.home_url().'/favicon.ico" />'."\n";
        echo '    <link rel="apple-touch-icon-precomposed" href="'.home_url().'/img/custom_icon.png" />."\n";
        restore_current_blog();
}

(追記 2012-04-19 02:51)私の場合、マルチサイトで運用しており、統一したアイコンを使用したかったので、親ブログに切り替えた後で、home_url()を取得しています。

こうやって登録したあと、iPod touchでアクセスし、「ホーム画面に追加」を選びます。