iPhoneやAndroidなどスマートフォンといえば、ホーム画面に並ぶあのアイコンですね。
きっちりとした正方形なのに、角は丸くて艶やかなあのアイコン。自分のサイトやブログがこんな感じのアイコンになって読者のスマートフォンのホームに並んだら嬉しいですよね。
また、デザインにこだわるスマートフォンユーザーの中には、アイコンがカッコ悪い（もしくは無い）とホームに置くのをやめてしまうかもしれません。
自分のサイト・ブログをお持ちの方には是非オススメのスマートフォン用ホームアイコンの設置の仕方をご紹介します。
手順は以下の3つ、
1.アイコンの画像を作る
2.画像をサーバーにアップする
3.画像のパスを指定したアイコン用のタグを設置する
画像を作る時間以外は、1分でできます。
1.アイコンの画像を作る
まずは画像を作成します。これがないと始まりませんね。
画像のサイズは表示する端末や設定によってさまざまです。
iPhone、iPadはそれぞれ自動調整されるサイズが決まっているみたいですが、Androidではホーム画面の種類や設定が多種多様なため決まったサイズにはならないでしょう。
Xperia arcは初期設定のホームでは50px×50pxで表示されていますので、少なくともそれよりは大きく作りましょう。
また、60px×60pxなど若干大きい程度のサイズでは自動調整された際に、変化がわずかなためぼやけてきれいに見えない場合があります。
お勧めはやや大きめの150px×150px程度です。（上の画像もこのサイズです）
角は丸くしなくても端末側で自動的に丸くしてくれます。（追記：2011年4月4日）
そのくらい大きいと細部の作りこみもできますし、縮小されたときもきれいに写ります。
上の画像は実際にXperia arcに表示されたアイコンをキャプチャしたものですが、arcの液晶画面は一般的なPCのモニターよりきれいに写るので、実際にはよりきれいに表示されると思います。
2.画像をサーバーにアップする
画像ができたら、その画像をサーバーにアップします。
すでにサイトをお持ちの方には簡単な作業でしょう。
FTP接続や、管理画面のアップロード機能から画像をアップし、アップした画像の場所（URL）を覚えておきます。
通常はアイコンを表示させたいサイトと同じサーバーに置くのが基本ですが、
画像のURLさえわかれば別のサーバーでも問題ありません。
3.画像のパスを指定したアイコン用のタグを設置する
最後にアイコンを表示させたいページのHTMLファイルの<head>～</head>タグの中に
<link rel=“apple-touch-icon” href=”（画像のパス）” />
上の一行を書き込むだけで完了です。
どうでしょう、意外と簡単ですよね。
アイコンの表示方法
設定したアイコンを表示させるには、お持ちのXperia arcでまず設定したページをブックマークします。
次に、ホーム画面でメニュー画面を押し「追加」（もしくは何もないエリアを長押し）＞ショートカット＞ブックマーク、で先ほどブックマークしたページを選択します。
以上で、ホーム画面にアイコンが表示されます。
いかがでしょうか。
また、アイコンの下に表示される文字はブックマークの名前になるので、ブックマークの編集で名前を変更します。
そのままだとホーム画面の文字は変わらないので、一度削除し再度ショートカットを追加してください。
それでは今日のところはこの辺で。
追伸：
勘の良い方はお気づきだと思いますが、3.で設置するタグはapple-touch-iconと書いてある通り、iTouch用ですので、ホーム画面への設置方法は違いますがiphoneやiPadなどでも表示されます。
また、私の環境はXperia arc（Android OS 2.3）のため、それ以前の環境で同じかどうかは検証しておりませんのでご了承ください。
（追記：2011年4月4日）
そうそう、お伝えするのを忘れていましたが、宜しければ試しにこのブログをホーム画面に設定してみてください。それで上と同じアイコンが表示されれば、上の手順でうまくいくと思います。
そして消さずにそのままホーム画面に残しておいてもらえると嬉しいです（笑）
これからもAndroidネタを発信していきますので。。
コメント
現在iphoneを使っています。
自分のHPのアイコンをiphoneの
ホーム表示にapple-touch-icon
で成功しました。
アンドロイドでは通用しませんよね?
iphone同様に、アンドロイドでも
自分のHPのアイコンを自動的に
ホームに表示させる為のタグとか、方法は
ありますか？
(アンドロイドの端末を持っていません)
iPhoneAndroidさん
僕もiPhone用のタグなんだろうな、と思って試しに「apple-touch-icon」のタグをくっつけてみたら、Androidでも表示されました。
Xperia arcでしか試してないのでAndroid2.3以下ではどうなのか分かりませんが。（↑のキャプチャもXperia arcです）
Android側が既に普及しているiPhone用アイコンを表示できるように対応したのかもしれませんね。