今更感は否めないTipsですが…
iPhoneのSafariから開いているWebページをホーム画面にブックマークするときのあれこれについて。

どちらもとっても簡単なのでスマホ対応なブログなんかやってる人は是非。

ホーム画面にWebページをブックマークしたときのアイコンの変更

iPhoneやiPadのホーム画面には、ご存知の通りアプリだけでなく頻繁にチェックするようなWebサイトのショートカットをブックマークとしてアプリと同じように配置しておくことができます。

でもそのままだと、サイトのキャプチャイメージがアイコンとして自動的に設定されてしまいます。

ホーム画面に自分のサイトをブックマークしてくれるようなiPhoneユーザーがいたら、そりゃ「ありがとう！」の意味も込めて他のアプリと並んでも違和感のない素敵なブックマークアイコンにしておきたいですよね！

そんなときは、あなたのWebサイトのルートディレクトリに “apple-touch-icon.png” という名前のPNGイメージファイルを置いておくだけで、iOS(厳密にはMobile Safari)がブックマークに利用するアイコンとして認識してくれます。

まぁ、考え方は”favicon.ico”と同じですね！

アイコン変更手順

1. まず、アイコンを作成しましょう！
   ホームスクリーンのアプリのアイコンは57px × 57pxなので、倍の解像度であるRetinaディスプレイを考慮して、114px × 114px の正方形のアイコン用PNG画像を用意すればいいってことですね〜！
2. “apple-touch-icon.png” という名前にする。
3. FTPクライアントなどでサイトのドキュメントルートに作成したPNGファイルを転送すれば完成！
   → “http://samplesite.com/apple-touch-icon.png” としてアクセスできればOK。
   (sample.comはあなたのサイトのドメインです)！

これで、誰かがあなたのサイトをMobile Safariからホームスクリーンにブックマークしたときに、iOSが自動的に “apple-touch-icon.png” をアイコンとしてくれますよー。

さて、もう一度ホーム画面にブックマークしてみようとすると…おおっ！ちゃんとアップロードしたアイコンを認識してる！

ホーム画面はこんな感じでまるでネイティブアプリのようです！

[iOS 6以降]ホーム画面にWebページをブックマークしたときの名前の変更方法

iOS 6から、ホームスクリーンにWebサイトのブックマークアイコンを追加したときにアイコンの下に表示される文字列も変更できるようになっています。

こちらも簡単、以下のHTMLのmetaタグを挿入するだけ！

[xhtml][/xhtml]
“SiteTitle” をホーム画面に表示させるサイト名として設定しておきます。

タイトルが長いとホーム画面での表示が省略されてしまうので、英字でのタイトルならは11文字まで、日本語(マルチバイト)ならば6文字までが省略されない最大文字数です。