私が運営しているサイト(ウェブアラカルトではない別サイト)のエラーログをチェックしていたら、
「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を流用しても良いかもしれませんね。
まあ時間はそんなにかからないので、スマホ向けサイト(又はレスポンシブレイアウト等でスマホでも見れるサイト)を作っている方は、こういうファイルを用意してみては如何でしょうか。