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

以下のようなタグで、ページに簡単にアイコンを設定できます。

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

元画像

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

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

iPhoneではエフェクト処理されていい感じ

Androidでは元画像のままでちょっと寂しい…

自分でエフェクト処理した画像

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

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

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

precomposedで設定したアイコン

自分でエフェクトかけた画像に変更

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

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

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

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

Safari Developer Library

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

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

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