logo标签列表

如何使用JavaScript获取网站的favicon？

javascriptfavicon
41

我想知道是否可以使用 JavaScript 通过 URL 获取网站的 favicon。

例如，我有一个 URL：http://www.bbc.co.uk/，我想获取在 <link rel="icon" .../> meta 标签中描述的 favicon 路径 - http://www.bbc.co.uk/favicon.ico。

我有很多 URL，所以不应该加载每个页面并搜索 link 标签。

有什么想法吗？

5个回答
58

这里有两个可行的选项，我测试了100多个URL并得到了每个选项不同的结果。请注意，这个解决方案并不使用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' />
3
只是提供信息，Grabicon是一项付费（免费试用）服务。 - Sean O
3
你好，我是Grabicon的创始人。事实上，同时保持它的可靠性、可用性和免费/付费模式是不可能的。现在它采用了免费试用模式。好的一面是，它现在稳定了，不会消失。 - Jaime Bellmyer
1
似乎 grabicon.com 已经消失了。 - Can Rau
1
@CanRau 嗯，第一种解决方案仍然可行（并支持更高分辨率的网站图标）。 - Rudra Saraswat
1
@CanRau 像这样：https://t0.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=http://www.google.com&size=256 （更改末尾的大小值以获取不同分辨率的图标） - Rudra Saraswat
显示剩余3条评论
26
ICO格式可以包含多个不同尺寸的图像，而Google的S2只提供了16x16像素的图像（最常用的尺寸）。 - Diogo Gomes
Google Shared Stuff已经被下线。 - Ken Liu
3
截至2014年11月17日，此解决方案仍然有效。 - timothyjgraham
工作于2021年4月，但图像太模糊。 - Maku
1
@Maku 这可能是与网站图标本身有关的问题，或者您正在获取16x16版本并放大。 - Rudra Saraswat
显示剩余2条评论
17
你可以使用 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
它比 http://www.google.com/s2/favicons?domain=www.domain.com 更好，因为在图标存在但不在 domain.com/favicon.ico 中时也可以正常工作。
5
GitHub也提供了自己的网站图标服务 => favicons.githubusercontent.com/domain.com - Sam Denty
@samdd 我该如何从那个服务中获取实际的 .png 或 .jpg 图像，我正在检查页面但没有找到 .jpt 或 .png :) - GOXR3PLUS
@GOXR3PLUS 你不行；Github只是代理它以供他们的服务使用。我怀疑他们不希望人们使用它，但它仍然可以工作。 - Sam Denty
1

经过3万到4万次测试，我发现你真的会遇到许多不同的情况需要解决。

当然，起点只是查看其中的rel标签并提取它，但沿途你会发现越来越多的情况需要覆盖。

如果有人看到这个帖子并试图接近100％的完美，我在这里上传了我的（PHP）代码：https://plugins.svn.wordpress.org/wp-favicons/trunk/includes/server/class-http.php。这是一个（GPL）WordPress插件的一部分，可以根据请求检索Favicons，更多或更少地超出了标准Google的限制（如上所述）。该代码找到了比Google代码更多的图标。但也包括Google和其他作为图像提供者，以便缩短尝试检索图标的进一步迭代。

当你阅读代码时，你可能会遇到一些情况，例如base64数据URI、页面重定向到404页面或重定向多次、检索奇怪的HTTP状态码并需要检查每个可能的HTTP返回代码的有效性、图标本身具有错误的MIME类型、客户端刷新标记、在根文件夹中的图标以及在HTML代码中没有图标等等。
如果你返回上一级目录，你会发现其他的类，这些类是用来存储实际图标和它们的URL的（当然你需要找出哪些“分支”使用相同的favicon，哪些不是，并找出它们是否属于同一个“所有者”或真正不同的部分但在同一个域名下）。
0

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

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

虽然两者都不完美。

适用于GitHub：

这是我写的一篇文章，介绍了一个可以从多个来源获取网站图标的解决方案。

以下是源代码：

<!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>
1
Github服务不再适用于公共用户。 - Lyokolux
因此，多源解决方案。看起来GitHub完全断开了插头，或者他们把它移到了其他地方。 - Slion
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接