如何使用 JavaScript 获取网站的图标?

问题描述 投票:0回答:6
我想知道是否可以通过带有

JavaScript

 的 URL 获取网站的图标。

例如,我有 URL

http://www.bbc.co.uk/

,我想获取 
<link rel="icon" .../>
 元标记中描述的图标的路径 - 
http://www.bbc.co.uk/favicon.ico

我有很多 URL,因此不应加载每个页面并搜索

link

 标签。

有什么想法吗?

javascript favicon
6个回答
59
投票
这里有 2 个工作选项,我测试了 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' />
    

27
投票
突然我发现了一个叫做

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


17
投票
您可以使用 YQL 来实现

http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%3D“http://bbc.co.uk/”和%20xpath%3D “/html/head/link[@rel%3D'icon']%20|%2 0/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

此查询由

显示 Feed Favicons Greasemonkey 脚本使用。

您可以在 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%27快捷方式%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 中


1
投票
经过 30,000 到 40,000 次测试后,我注意到你确实遇到了很多不同的情况,需要应对。

起点当然是只查看其中的 rel 标签并获取它,但一路走来,您会发现越来越多的情况必须涵盖。

如果有人会查看此线程并尝试接近 100% 完美,我在这里上传了我的(PHP)代码:

https://plugins.svn.wordpress.org/wp-favicons/trunk/includes/server/类-http.php。这是 (GPL) WordPress 插件的一部分,该插件或多或少地根据当时的请求检索 Favicons,摆脱了标准 Google 插件的限制(如上所述)。该代码找到的图标比 Google 的代码要多得多。但也包括谷歌和其他作为图像提供者,以缩短尝试检索图标的进一步迭代。

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

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


0
投票
这些天我觉得 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
这是我写的一篇

文章,关于可以从多个源获取图标的解决方案。

这是源代码:

<!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>
    

0
投票
根据记录,DuckDuckGo 还具有“隐藏”图标服务:

https://icons.duckduckgo.com/ip3/www.google.com.ico https://external-content.duckduckgo.com/ip3/www.google.com.ico
    
© www.soinside.com 2019 - 2024. All rights reserved.