Webクリップの設定。

• facebook

オフィス狛　技術部です。

今回は、Webクリップ（apple-touch-icon.png）についてです。

先日、社内Webシステムのエラーログに、

File does not exist: apple-touch-icon.png

という内容が出力されていました。

"apple-touch-icon.png" はWebクリップといって、
スマホやタブレットでホーム画面にブックマークを表示する際のアイコンの事です。
社内システムではPCのみを対象としていたので、特に用意していませんでした。
オフィス狛のホームページではWebクリップは用意してあります。


上記はAndroid端末で見た場合ですが、左側がWebクリップを用意した場合で、
右側が用意していない場合です。



上記はios7の場合です。画像なしの場合は、サイトのキャプチャがアイコンになります。

設定方法ですが、Androidの事を考えないのであれば、
ドキュメントルートに "apple-touch-icon.png" という名前のファイルを置けばＯＫです。

Androidでは、以下の記述をhtmlファイルに追加する必要があります。（iosでも指定する事は可能）

<link href="apple-touch-icon.png" rel="apple-touch-icon"></link>

角丸処理は自動で行ってくれます。
rel の "apple-touch-icon" を "apple-touch-icon-precomposed" にすると、光沢無しの画像になりますが、
ios7からはフラットデザインになっている為、"apple-touch-icon"としても光沢処理は付かないようです。

ちなみに、

<meta name="apple-mobile-web-app-title" content="オフィス狛">

上記メタタグを追加する事で、アイコンの名称も設定する事ができます。（iosのみ）
日本語表記だと６文字が省略せずに表示されます。

Webクリップの画像サイズですが、
iOSヒューマンインターフェイスガイドラインによると、

iPhoneおよびiPod touchでは、次のサイズのアイコンを作成します。

• 120×120ピクセル
• 60×60ピクセル（標準解像度）

iPadでは、次のサイズのアイコンを作成します。

• 152×152ピクセル
• 76×76ピクセル（標準解像度）

との事です。
（昔は144pxとか114pxと言われていたけど変わった？）
画面サイズごとにリサイズされるので、一番大きい152pxで作成しておけば良いかと思います。

android , ios , Webクリップ