iPhoneとAndroidでは、タグ内に下記のような記述をすることで、 用意した画像（icon_tipsnote.png）をホーム画面にショートカットアイコンとして 設置することができます。
【例】
<link rel="apple-touch-icon" href="images/icon_tamkun.png">
Androidで、こちらで用意した画像をショートカットアイコンとして表示させる際に いろいろハマってしまったので、次はそうならないように覚書です。 （画像サイズ他、ショートカットアイコン設置に関する具体的な方法は割愛します）
【その1：ベーシック認証がかかっている場合は要注意】
ショートカットアイコンを設定したページを、テスト環境と 公開前の本番環境（ベーシック認証のかかった状態）にアップロードして 表示・動作確認を行なっていたところ、 テスト環境下では、問題なく「apple-touch-icon」で指定した画像 （上記例では「icon_tamkun.png」）をショートカットアイコンとしてホーム画面に 表示できたのですが、公開前の本番環境下で確認すると、 iPhoneではホーム画面にアイコンを設置できるのに、 Androidでは指定した画像が表示されず、デフォルトアイコンになってしまうということが 判明。
パスがおかしいのか、画像のサイズに問題があるのか…といろいろ調べた結果、 「アイコン画像が置かれるURLにベーシック認証がかかっていると、ショートカットアイコンが 使用されない」ということがわかりました。
新規にサイトを立ち上げる場合、公開前の本番環境にベーシック認証をかけ、 そこに本番データをすべてアップロードして最終確認をするケースが多いと思いますが、 用意した画像をショートカットアイコンとして使用することが決まっている場合、 このような状況下では「Andoroidでは、デスクトップにショートカットアイコンを設置できるかどうかを テストすることはできない」ことを、事前にクライアントに説明しておいたほうが いいのではないかと思います。
【参考サイト】
- apple-touch-icon指定が効かない場合に確認すべきこと - Skirnirnismal
- Basic/Digest認証のサイトではapple-touch-iconが使用されない - chocoringの日記
==================================================================================
【その2：パスの記述と機種依存にも要注意】
ベーシック認証がかかった環境下では、ショートカットアイコンをホーム画面に 設置できないことがわかったので、本番公開後（ベーシック認証をはずした後）に、 改めてショートカットアイコンの設置を確認することに。 そして本番公開後、各種Andoroid実機で、ショートカットアイコンをデスクトップに 設置できることを確認してひと安心していたのですが、ここで、機種によっては、 ショートカットアイコンがデフォルトアイコンになってしまうことが判明。
いろいろ調べた結果、以下のことがわかりました。
1.ショートカットアイコンをサイトルートで指定するとアイコンとして認識されないことがある （相対パスでも認識されないことがあるとの説もあり）
この記述だとアイコンとして認識されない場合もある
<link rel="apple-touch-icon" href="/images/icon_tamkun.png"> <link rel="apple-touch-icon" href="images/icon_tamkun.png">
Androidは、機種もバージョンも多く、どの機種・どのバージョンだと 認識される・されないを、すべて検証するのは難しいので、 ショートカットアイコンをフルパスで記述しておくのが、もっとも安全な方法ではないでしょうか。
2.Galaxyの場合、ショートカットの作成手順によって、表示されたりされなかったりする
上記のとおり、ショートカットアイコンをフルパスで記述したとしても、 Galaxyではショートカットの作成手順によっては表示されません。 これは機種依存の範疇なので、制作側ではどうしようもない部分ではあるのですが、 ユーザーがショートカットを作成する手順によっては回避できるようです。 詳細は、下記URLを参照してください。 Webアプリを作成する際、Webページのショートカットを設置するときに注意すること - おれめも
こちらに記載されているとおり、「ブラウザでページを開いて直接ショートカットを作成する」のではなく、 「一度ブックマークに登録したものを、ホーム画面にショートカットとして作成」すれば、 Galaxyでも問題なく、こちらが用意した画像をショートカットアイコンとして表示できます。 （Galaxy S （Android2.2）にて確認済み）
スマホサイトでショートカットアイコンの設置が必須である場合、 機種依存によって、意図したショートカットアイコンが表示されないケースもあることを、 事前にクライアントに説明しておくほうがいいかもしれません。
いずれにせよ、スマホサイトのコーディングは、まだまだ、「やってみないと何が起こるかわからない」 ものだと思いました。難しいですね…。
【参考サイト】