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

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

casemobile公式

2014/03/07(最終更新日:2014/03/07)


このエントリーをはてなブックマークに追加

【Androidサイト】ホーム画面用のウェブクリップアイコンを設定する 1番目の画像
 AndroidもiPhoneと同じくウェブクリップアイコンを設定することができます。

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

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

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

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

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

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

メモ:Basic認証環境だと…

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

参考リンク:


hatenaはてブ


この記事の関連キーワード