1. 【Androidサイト】ホーム画面用のウェブクリップアイコンを設定する

【Androidサイト】ホーム画面用のウェブクリップアイコンを設定する

 AndroidもiPhoneと同じくウェブクリップアイコンを設定することができます。

設定方法はiPhoneと同じ「apple-touch-icon-precomposed」か「apple-touch-icon」

 アイコンを設定したいページのheaderに以下のように記述するだけです。
 iPhoneの場合は、ルートの階層に「apple-touch-icon.png」または「apple-touch-icon-precomposed.png」(光沢処理無し)と名前をつけたPNG画像を置いておけば自動的にウェブクリップアイコンに設定されますが、Androidの場合は設定されないので上記のタグをページ内に記述する必要があります。

光沢処理は入りません・カドマル処理は入ります

 iPhoneの場合は下記のようにrelを記述することで自動的に光沢処理が入ります。
 しかし、Androidの場合は「apple-touch-icon」を設定しても光沢処理は入りません。なので、iPhoneとAndroidとで共通したウェブクリップアイコンを使いたい場合は、画像の中に光沢処理を入れておいてrelには「apple-touch-icon-precomposed」を設定しておくのが良いのではないでしょうか。また、カドマルの処理は自動的に入るので画像側ではカドマルを入れないようにしましょう。

ウェブクリップアイコンの制作サイズは?

 大きく作っておけば自動的に縮小されるので、正方形で作っておけば問題ありません。私は、 iPhone 4(Retina)にあわせて「114×114」で作ることが多いです。
画像は「PNG」形式で保存します。

メモ:Basic認証環境だと…

 公開前のサイトはBasic認証をかけることが一般的かと思いますが、このBasic認証がかかっているとアイコンの設定が反映されません。

参考リンク:

U-NOTEをフォローしておすすめ記事を購読しよう
この記事を報告する