Safari(iPhone/iPad)のホーム画面用WEBサイトアイコンの設置

iPhone/iPadのSafariでは、任意のWEBサイトのショートカットを端末のホーム画面に置くことができます。

上記はAppleのサイトの例ですが、このリンゴのアイコンはAppleのサイトで用意されたアイコン画像です。

スマフォ向けWEBサイトを作成する際に、同じようにアイコン画像を用意する場合は、URLドメイン直下に apple-touch-icon.png を置きます。

http://dev.hoge.com/apple-touch-icon.png

このようにすることで、ユーザがショートカットを作成した際のアイコン画像を指定できると共に、サーバ側でApahceの404エラーが記録されるのを防ぐことができます。
（実験したところ、ショートカットからWEBサイトを開くたびに apple-touch-icon.png へのリクエストがサーバ側にありました。）

参考

試してはいませんが、端末の解像度毎に apple-touch-icon.png を用意することもできるようです。
apple-touch-icon.pngをサイトに設定する意味のまとめ

環境毎にWEBサイトアイコンを変える

スマフォ向けWEBサイトを開発していると、サーバ環境が開発1、開発2、開発3.. と幾つもあったり、それ以外にもステージング環境、本番環境があったりします。
スマフォ端末でデバッグする際「このサイトってどの環境だっけ？」という混乱を防ぐ手の一つとして、上で説明したホーム画面用のWEBサイトアイコンを環境毎に変えておくのもよいかと思います。
（もしくは事故が起こらないよう、本番とそれ意外だけ変えておくなど。）

ただソースの管理上、複数の異なる apple-touch-icon.png を同一リポジトリに混在させると管理がややこしくなります（もしくはソース管理はしないか、デプロイプロセスで何とかするか）。
これを解決する一つの方法として、Apacheの mod_rewrite を利用し、apple-touch-icon.png に対するHTTPアクセスを別ファイルのアクセスへ書き換える方法があります。

環境毎に apple-touch-icon_[HOST名].png を用意し、

用意するpngファイルの例（ドキュメントルート直下に全て配置）

apple-touch-icon.png ←環境毎のアイコンが存在しなければ適用される
apple-touch-icon.dev.hoge.com.ico
apple-touch-icon.staging.hoge.com.ico
apple-touch-icon.production.hoge.com.ico

サーバのドキュメントルート直下の .htaccess に次のように記載します。

.htaccess

RewriteEngine on

RewriteCond %{DOCUMENT_ROOT}/apple-touch-icon_%{HTTP_HOST}\.png -f
RewriteRule ^apple-touch-icon\.png$ /apple-touch-icon_%{HTTP_HOST}.png [L]

適用イメージ

この例だと、単純にホーム画面上のアイコンのタイトルを変えておくだけでもいいかもしれません^^;
ただ今回はアクセスドメインでアイコンを切り替えましたが、これを応用すれば、例えば同一ドメイン下に複数の異なる性質のコンテンツがある場合（もしくは複数のサービスで同一ドメインに相乗りしている場合）にアイコン画像を切り替えたりもできます。

おまけ：PCブラウザ用のアイコンの場合

PCブラウザ用のアイコンは、URLドメイン直下の favicon.ico が適用されます。

http://dev.hoge.com/favicon.ico

適用イメージ

これを各種サーバ環境（開発/ステージング/本番/etc..）で変更したい場合は、環境毎に favicon_[HOST名].ico を用意し、

用意するicoファイルの例（ドキュメントルート直下に全て配置）

favicon.ico ←環境毎のアイコンが存在しなければ適用される
favicon.dev.hoge.com.ico
favicon.staging.hoge.com.ico
faficon.production.hoge.com.ico

サーバのドキュメントルート直下の .htaccess に次のように記載します。

.htaccess

RewriteEngine on

RewriteCond %{DOCUMENT_ROOT}/favicon_%{HTTP_HOST}\.ico -f
RewriteRule ^favicon\.ico$ /favicon_%{HTTP_HOST}.ico [L]

適用イメージ