iPhone用のfavicon(apple-touch-icon)を設定する方法

faviconを設定する人は増えてきましたが、意外と忘れられているのがiPhone用のfavicon。

faviconを設定したら、iPhone用のfaviconも設定しましょう。

faviconとは、このタブの左に表示されているアイコンです。


favicon

あなたのブログのショートカットを、お客様のiPhoneのホーム画面やブックマークに設定してもらえたら嬉しいですよね。

こんな感じ。
1 2

iPhone用のfaviconを設定していないと画面のキャプチャ画像になってしまいますので
是非あなたのサイトだと一目でわかるシンボルマークで設定しましょう。
アプリのようで嬉しい!

iPhone用のfaviconは、
[apple-touch-icon.png]というファイル名で、114px × 114px の大きさで画像を準備しましょう。

favicon.icoをテンプレートの画像フォルダなどにアップロードします。


apple-touch-icon.pngはルートディレクトリ(wp-contentなどがあるディレクトリ)にないとダメでしたので、
FTPでファイルをアップロードします。

WordPressのテーマの中に、header.phpというファイルがあります。
その上部に以下の記述を追記します。既に入っている場合もあるので良く見てくださいね。

<link rel="icon" href="<?php echo get_template_directory_uri(); ?>/images/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/images/favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon" href="apple-touch-icon.png" type="image/png">

お試しください。