WEBクリップ用のアイコン

iPhoneディスプレイ画像iPhone、iPod touch、iPadなどで表示されるアイコンの事です。
ホーム画面に、ウェブサイトやアプリケーションのショートカットを置くことができます。 
Webクリップ機能に対応したアイコンを設置しているサイトの場合は、そのアイコンがホーム画面に登録されます。(FAVICON【ファビコン】:としてブラウザ上でURLやタグのところに表示されることもあります)
詳しくは、faviconの設置をご確認ください。


WEBクリップ用の画像を作成してみましょう。

ファイルフォーマット

画像ファイル形式 PNG
縦横比 1:1

基本的にどのサイズで作成してもリサイズ及び自動トリミングされるのですがiPhone / iPod touchでは114px×114px、iPadでは144px×144pxでアイコン化されます。
WEB用ファイルに出力するときには144px幅程度にするのが最適ではないでしょうか?

アイコンデザインの注意点

iPod/iPhone/iPad上でアイコンへの変換時に、ハイライト、テカリ、シャドウが自動的に入ります。
角も丸く削られ、統一されたボタンらしいデザインにされます。 上半分に白いテカリが入り、色が浅くなってしまいます。コントラストを強めに作った方がよさそうです。
上端は自動的にハイライトが入り、白く飛びます。そのため、枠のあるデザインだと上辺が細く見えてしまう場合があります。
透明部分を設定しても、生かされません。黒く塗りつぶされます。

webclip-image.png


画像にエフェクトをかけたくない方へ

アイコンへのコンバート時に、自動的に画像に加えられる「テカリ」や影を、適用させなくする方法があります。
画像の設置の仕方により、方法が異なります。

【1. ファイル名を「apple-touch-icon-precomposed.png」にする】

上記「1. サーバのルートに設置する」の方法で、ファイル名「apple-touch-icon.png」の画像を単純にアップしている場合。
ファイル名を「apple-touch-icon-precomposed.png」に変更します。
【2. ヘッダのタグを「"apple-touch-icon-precomposed" 」にする】

上記「2. 任意の場所に設置して、リンクする」の方法で設置している場合。
ヘッダのタグを「<link rel="apple-touch-icon-precomposed" href="/xxxxxxxxxx.png"/>」に変更する。
それぞれファイル名またはタグの末尾に「-precomposed」が加わっています。
このように指定すると、元の画像のままでアイコン化されます。
画像を作成される方への注意点:カドは丸くされることに変わりありません。PNGの透明部分も、黒く塗りつぶされます。

webclip-image-non.png


設置の方法

【1. サーバのルートに設置する】

サーバのroot(ルート)ディレクトリ(一番上のindex.htmlなどと同じ階層)に、ファイル名を「apple-touch-icon.png」としてアップします。
コンテンツに手を加える必要はありません。画像が存在していれば、iPhone/iPod touch/iPadが勝手にひろいます。
サイト全体で、同じWebクリップアイコンが適用されます。


【2. 任意の場所に設置して、リンクする】

無料のブログサービス等を利用していても、HTMLの<head>をカスタマイズできれば、Webクリップを設置できます。
画像をアップロード後、ウェブページの<head>〜</head>内に、<link rel="apple-touch-icon" href="/xxxxxxxxxx.png"/>の一行を追加します。
画像の場所、画像名は任意に設定できます。画像位置を相対パスで指定するなら「images/xxxxx.png」、絶対パスで指定するなら「http://www.〜」を書きます。
記述してあるページにのみ、Webクリップアイコンが使われます。一つのドメインの中で、コーナー毎にアイコンを使い分けられます。


 

サポートデータ

               
カテゴリーアーカイブ