在CSS背景中使用网站图标*.ico

Question

在CSS背景中使用网站图标*.ico

csshtmlgoogle-chrome-extension

3

我正在开发一个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格式的文件，但看来并不是。由于我没有时间去调查，所以我将保留这个问题供其他浏览器解决。

- Mark Robbins

2

我不知道有没有，但你可以使用任何能够执行imagemagick或类似操作的工具来轻松地构建一个。 - Brad

同时，为了更可靠，请使用谷歌的网站图标获取服务： http://www.google.com/s2/favicons?domain_url=my_url - Marc Guiselin

ICO 图像在所有浏览器中都可以使用。 - Michał Perłakowski

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- HaNdTriX · Accepted Answer

我建议您不要在代码中使用直接的favicon url。许多网站的favicon并不在其根目录下。

但是，不用担心，您有很多替代方案。

1. Chrome Favicons

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

manifest.json

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

background.js

如果您想在页面上下文（内容脚本）中使用图标，则可能需要将它们转换为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=

使用Favicon API可以获得网站的图标。只需将所需域名添加到API URL中即可。