iPhoneやiPadのホーム画面用のアイコン・apple-touch-iconの設定のやり方

• 公開日 : 2012年5月14日
• カテゴリ : Web制作

前回に引き続きこれも今さら感があるが、iPhoneやiPad、iPod touchでホームページのお気に入りをホーム画面に追加した際のアイコンを作成した。
通常、特定のホームページをホーム画面に追加すると、下の画像のように画面をキャプチャしただけのアイコンになる。

これではつまらないしホーム画面に設置した際の見栄えも良くないので、ホームページの管理者は自分の好きな画像に変更できる。
そのやり方を今から説明しよう。

設定の手順

まず好きな画像を150×150ピクセル程度で保存する。
画像形式は適当でいいし、ファイル名もなんでもいい。
そしてアップロードする。
次に、HTMLファイルのヘッダに、

<link rel="apple-touch-icon" href="画像ファイル名" />

と書いておく。
iPhoneなどのアップルの端末の場合は上記のコードを書かなくても、apple-touch-iconという画像ファイル名でルートディレクトリに置いておけば自動的にホーム画面に追加するアイコン画像を代替してくれるが、Android端末の場合はそうはならないので、上記のコードを書いておく必要があるらしい。(実機がないため未確認)

そしてユーザー側がホーム画面に追加する方法は、ホームページを開いた際に画面一番下のメニューアイコンの中の中央のボタンを押す。(画像参照)

次に、出てきた選択肢の中で「ホーム画面に追加」を押せば完了である。(画像参照)

このブログをホーム画面に追加するような奇特な人はいないと思うが、練習としてやってみるといいでしょう。ホーム画面からいつでも消せるし。