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">

お試しください。


▼▼お役立ち電子書籍無料ダウンロード中▼▼

田尻 佐和子
未来のお客様が集まるヒットルートを創る
集まる集客®WEBプランナー
田尻佐和子です。
2013年8月より集まる集客®プロデューサーズラボラトリーにて活動しています。
与える達人となり、「花よりも花を咲かせる土になれ。」をモットーに、
WEBが苦手というだけで、ツールやシステムをうまく活用できない方のために下支えし、
ご自身の専門の研究に時間を使って欲しいと思っています。
世の中の人の役に立ちたいと熱い思いを持った起業家のために、パソコン操作・Facebook・WordPress・アメブロ・エージェントメール・PayPal・Skype・Gmail・Evernote・Keynoteなど、集まる集客に必要なツールの用語解説、操作方法、活用方法などを誰よりも優しく解説しています!
無料電子書籍「いつも時間に追われる集客の 超時短術」
▼ダウンロードはこちらから▼