このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

link”要素~“rel="apple-touch-icon"

記事Oct.7th, 2020
Feb. 19th, 2023
現在の文書のウェブクリップアイコンを示す
この記事はHTML Living Standardに対応しています。
この記事はHTML Living Standardに対応しています。

rel="apple-touch-icon"

リンクの種類 外部リソースリンク
body-ok No

rel="apple-touch-icon"”が指定されたlink”要素はウェブページもしくはウェブサイトを表すウェブクリップアイコンを指定します。

ウェブクリップアイコンはスマートフォンなどのモバイルデバイスでウェブページをホーム画面に追加したときに表示されるアイコンです。“apple-touch-icon”というリンクタイプ名が表すようにもとはApple社製のiPhoneやiPad用の機能ですが、現在ではAndroidなど他のデバイスでも対応しています。

ウェブクリップアイコンとして指定できる画像の形式はPNG形式です。大きさは180px×180px以下のものが使用できますが、180px×180pxが推奨されます。

モバイルブラウザによってはrel="icon"を指定したlink”要素で指定したアイコンの代わりに使用される場合があります。アイコンとウェブクリップアイコンの両方が提供されている場合にどちらを選択するかはブラウザに依ります。

サンプルコード

<link rel="apple-touch-icon" href="image/webclip.png" sizes="180x180">

rel="apple-touch-icon-precomposed"

リンクの種類 外部リソースリンク
body-ok No

rel="apple-touch-icon"”の場合、iOSの古いバージョンではウェブクリップアイコンに自動的に光沢処理が施されていましたが、“rel="apple-touch-icon-precomposed"”と指定した場合は光沢処理が行われません。

光沢加工が行われないこと以外は“rel="apple-touch-icon"”と同じです。

サンプルコード

<link rel="apple-touch-icon-precomposed" href="image/webclip.png" sizes="180x180">

属性と値

属性
属性 説明 説明
必須属性
rel="" 文書と外部リソースの関係 apple-touch-icon リンク先は現在の文書のウェブクリップアイコン
リンクタイプ 文書と外部リソースの関係
href="" 文書と関連付ける外部リソース URL ウェブページもしくはウェブサイトを表すウェブクリップアイコンのURL
任意属性
グローバル属性
crossorigin=""HTML5で追加 外部リソースを読み込む時のCORSリクエストを設定 anonymous CORSリクエストを実行するが、SSL証明書、HTTP認証などの認証情報は使用しない
use-credentials CORSリクエストを実行し、SSL証明書、HTTP認証などの認証情報を使用する
media="" 外部リソースが対象とするメディア メディアクエリ 外部リソースが対象とするメディア条件
hreflang="" 外部リソースが記述されている言語 言語コード 外部リソースが記述されている言語
type="" 外部リソースのデータの種類 MIMEタイプ 外部リソースのMIMEタイプ
referrerpolicy=""HTML5.2で追加 リファラーポリシーを指定 リファラーポリシー リファラーポリシーを指定
sizes=""HTML5で追加 アイコンのサイズ any サイズの調整が可能
横幅x高さ アイコンのサイズのピクセル数
fetchpriority=""HTML Living Standardで定義 外部リソースの読み込み時の優先度を指定する high 同じ種類の外部リソースと比較して取得の優先度が高いことを示す
low 同じ種類の外部リソースと比較して取得の優先度が低いことを示す
auto 同じ種類の外部リソースと比較時の優先度を自動的に判断すべきであることを示す
title="" 外部リソースに補足情報を付ける テキスト 補足情報

rel”属性の値は空白文字で区切ることで複数の値を指定できます。

仕様書

HTML 4 HTML 5 HTML 5.1 HTML 5.2 HTML Living Standard
apple-touch-icon
定義なし

定義なし

定義なし

定義なし

定義なし
apple-touch-icon-precomposed
定義なし

定義なし

定義なし

定義なし

定義なし
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク