<link rel="apple-touch-icon" href="">

ブラウザ スマートフォン向け
分類 メタデータ・コンテンツ
利用場所 メタデータ・コンテンツが置ける場所 / head要素の子要素となるnoscript要素
内容

link要素で、Web Clipアイコンを指定することができます。

  • これはスマートフォン向けの機能です。
  • この指定内容はHTML5では正式に定義されていません。

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

属性
必須属性
rel="" 現在の文書から見たリンク先の関係 apple-touch-icon Web Clipアイコン
href="" リンク先の指定 URL アイコンの画像ファイルを指定

Web Clipとは、Webサイトへのショートカットをホーム画面上に追加できる機能のことです。(iPhoneやiPadだけでなく、Android搭載の端末でも機能します)

  • Androidの場合は、登録したブックマークを長押し → ショートカットを作成 の操作でショートカットアイコンを作成することができます。
  • iPhoneの場合は、ブックマーク追加のメニューで ホーム画面に追加 を選択すると作成することができます。

通常はそのサイトのキャプチャ(またはファビコン等)がアイコンとして使用されますが、オリジナルのアイコン画像を用意しておくことで、その画像がアイコンとして使用されるようになります。

アイコンの設定方法

iPhoneの場合は、ルートディレクトリにアイコン画像をアップロードするだけで、オリジナルのアイコンが表示されるようになります。ただし、この場合はアイコン画像のファイル名を apple-touch-icon.png にしておく必要があります。

  • link要素を指定する場合は、任意のファイル名 + 任意の場所にアップロードすることができます。

Androidの場合は、link要素でアイコン画像を指定しておく必要があります。(ルートディレクトリにアップロードしただけでは機能しません)

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

アイコンの表示内容について

iPhoneの場合は、オリジナルのアイコンに角丸 + 光沢を加えて表示されます。光沢の効果を無効にしたい場合は、rel属性の値に apple-touch-icon-precomposed を指定しておきます。(角丸の効果は無効にできないようです)

<link rel="apple-touch-icon-precomposed" href="icon.png">
  • link要素を使用しない場合は、apple-touch-icon-precomposed.png というファイル名でアップロードします。

Androidの場合は、角丸の効果だけが加えられます(光沢の効果は付きません)。こちらの場合も、角丸の効果を無効にすることはできないようです。

アイコン画像の形式について

Web Clipアイコンで使用する画像は、PNG形式で作成する必要があるようです。

アイコンのサイズについて

アイコンの表示サイズは、端末により異なります。(参考:57×57px ~ 114×114px)

少し大きめのサイズで作成しておくと、自動的に縮小されて表示されるようになります。(小さい画像を拡大するよりも劣化は少ないと思います)

ちなみに、TAG indexのWeb Clipアイコンには次の画像を使用しています。(少し大きすぎる気もしますが…)

オレンジの背景に黒字でTAG indexと書かれています 256×256px

使用例


<!DOCTYPE html>
<html>
<head>

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

<title>文書のタイトル</title>

</head>
<body>



</body>
</html>