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

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

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

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

OSのバージョン ショートカットアイコンのサイズ
~iOS6 144×144
iOS7 152×152

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

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

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

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

html

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

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

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

サイト名 linkタグ サイズ
mobage rel=”apple-touch-icon” 144×144
GREE rel=”apple-touch-icon-precomposed” 512×512
yahoo rel=”apple-touch-icon-precomposed” 120×120
google rel=”apple-touch-icon” 120×120
114×114
57×57
ニコニコ動画 rel=”apple-touch-icon” 114×114

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

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

参考
[iOS7~]apple-touch-icon(Webクリップアイコン)のサイズ
http://aoicotori.hatenablog.com/entry/apple-touch-icon

PAGE TOP