Oct.7th, 2020
＃
“rel="apple-touch-icon"”
“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"”
“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="" |
外部リソースを読み込む時のCORSリクエストを設定 | anonymous | CORSリクエストを実行するが、SSL証明書、HTTP認証などの認証情報は使用しない |
| use-credentials | CORSリクエストを実行し、SSL証明書、HTTP認証などの認証情報を使用する | ||
| media="" | 外部リソースが対象とするメディア | メディアクエリ | 外部リソースが対象とするメディア条件 |
| hreflang="" | 外部リソースが記述されている言語 | 言語コード | 外部リソースが記述されている言語 |
| type="" | 外部リソースのデータの種類 | MIMEタイプ | 外部リソースのMIMEタイプ |
referrerpolicy="" |
リファラーポリシーを指定 | リファラーポリシー | リファラーポリシーを指定 |
| sizes="" |
アイコンのサイズ | any | サイズの調整が可能 |
| 横幅x高さ | アイコンのサイズのピクセル数 | ||
fetchpriority="" |
外部リソースの読み込み時の優先度を指定する | high | 同じ種類の外部リソースと比較して取得の優先度が高いことを示す |
| low | 同じ種類の外部リソースと比較して取得の優先度が低いことを示す | ||
| auto | 同じ種類の外部リソースと比較時の優先度を自動的に判断すべきであることを示す | ||
| title="" | 外部リソースに補足情報を付ける | テキスト | 補足情報 |
“rel”属性の値は空白文字で区切ることで複数の値を指定できます。
＃
