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

link”要素~“rel="mask-icon"

記事Oct.7th, 2020
Feb. 19th, 2023
現在の文書のページピン用のアイコンを示す
この記事はHTML Living Standardに対応しています。
この記事はHTML Living Standardに対応しています。

rel="mask-icon"

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

rel="mask-icon"”が指定されたlink”要素はSafariのページピン用のアイコンを指定します。

タブをピン止めするとメニューバーの左端にアイコンとして表示されますが、このアイコンは“rel="mask-icon"”が指定されたlink”要素で指定されたものが使用されます。

アイコンの形式はSVG形式で黒一色である必要があります。アイコンの表示色はcolor”属性で指定します。

サンプルコード

<link rel="mask-icon" href="image/mask-icon.svg" color="#98d8c8">

属性と値

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

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

仕様書

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

定義なし

定義なし

定義なし

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