在css背景中使用favicon * .ico

Question

我正在构建一个使用可搜索列表框来执行常用命令的chrome扩展。窗口打开选项卡也将出现在此列表框中，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

我不建议在代码中使用直接的favicon网址。 许多网站的favicon不在其根目录中。

但不用担心你有很多选择。

1。 Chrome Favicons

您可以使用chrome favicons。这些将由浏览器缓存提供。

的manifest.json

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

background.js

如果要在页面上下文（contentscripts）中使用图标，则可能必须将它们转换为dataURL才能绕过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。使用Favicon API

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