web-dev-qa-db-ja.com

テーマカラーをサポートするブラウザに別のファビコンを使用することは可能ですか？

メタタグまたはmanifest.jsonを介して、テーマカラーをサポートするブラウザーに別のファビコンを設定する方法はありますか？私は真っ黒なテーマバーを持っていますが、デスクトップブラウザで使用するためのほとんど黒のファビコンです。モバイルブラウザー用の別の白いファビコンが欲しいのですが、モバイルブラウザーが===テーマカラーをサポートしているとは思わないでください。常にそうなるとは限りません。

デスクトップファビコンの例：

Desktop favicon

モバイルファビコンの例： Mobile favicon

htmlmanifestmeta-tagsfavicon
14
richardwestenra

ブラウザのテーマには、prefers-color-schemeメディアクエリを通じてアクセスできます。残念ながら、ファビコンはページ要素ではないため、CSSファイルでメディアクエリを使用して、たとえば2つの画像を切り替えることはできません。

解決策はprefers-color-schemeとCSSを埋め込むことができるSVGを組み合わせることです。 SVGファビコンを宣言します。

<link rel="icon" href="my_icon.svg">

SVG自体でメディアクエリを使用します。

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <style>
    circle {
      fill: yellow;
      stroke: black;
      stroke-width: 3px;
    }
    @media (prefers-color-scheme: dark) {
      circle {
        fill: black;
        stroke: yellow;
      }
    }
  </style>
  <circle cx="50" cy="50" r="47"/>
</svg>

ソース tomoyac.com

SVGファビコンはまだ高度な機能です。 Firefox および Chrome はすでにサポートされていますが、他のブラウザ まだサポートされていません です。

3
philippe_b