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

更新日
仕様 スマートフォン向け（非標準）
分類 メタデータ・コンテンツ
利用場所 メタデータ・コンテンツが置ける場所 / head要素の子要素となるnoscript要素内
内容 無し（空要素）

link要素で、Webクリップアイコン（ホーム画面のタッチアイコン）を指定することができます。

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

<link rel="apple-touch-icon" href="apple-touch-icon.png">
属性 値
必須属性（この設定を行う場合）
rel="" 現在の文書から見たリンク先の関係 apple-touch-icon Webクリップアイコン（タッチアイコン）
href="" リンク先の指定 URL アイコンの画像ファイルを指定
任意属性
type="" リンク先のMIMEタイプ image/png PNG画像のMIMEタイプを指定
sizes="" アイコンのサイズ 横幅x高さ ピクセル数で指定

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

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

ショートカットをホーム画面に追加すると、通常はそのページのキャプチャ（またはファビコン）がアイコンとして使用されますが、Webクリップ用のアイコン画像を用意しておくことで、その画像がショートカットアイコン（タッチアイコン）として使用されるようになります。

アイコンの設定方法

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

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

Androidの場合は、link要素でアイコン画像を指定しておく必要があるようです。

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

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

iPhoneの場合は、オリジナルのアイコンに角丸 + 光沢の効果を加えて表示されていましたが、現在は角丸のみになっている（？）ようです。背景の透過は反映されないので注意が必要です。

以前は、光沢の効果を無効にする apple-touch-icon-precomposed というキーワードがありましたが、現在でもこの値が有効かどうかは不明です。

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

Androidの場合は角丸の効果を加えて表示され、背景の透過も反映されます。

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

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

type属性は省略可能ですが、指定する場合は画像形式に合わせて次のように記述します。

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

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

アイコン画像のサイズは、iOSでは 180×180px、Androidでは 192×192px が最適であるとされています。

  • 特にこだわりがないのであれば、大きい方のサイズ（192×192px）で作成しておくと良いでしょう。

sizes属性は省略可能ですが、指定する場合は画像サイズに合わせて次のように記述します。（px の記述は不要）

sizes="192x192"

上記のように、x（エックス）で区切って横幅x高さの形式で記述します。（エックスの部分は大文字でも構いません）

iOSとAndroidで異なるアイコンを表示したい場合

iOSとAndroidでは、最適な画像サイズと背景透過の有無が異なります。それぞれの環境に対して最適なアイコン画像を表示したい場合は、2種類のアイコン画像を用意して次のように指定しておきます。

<!-- iOS向けの指定 -->
<link rel="apple-touch-icon" type="image/png" href="apple-touch-icon.png" sizes="180x180">

<!-- Android向けの指定 -->
<link rel="icon" type="image/png" href="android-touch-icon.png" sizes="192x192">

iOS向けの画像は apple-touch-icon.png、Android向けの画像は android-touch-icon.png としています。（ファイル名は任意）

このページで説明している方法（rel="apple-touch-icon"）でiOS向けの画像を読み込み、Android向けの画像は rel="icon" で読み込んでいます。

  • 機種によってはうまくいかない可能性もあるので、ご自分の環境で検証してから使用の可否を判断してください。（以下の使用例で簡単な検証を行うことができます）
  • 現在私が所有しているAndroid端末では、ChromeではAndroid向けの画像、FirefoxではiOS向けの画像が表示されました。iPadのSafariではiOS向けの画像が表示されます。

使用例

ファビコン＋2種類のWebクリップアイコンを指定した例

<!DOCTYPE html>
<html>
<head>

<!-- ファビコン（マルチアイコン） -->
<link rel="icon" href="image/favicon.ico" sizes="16x16 32x32 48x48">

<!-- iOS向けのアイコン（透過なし） -->
<link rel="apple-touch-icon" type="image/png" href="image/apple-touch-icon.png" sizes="180x180">

<!-- Android向けのアイコン（背景を透過） -->
<link rel="icon" type="image/png" href="image/android-touch-icon.png" sizes="192x192">

<title>3種類のアイコンをテスト</title>

</head>
<body>

<h1>3種類のアイコンをテスト</h1>

<p>このページをブックマークしてホーム画面上にショートカットを追加すると、どのアイコンがどこに使用されるかを確認することができます。</p>

...

</body>
</html>
表示例

サンプル画面へ新規ウィンドウで表示