在 css 背景中使用图标 *.ico

Question

我正在构建一个 chrome 扩展，它使用可搜索的列表框来执行常用命令。 windows 打开的选项卡也将出现在此列表框中，并且 Tab 对象带有 favIconUrl，有时会包含 *.png 或 *.ico 引用等。

我想用 *.ico 设计我的列表项的样式，但看起来 css 不会尊重图标。我在想可能有一种服务可以将图标动态转换为 png 或对 css.

有用的东西

那我可以用background-image: url(http://ico2png.com/convert?ico=<favIconUrl>);

有没有这样的动物，或者其他方法？

编辑：

糟糕，在 Chrome.

中这看起来确实有效

<img src="https://www.google.com/favicon.ico">
<div style="height:32px;width:32px;background-image:url(https://www.google.com/favicon.ico);">

</div>

我以为 ico 可能真的是 png，但我猜不是。由于我没有时间进行调查，因此我将保留其他浏览器的问题。

Answer 1

我不建议在您的代码中使用直接的网站图标 URL。许多网站的网站图标不在其根目录中。

但不用担心，您有很多选择。

1。 Chrome 网站图标

您可以使用 chrome 网站图标。这些将由浏览器缓存提供。

manifest.json

"permissions": [
    ...
    "chrome://favicon/"
]

background.js

如果您想在页面上下文（内容脚本）中使用图标，您可能必须将它们转换为数据 URL 才能绕过 CORS 限制。

function convertImgToBase64URL(url, callback, outputFormat){
    var img = new Image();
    img.crossOrigin = 'Anonymous';
    img.onload = function(){
        var canvas = document.createElement('CANVAS'),
        ctx = canvas.getContext('2d'), dataURL;
        canvas.height = img.height;
        canvas.width = img.width;
        ctx.drawImage(img, 0, 0);
        dataURL = canvas.toDataURL(outputFormat);
        callback(dataURL);
        canvas = null; 
    };
    img.src = url;
}

function getFaviconFromURL(url, callback){
  return convertImgToBase64URL("chrome://favicon/" + url, callback);
}

getFaviconFromURL('http://google.com', function(dataURL){
  console.log(dataURL);
});

您甚至可以获得不同大小的图标：

chrome://favicon/size/16@1x/https://www.google.com
chrome://favicon/size/16@2x/https://www.google.com

2。使用网站图标 API

http://www.google.com/s2/favicons?domain=

在 css 背景中使用图标 *.ico

Use favicon *.ico in css background

html

css

google-chrome-extension

1。 Chrome 网站图标

manifest.json

background.js

2。使用网站图标 API