40

我想知道是否可以通过带有JavaScript.

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

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

有任何想法吗 ？

4

6 回答 6

57

这里有 2 个工作选项，我测试了 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' />
于 2010-10-07T10:12:39.000 回答
25

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

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

但是对于 BBC 网站，它返回的 favicon 有点小。比较：

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

于 2010-01-13T15:18:19.080 回答
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 如果 favicon 存在，但不位于 domain.com/favicon.ico 中，它比 更好

于 2010-01-13T15:29:05.190 回答
1

经过 30.000 到 40.000 次测试后，我注意到您确实遇到了许多不同的情况，必须加以应对。

起点当然是某个地方，只查看那里的 rel 标签并获取它，但在此过程中，您会发现越来越多的情况必须涵盖。

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

当您阅读代码时，您可能会看到一些您会遇到的情况，例如 base64 数据 uri、页面重定向到 404 页面或重定向无数次、检索奇怪的 HTTP 状态代码以及必须检查每个可能的 HTTP 返回代码的有效性，图标本身具有错误的 mime 类型、客户端刷新标签、根文件夹中的图标且 html 代码中没有图标等...等...等...

如果你去一个目录，你会发现其他类，然后将它们存储在它们的 url 上的实际图标（当然，你需要找出哪些“分支”使用相同的图标，哪些不使用，并找出它们是否属于同一个“所有者”或实际上是不同的部分但在同一个域下。

于 2016-04-10T23:11:33.077 回答
0

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

获取PNG格式的图标：

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

调整为 64 像素正方形：

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

这使用人们可以实现它们的各种方法来寻找图标，并使用可用的最高分辨率版本，因为favicon.ico文件实际上包含一组图标。它使用该版本根据您的喜好调整大小，除非已经有完美匹配。

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

更新：

Grabicon 现在又恢复了运营，而且它不会去任何地方。它最初是为后来决定不支持它的客户构建的。但现在它由我直接负责，速度和调整大小的能力要好得多。

于 2011-10-19T15:35:45.103 回答
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>
于 2021-05-21T23:59:49.757 回答