SimpleIsm

iPhone/iPod touch用のWebクリップについて

HTML

仕事でiPhone/iPod touch用のアイコンを作成することになったので、ちょっとメモ。Webクリップ = ホーム画面に並ぶいわゆるファビコンみたいなやつ。

PNGファイルのみ設定が可能で、サイズは57 * 57px。「apple-touch-icon.png」というファイル名のアイコンを置いとくだけでもおｋ。これはfavicon.icoというファイル名のアイコンを置いとくだけで認識されるのと同じ感じかな(両方未確認)。正確に指定するには、head要素内にlink rel="apple-touch-icon" href="画像までのパス/apple-touch-icon.png"を記述する。apple-touch-icon.pngというファイル名以外でもおｋなのかは未確認(例: link rel="apple-touch-icon" href="画像までのパス/example.png")。Webクリップはホーム画面に並ぶと自動で角丸になったり、テカって見える処理がされる。それを無効化するには、link rel="apple-touch-icon" href="apple-touch-icon-precomposed.png"と記述する。「apple-touch-icon-precomposed」という文字列を「処理を無効化する」と認識するのかな。こちらも未確認。公式サイトでは見つけられなかった。探し方が悪いんだと思う。多分。

まとめ

設定可能なファイル形式

PNG

サイズ

57 * 57px

指定方法

head要素内にlink rel="apple-touch-icon" href="画像までのパス/apple-touch-icon.png"を記述

角丸やテカリ処理の無効化

head要素内にlink rel="apple-touch-icon" href="apple-touch-icon-precomposed.png"を記述

なぜかファイル名で何かを認識させる方法に違和感を感じるのだけど、例えばindex.htmlとか、index.phpにアクセスしたらディレクトリと認識されるのと、ニュアンス的には同じなのかな。

参考サイト

画面表示関係 - iPhone 3G DevWiki