apple-touch-icon.pngとは?


私が運営しているサイト(ウェブアラカルトではない別サイト)のエラーログをチェックしていたら、

「apple-touch-icon.png」が見つからないよ!(意訳)

という行があったものの、うちのサイト(HTML、CSS共に)にはそもそもそんなファイルを表示する記述は無いよ、と思っていたのですが、このファイルはiPhoneやiPadのホーム画面用アイコンのことらしく。
つまり、閲覧者のどなたかがiPhoneなどで「ホーム画面に追加」をして頂いている、ということでしょうか。それは大変ありがたいことで。

なのですが、エラーログがたまるのは避けたいですので、「apple-touch-icon.png」なるファイルを設置することにしました。
作業の参考にしたのはこちらのサイト。

iPhone/iPadのホーム画面用アイコンapple-touch-icon.pngをサイトに設定しよう(Web担当者Forum)

まあすごくざっくりいえば、
「apple-touch-icon.png」という名前の画像ファイル(png)を作り、サイトのルートディレクトリにアップする。
というだけです。

画像のサイズは
○57px × 57px
 →ファイル名は「apple-touch-icon.png」「apple-touch-icon-precomposed.png」
○72px × 72px
 →ファイル名は「apple-touch-icon-72×72.png」「apple-touch-icon-72×72-precomposed.png」
○114px × 114px
 →ファイル名は「apple-touch-icon-114×114.png」「apple-touch-icon-114×114-precomposed.png」
○144px × 144px
 →ファイル名は「apple-touch-icon-144×144.png」「apple-touch-icon-144×144-precomposed.png」
の8種類を作りました。
(「precomposed」がついているファイルがあると、端末によるハイライト系の自動処理が行われないので、あわせて作ってアップしました。)

私は、ツイッター用のアイコンをそのままリサイズしてアップしただけです。
ロゴやfaviconを流用しても良いかもしれませんね。

まあ時間はそんなにかからないので、スマホ向けサイト(又はレスポンシブレイアウト等でスマホでも見れるサイト)を作っている方は、こういうファイルを用意してみては如何でしょうか。

コメントを残す

メールアドレスが公開されることはありません。