スマートフォンのホーム画面に表示させるショートカットアイコンのサイズと設置方法

既知ですが、スマートフォンはブラウザのブックマークだけでなく、ホーム画面にサイトへのショートカットアイコンを設定できます。
このショートカットアイコンは、PCのファビコンと一緒に作ってしまうのが流れ的にも忘れることが少なくなるので、よいのかなと思います。

ショートカットアイコンが設定されていない場合は、そのページのスクリーンショットがショートカットアイコンとして自動的に設定されます。
スクリーンショットがショートカットアイコンではあまりにも寂しいので、ここは独自のショートカットアイコンを作ってしまいましょう。

ショートカットアイコンの作り方

気をつけるところはサイズだけです。

iOS7になったことで、今までとサイズが若干異なっています。
各OSに適したサイズのアイコンにリサイズをしてくれるので、小さすぎなければ問題は無いのかなと思います。

また、角丸(r)は自動的に取ってくれます。

ショートカットアイコンの設置方法

ショートカットアイコンの設置方法は、linkタグに記述するだけです。

/*アイコンに光沢あり*/
<link rel="apple-touch-icon" href="アイコンのURL">

/*アイコンに光沢なし*/
<link rel="apple-touch-icon-precomposed" href="アイコンのURL">

大手サイトのショートカットアイコンの設置方法とサイズも調べてみました。

意外にも全てのサイトのサイズはバラバラでした。
光沢なしはGREEとyahooのみでした。
googleは3サイズ用意して、よりデバイスに最適なサイズを選択させていますね。

iOS7になり、ホーム画面のショートカットアイコンがフラットデザインになった関係上、アイコンの光沢をなくすため、apple-touch-icon-precomposedをつけなくても光沢はつかなくなったようです。