是否可以为支持主题颜色的浏览器使用其他图标? [英] Is it possible to use a different favicon for browsers that support theme-color?

问题描述

是否可以通过meta标签或manifest.json为支持主题颜色的浏览器设置不同的图标?我有一个黑色的主题栏，但是在桌面浏览器上使用的是一个黑色的图标.我想为移动浏览器提供一个备用的白色图标，但我不想假设移动浏览器===支持主题颜色，因为并非总是如此.

Is there a way to set a different favicon for browsers that support theme-color, either via the meta tag or manifest.json? I have a jet black theme bar, but a mostly-black favicon for use on desktop browsers. I'd like to have an alternate white favicon for mobile browsers, but I don't want to make the assumption that mobile browser === theme-color support, as that's not always going to be the case.

桌面收藏夹示例:

移动收藏夹示例:

推荐答案

可通过prefers-color-scheme媒体查询访问浏览器的主题.不幸的是，由于收藏夹图标不是页面元素，因此不能使用CSS文件中的媒体查询来在两个图像之间进行切换.

The browser's theme is accessible through the prefers-color-scheme media query. Unfortunately, as the favicon is not a page element, you cannot use the media query in a CSS file to, say, switch between two images.

解决方案是将prefers-color-scheme与可以嵌入CSS的SVG结合使用.声明SVG图标:

The solution is to combine prefers-color-scheme with SVG, which can embed CSS. Declare an SVG favicon:

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

并在SVG本身中使用媒体查询:

And use the media query in the SVG itself:

<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>

来源 SVG网站图标仍然是一项高级功能. Firefox 和尚不支持.

SVG favicon is still an advanced feature. It is already supported by Firefox and by Chrome, but other browsers do not support it yet.

这篇关于是否可以为支持主题颜色的浏览器使用其他图标?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！