Question

我想知道是否可以通过JavaScript的网址获取网站的网站图标。

例如，我有一个网址http://www.bbc.co.uk/，我希望获得<link rel="icon" .../>元标记中描述的网站图标的路径 - http://www.bbc.co.uk/favicon.ico。

我有很多网址，因此我不应该加载每个网页并搜索link代码。

有什么想法吗？

Answer 1

这里有两个工作选项，我测试了超过100个网址，每个选项都得到了不同的结果。请注意，此解决方案不是JS，但可能不需要JS。

<!-- Free --> 
<img height="16" width="16" src='http://www.google.com/s2/favicons?domain=www.edocuments.co.uk' />
<!-- Paid -->
<img height="16" width="16" src='http://grabicon.com/edocuments.co.uk' />

Answer 2

突然间，我发现了一个名为Google Shared Stuff的东西，它通过主机名返回带有网站首选图标的图像：

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

但是对于BBC网站来说，它返回的图标有点小。比较：

http://www.google.com/s2/favicons?domain=www.bbc.co.uk
http://www.bbc.co.uk/favicon.ico

Answer 3

您可以使用YQL

http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%3D"http://bbc.co.uk/"and%20xpath%3D"/html/head/link[@rel%3D'icon']%20|%20/html/head/link[@rel%3D'ICON']%20|%20/html/head/link[@rel%3D'shortcut%20icon']%20|%20/html/head/link[@rel%3D'SHORTCUT%20ICON']"&format=json&callback=grab

Display Feed Favicons Greasemonkey script使用此查询。

您可以在YQL控制台中编写查询，但需要登录（顺便说一下，不使用查询）：

http://developer.yahoo.com/yql/console/#h=select%20*%20from%20html%20where%20url%3D%22http%3A//bbc.co.uk/%22and%20xpath%3D%22/html/head/link%5B@rel%3D%27icon%27%5D%20%7C%20/html/head/link%5B@rel%3D%27ICON%27%5D%20%7C%20/html/head/link%5B@rel%3D%27shortcut%20icon%27%5D%20%7C%20/html/head/link%5B@rel%3D%27SHORTCUT%20ICON%27%5D%22

如果存在favicon，则优于http://www.google.com/s2/favicons?domain=www.domain.com，但不在domain.com/favicon.ico中

Answer 4

免责声明：我自己制作了此服务，但您可以尝试http://grabicon.com。这是一个非常简单的用于处理调整大小和重新格式化的图标的API。它还使用了许多主动缓存来提高速度。像大多数其他此类服务一样，您可以将其直接插入HTML中，并且效果很好。我还没有在线文档，但这里有一些使用每个人最喜欢的网站的例子：

获取PNG格式的图标：

http://grabicon.com/icon?domain=microsoft.com

调整为64像素的正方形：

http://grabicon.com/icon?domain=microsoft.com&size=64

这会使用人们可以实现的各种方法搜索图标，并使用可用的最高分辨率版本，因为favicon.ico文件实际上包含集合图标。它使用该版本调整大小以适应您的偏好，除非已经有完美的匹配。

让我知道你们的想法，以及你们可能会喜欢的其他功能！

<强>更新

Grabicon现在又回来了，它不会去任何地方。它最初是为后来决定不支持它的客户而构建的。但现在它在我的直接照顾下，具有更好的速度和调整大小的能力。

Answer 5

最近我认为 GitHub 的服务比 Google 的服务做得好得多：

https://favicons.githubusercontent.com/microsoft.com

虽然看起来都不是完美的。对于计算器溢出：

作品：https://www.google.com/s2/favicons?domain=stackoverflow.com
不起作用：https://favicons.githubusercontent.com/stackoverflow.com

对于 GitHub：

不起作用：https://www.google.com/s2/favicons?domain=github.com
作品：https://favicons.githubusercontent.com/github.com

这是一个关于可以从多个来源获取网站图标的解决方案的article I wrote。

这是源代码：

<!DOCTYPE html>
<html>
<body style="background-color:grey;">
<script type="text/javascript">

const KRequestFaviconGitHub = 'https://favicons.githubusercontent.com/';
const KRequestFaviconGoogle = 'https://www.google.com/s2/favicons?domain=';

const KDefaultUrl = KRequestFaviconGoogle;

// We rely on pre-defined hostname configurations
const hostnames = {
    "stackoverflow.com": { url:KRequestFaviconGoogle+"stackoverflow.com", invert:0 },
    "theregister.co.uk": { url:KRequestFaviconGoogle+"theregister.co.uk", invert:1 },
    "github.com": { url:KRequestFaviconGitHub+"github.com", invert:1 },
    "android.googlesource.com": { url:KRequestFaviconGoogle+"googlesource.com", invert:0 },
    "developer.android.com": { url:KRequestFaviconGitHub+"developer.android.com", invert:0 }
};

document.addEventListener('DOMContentLoaded', function(event) {

    addFavicon("stackoverflow.com");
    addFavicon("bbc.co.uk");
    addFavicon("github.com");
    addFavicon("theregister.co.uk");
    addFavicon("developer.android.com");
    addFavicon("android-doc.github.io");
    addFavicon("slions.net");
    addFavicon("alternate.de");
    addFavicon("amazon.de");
    addFavicon("microsoft.com");
    addFavicon("apple.com");
    addFavicon("googlesource.com");
    addFavicon("android.googlesource.com");
    addFavicon("firebase.google.com");
    addFavicon("play.google.com");
    addFavicon("google.com");
    addFavicon("team-mediaportal.com");
    addFavicon("caseking.de");
    addFavicon("developer.mozilla.org");
    addFavicon("theguardian.com");
    addFavicon("niche-beauty.com");
    addFavicon("octobre-editions.com");
    addFavicon("dw.com");
    addFavicon("douglas.com");
    addFavicon("douglas.de");
    addFavicon("www.sncf.fr");
    addFavicon("paris.fr");
    addFavicon("bahn.de");
    addFavicon("hopfully.that.domain.does.not.exists.nowaythisisavaliddomain.fart");

});

/**
*
*/
function addFavicon(aDomain)
{
    var a = document.createElement("a");
    a.href = "http://" + aDomain;
    //a.style.display = "block";
    var div = document.createElement("div");
    div.innerText = aDomain;
    div.style.verticalAlign = "middle";
    div.style.display = "inline-block";
    var img = document.createElement("img");
    img.className = "link-favicon";
    img.style.width = "16px";
    img.style.height = "16px";
    img.style.verticalAlign = "middle";
    img.style.display = "inline-block";
    img.style.marginRight = "4px";
    a.prepend(img);
    a.appendChild(div);
    document.body.appendChild(a);
    document.body.appendChild(document.createElement("p"));

    const conf = hostnames[aDomain]
    if (conf==null)
    {
        img.src = KDefaultUrl+aDomain;
    }
    else
    {
        img.src = conf.url;
        img.style.filter = "invert(" + conf.invert + ")";
    }
}
</script>
</body>
</html>

使用JS获取网站的favicon

5 个答案: