iPhone/iPod touch用に自サイトのWebクリップアイコンを設置する
iPhone/iPod touchのSafariでブックマークの登録先をホーム画面上にするよう指示すると、ホーム画面には「Webクリップアイコン」として登録される。
これはMac OS X上で言うところのWebインターネットロケーションファイル（下図、拡張子＝webloc）と役目は同じだ。
特に何の仕組みも施されていないWebページをiPhone/iPod touch上で登録する場合、このアイコンのデザインは下図のようにWebクリップ（ページのスクリーンショット）が適用されるようになっている。
これでも十分かもしれないが、できればファビコンのようなオリジナルのアイコンが表示された方がページを作っている方も利用する方も楽しいだろう。
というわけで以下、このオリジナルのWebクリップアイコンの作り方とその設置方法。
以下、説明の都合上FC2などのブログサービスなどでWebクリップアイコンを設置する場合の手順を先に記し、本来の設置方法は文末に記しておく。
- 57ピクセル四方のPNG画像を用意する
- 角を丸めたりする必要は無い
- 情報量は少ない方がクール
- ファイル名を「apple-touch-icon.png」としておく
- blogの管理画面等から上記ファイルをアップロードする
例）FC2の場合は［管理画面＞ツール＞ファイルのアップロード］ - アップロードした画像のフルパスをメモしておく
例）FC2の場合はアップロード完了後に赤太字でフルパスが出ているはず
https://dl.dropboxusercontent.com/u/21774815/blog_img/apple-touch-icon.pngなど - HTML編集画面を開く
例）FC2の場合は［管理画面＞環境設定＞テンプレートの設定］
（注）HEAD領域の修正が認められていないサービスには設置できません - <head>〜</head>内に以下の記述を加える
<link rel="apple-touch-icon" href="先ほどメモしたフルパス" /> - 変更を保存する
細かく書いたので複雑に見えるかもしれないが、所定の画像をアップロードしてHTML編集で１行書き足すだけの事だ。実際にやってみれば画像を作るのが一番面倒に感じるくらい簡単な作業なので、興味のある人は物怖じせず試してみてほしい。
ちなみに、本来のやり方は上記手順１〜２で作成したファイルをサイトのルートディレクトリ上にアップロードするだけだ（link relの記述は不要）。これが可能なWebサービスを利用している人はそれなりの知識がある方だと思うので、ルートディレクトリが何なのかという説明は省かせて頂く。
ちゃんと出来ていれば右のように表示される（右下にあるのが拙ブログのWebクリップアイコン）。
