Webクリップアイコンに関する Tips

Web Clipアイコンはスマートフォンのブラウザの機能の一つで、ユーザがブラウザの設定・メニュー等から、Webサイトへのショートカットをホーム画面上に追加した場合にアイコンが表示されます。
Web Clipアイコンに対応したiOS、Android端末では任意の画像をWebクリップアイコンとして表示させることができます。
ホーム画面にショートカットが作成されることで、ユーザがパートナー様のアプリを起動することが容易になり、起動回数の増加が見込めますので是非実装をご検討ください。

 

実装方法

画像のファイル名を"apple-touch-icon.png"とし、png形式でルートディレクトリに画像を保存していただいてから、HTMLのheaderに以下を挿入してください。
rel値は下記記載の通りこのまま、リンク先URLは絶対パスでご指定ください。

<head>
<link rel="apple-touch-icon-precomposed" href="http://example.com/apple-touch-icon.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://example.com/apple-touch-icon.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://example.com/apple-touch-icon.png">
</head>

 

デフォルトアイコン

アプリにてアイコン画像を設定していない場合は各プラットフォームのデフォルトアイコンが表示されます。

例)mobageデフォルトアイコン

例)mixiデフォルトアイコン


参考資料

Safari Web Content Guideの詳細はこちらをご確認ください。

 

更新履歴

  • 2014/1/15
    • 新規作成

PREVIOUS

TextdataAPIの使い方

NEXT

タイムアウトに関する Tips