(１)PNG形式の画像150px四方の画像を用意。
本家Apple.comに設置されているアイコンは、129 x 129ピクセル。（"http://www.apple.com/apple-touch-icon.png"を参照）
(２)画像ファイル名を「apple-touch-icon.png」としてサーバーのルートにアップ。
コンテンツに手を加える必要はなし。画像が存在していれば、iPhone/iPod touch/iPadが勝手にひろう。
完了。
<注意点>
iPod/iPhone/iPad上でアイコンへの変換時に、ハイライト、テカリ、シャドウが自動的に入ります。 角も丸く削られ、統一されたボタンらしいデザインにされます。 上半分に白いテカリが入り、色が浅くなってしまいます。コントラストを強めに作った方がよさそうです。 上端は自動的にハイライトが入り、白く飛びます。そのため、枠のあるデザインだと上辺が細く見えてしまう場合があります。 透明部分を設定しても、生かされません。黒く塗りつぶされます。
「上記のエフェクトのかからないアイコンを表示させる方法」
(１)ファイル名を「apple-touch-icon-precomposed.png」にする
完了。
※任意の場所に置いたアイコンを表示させたい場合は<head>タグの間に以下を記載。
<link rel="apple-touch-icon-precomposed" href="/xxxxxxxxxx.png"/>
<参考サイト>
iPhone/iPadのホーム画面用アイコンapple-touch-icon.pngをサイトに設定しよう
iPhone、iPod touch、iPad用Webクリップ用アイコンの作り方
0 件のコメント:
コメントを投稿