今回のエントリはちょっとした小ネタです。

今やiPhone・Androidの普及を考えると、スマホ最適化してないサイトでも「ホーム画面アイコン」「ショートカットアイコン」の設定は必須になってきたと思います。

以下のようなタグで、ページに簡単にアイコンを設定できます。
[html]
<link rel="apple-touch-icon" href="画像ファイルのパス（png）" >
[/html]

とくにiPhoneは、指定した画像に自動的に磨き処理のエフェクトをかけてくれるので、いい感じになるな〜と関心していました。

ただ、Androidについては磨き処理をやってくれないので、ちょっとした悩みでした。

iPhoneの方がいい感じになるだけに、Androidのアイコンがかなり寂しい感じに見えてしまいます。

なので、最近はちょっと頑張って画像自体に磨き処理かかったようなデザインを施して、ノーエフェクトで設定しています。（Appleが用意してくれたエフェクト処理の機能を使わないのは残念ですが…）

方法としては、下記のとおりです。


[html]
<link rel="apple-touch-icon-precomposed" href="画像ファイルのパス（png）" />
[/html]

違うのは、
rel=”apple-touch-icon”　→　rel=”apple-touch-icon-precomposed”　としているところです。

これで、両プラットフォームでの差がだいぶ無くなりました。

ただ、この説明だと説得力にかけると思うので補足すると、precomposedを付けないで自分でエフェクト処理した画像にiPhoneでさらにエフェクト処理すると、2重にエフェクトがかかるので非常に見づらい画像になってしまいます。

好みの問題ですが、UAでタグの記述を変えてもいいと思うのですが、その場合画像も2枚用意する必要があるので、余計に面倒かなと思います。

僕はこうしてます、という話しでした。

ちなみに、このタグの書き方はAppleのリファレンスに詳しく出ていますので、ちゃんとした仕様を知りたい方は下記をご覧ください。

Safari Developer Library

また、画像にエフェクト処理をかけると言っても難しいし面倒くさいよ！という方は、下記サイトなどでPhotoshopのテンプレートなどが紹介されていますので、参考にすると良いかもしれません。

iPhone風アイコン作成用PhotoShopテンプレート：phpspot開発日誌

あと、別な方法としては一度precomposed無しで、一度iPhoneやiOSシミュレータに磨き処理してもらって、それのスクリーンショットを撮って切り取って…precomposedしちゃうっていう手もありです。。。（笑）