2013-01-10

[HTML/iPhone] 「ホーム画面に追加」のアイコン設定

iPhoneなどでよく見るサイトをホーム画面にお気に入り登録したときに
デフォルトでは画面プレビューになってしまうのですが、
これをオリジナルのアイコンにする方法です。

(1) 114ピクセル×114ピクセルの画像を作成し、PNGにて保存しておきます。
(2) 画像をルートディレクトリにアップ
(3) HTMLのheaderに以下を記述
  <link rel=”apple-touch-icon-precomposed” href=”アイコン名.png”>

  iPhoneでは光沢処理を自動で入れることも可能です!
  <link rel=”apple-touch-icon” href=”アイコン名.png”>

(4) さらにiOS6であれば、ホーム画面に登録するときのサイト名を設定することも可能。
  <meta name=”apple-mobile-web-app-title” content=”SiteTitle” />

  文字数は英数字で11文字、マルチバイトの日本語なら6文字が最大のようです。


アプリでなくてもスマホサイトがあるような場合は、アイコンを作っておくとよさそうです。
そしてホーム画面に登録してもらえるようなサイトを目指さないとダメですね~


参考サイト
http://case-mobile-design.com/%E3%80%90android%E3%82%B5%E3%82%A4%E3%83%88%E3%80%91%E3%83%9B%E3%83%BC%E3%83%A0%E7%94%BB%E9%9D%A2%E7%94%A8%E3%81%AE%E3%82%A6%E3%82%A7%E3%83%96%E3%82%AF%E3%83%AA%E3%83%83%E3%83%97%E3%82%A2%E3%82%A4/
http://maccle.com/my-tips/how-to-set-icon-and-title-when-bookmarked-in-iphone-home-screen/

Comment:

Trackback URL: