WordPressプラグイン「WPTouch」のwebクリップ&スマホページのファビコン変更方法

「HTML5＋CSS3で作る魅せるiPhoneサイト iPhone/iPad/iPod touch対応」という本を読んでいるのですが、その中に

「ホーム画面用のアイコン指定方法」

というのがありました。

iPhoneで「webクリップ」と呼ばれている機能らしいです。まずその説明から。

webクリップとは？

MobileSafariの機能の一つ。
設定方法は簡単。

MobileSafariでサイトを開いてブラウザ下の四角い部分をタップします。

「ホーム画面に追加」をタップ。

このようにデスクトップ上にショートカットが！
（「ホーム画面に追加」の後にアイコン名は選択できます。上記はデフォルトの状態）

webクリップアイコンの変更方法（wptouch.ver）

通常のスマートフォン向けサイトであればタグを記述して指定するのですが、WordPressのスマートフォン向けサイト最適化プラグイン「wptouch」ではオプションでこの変更が可能です。

その手順を説明します。

1.メニューの「設定」→「WPTouch」を選択

2.「Default & Custom Icon Pool」という箇所があるので、そこの「Upload」の部分をクリックし、任意のアイコンをアップロードします。

If you’re adding a logo icon, the best dimensions for it are 59x60px (png) when used as a bookmark icon.

（59×60pxのpng形式のものが好ましそうです。自分は単色なので適当なサイズでアップしちゃいました）

3.「Logo Icon // Menu Items & Pages Icons」で使用するロゴを選択

※もしかするとアップロード直後には表示されないかもしれないので、その場合、画面一番下の「Save Options」で一旦設定を保存すると表示されます。

4.設定を保存して、完了。

実際の表示

スマホサイトのファビコン。

左：変更前/右：変更後
ページ上部のファビコン部分が変わってます。

左：変更前/右：変更後
デスクトップはこんな感じに。

その他オプションに関して

「Logo Icon // Menu Items & Pages Icons」の最初のオプション「If you do not want your logo to have the glossy effect added to it, make sure you select Enable Flat Bookmark Icon」ですがアイコンに光沢を持たせるか持たせないかの選択です。

初期がチェックボックス未設定（光沢あり）。チェックボックスを入れると光沢なしに変化します。

違いはこんな感じ。