如何获取给定 URL 的高分辨率网站徽标（图标）
Posted
技术标签:
【中文标题】如何获取给定 URL 的高分辨率网站徽标（图标）【英文标题】：How to get high resolution website logo (favicon) for a given URL 【发布时间】：2014-03-26 07:25:32 【问题描述】：我正在开发一个 android 网络浏览器，并希望在 Chrome (4 X 2) 中显示访问量最大的网站的 URL 徽标。但问题是大多数网站图标（例如：http://www.bbc.co.uk/favicon.ico）的大小不是 16X16 就是 32X32，放大后看起来不太好。
有没有办法以标准方式下载 URL 的高分辨率图标/位图？打开主页，然后提取所有图像链接，然后选择其中包含名称徽标的图像如何？这种方法是否适用于所有 URL？我想知道是否有一种标准方法可以为给定的 URL 获取高分辨率图标，或者 favicon 是获取网站徽标的唯一标准方法吗？
【问题讨论】：
Firefox 对经常访问的页面进行截图，并将它们作为缩略图排列在起始页上。我认为这是最好的方法。除此之外，除了 favicon 之外，没有标准化的方式。您可以扫描页面的页眉区域并尝试在其中找到通常最左侧最大的图像，这应该是网站的徽标。您可以分析最流行的 CMS 和博客软件，了解一些常见的徽标标记或排列模式。这也是相关的：googlewebmastercentral.blogspot.com/2013/05/… Chrome 通过有效地截取渲染网页的屏幕截图然后将其缩小到合适的大小来做到这一点。您可以在浏览器中执行此操作吗？ 我可以从 webView 获取快照，但问题是当我们在移动设备上显示多个快照时，它没有多大意义。我还必须将所有访问过的页面的快照保存在移动设备上。相反，我正在寻找一种可以动态下载图像的解决方案。 @Nobu，我可以从 webView 获取快照，但问题是当我们在移动设备上显示多个快照时，它没有多大意义。我还必须将所有访问过的页面的快照保存在移动设备上。在大多数情况下，如果最左边最大的图像可以是徽标，我会尝试。 浏览器历史列表是否需要这些徽标或图标？您仍然可以裁剪和缩小这些屏幕截图，并创建某种类似于 Android 的任务切换器的视觉效果。但是，如果徽标检测对您有用，那也没关系。您只需要某种后备行为，以防您的浏览器无法检测到徽标 【参考方案1】：您可以自己编写代码或使用现有的解决方案。
自己动手算法
-
在代码中查找 Apple 触摸图标声明，例如
<link rel="apple-touch-icon" href="/apple-touch-icon.png">。这些图片的范围从 57x57 到 152x152。如需完整参考，请参阅 Apple specs。
即使您没有找到 Apple 触摸图标声明，也请尝试根据 Apple 命名约定加载它们。例如，您可能会在 /apple-touch-icon.png 找到一些东西。同样，请参阅 Apple specs 以供参考。
在代码中寻找高清PNG图标，例如<link rel="icon" type="image/png" href="/favicon-196x196.png" sizes="196x196">。在本例中，您有一张 196x196 的图片。
查找 Windows 8 / IE10 和 Windows 8.1 / IE11 平铺图片，例如 <meta name="msapplication-TileImage" content="/mstile-144x144.png">。这些图片的范围从 70x70 到 310x310，甚至更多。请参阅这些 Windows 8 和 Windows 8.1 参考资料。
寻找/browserconfig.xml，专用于Windows 8.1 / IE11。这是您可以找到平铺图片的另一个地方。见Microsoft specs。
查找og:image 声明，例如<meta property="og:image" content="http://somesite.com/somepic.png"/>。这就是网站向 FB/Pinterest/任何首选图片表示它的方式。参考Open Graph Protocol。
此时，您找不到合适的徽标...该死！您仍然可以加载页面中的所有图片并猜测选出最佳的一张。
注意：步骤 1、2 和 3 基本上是 Chrome 为获取适合书签和主屏幕链接的图标所做的工作。 Coast by Opera 甚至使用 MS 平铺图片来完成工作。阅读此列表以了解which browser uses which picture（完全披露：我是此页面的作者）。
API 和开源项目
RealFaviconGenerator：您可以使用此favicon retrieval API 获取任何网站图标或相关图标（例如触摸图标）。完全披露：我是这项服务的作者。
BestIcon：虽然不太全面，但Besticon 提供了一个不错的选择，尤其是如果您想自己托管代码。还有一个hosted version，您可以立即使用。
【讨论】：
非常好！你知道某处的任何 php 实现吗？ 有没有机会为此编写一个 java 类？用 Jsoup 说，给定一个 url，有人可以提取徽标吗？我在第 5 步卡住了 喜欢使用 RealFaviconGenerator。谢谢！ 是否有任何用于此目的的客户端库？ RealFaviconGenerator 是一个很棒的网站【参考方案2】：https://github.com/mat/besticon 的 Go 代码试图解决这个问题。
例如
$ besticon http://github.com
http://github.com: https://github.com/apple-touch-icon-144.png
还有一个随附的托管版本的代码，例如参见 http://icons.better-idea.org/icons?url=github.com。
（免责声明：我写它是因为我不久前需要解决同样的问题。）
【讨论】：
有没有简单的方法在 Java 中使用这段代码？有点像ScriptEngine
我还没有研究在其他环境中使用 Go 代码的可能性/可行性。也就是说，我认为从 Java 中使用它的最简单方法是使用通过 Java 的 HTTP 客户端之一提供的 URL API。
Jiahaog 有这个here 的javascript 实现。【参考方案3】：
徽标不会被统一命名，并且很难统一识别。考虑将网站图标放在尺寸合适的彩色瓷砖上。人们会很快将颜色与网站联系起来。您可以使用 colorthief 之类的工具从网站或网站图标中提取主色，也可以使用黄金角公式选择色调，使每个颜色都独一无二。
【讨论】：
【参考方案4】：这是一个全新的、真正的解决方案，它总是会给你最好的结果-
-
Webchromeclient 为所有网站提供 onReceivedTouchIconUrl 方法的回调，只需从此处保存 url。
下一步是将此网址转换为位图，可以像这样完成-
try
URL url = new URL(touchiconUrl);
HttpURLConnection connection =
(HttpURLConnection)url.openConnection();
connection.setDoInput(true);
connection.connect();
InputStream input = connection.getInputStream();
Bitmap myBitmap = BitmapFactory.decodeStream(input);
return myBitmap;
catch (IOException e)
e.printStackTrace();
return null;
下一步是为快捷方式发送此位图。
注意：记得像 asynctask 一样在后台线程上创建位图。
【讨论】：
【参考方案5】：此 html 文档需要一个基本 url 和网页的 HTML/“查看页面源代码”，并且应该输出这些值。
<!doctype html>
<input type=text placeholder=URL><br>
Place "View Page Source" of HTML homepage<br>
<textarea id=HTML placeholder="HTML content of webpage">
</textarea><br>
<input type=Submit>
<script>
function url(u,n)
try
u = u.getAttribute(n);
catch(e)
return 'null';
if(u.slice(0,2) == "//")
u = "http:"+u;
else if(u.slice(0,1) == "/")
u = u.slice(0,1);
return '<img src="'+u+'">';
document.querySelector('input[type=Submit]').onclick = function()
var output = '';
var HTML = document.getElementById('HTML').value;
var doc = document.implementation.createHTMLDocument("New Document");
doc.documentElement.innerHTML = HTML;
output = output + "apple-touch-icon<br>"+url([].slice.apply(doc.querySelectorAll('link[rel="apple-touch-icon"]')).reverse()[0],'href')
// deprecated output = output + "apple-touch-icon-precomposed<br>"+url([].slice.apply(doc.querySelectorAll('link[rel="apple-touch-icon-precomposed"]')).reverse()[0],'href')
output = output + "<br>image/png<br>" + url(doc.querySelectorAll('link[rel="icon"][type="image/png"]')[0],'href');
// <meta name="msapplication-TileImage" content="/mstile-144x144.png">
// deprecated output = output + "<br>msapplication-Ti:<br>"+ url(doc.querySelectorAll('link[name="msapplication-TileImage"]')[0],'content');
// <meta name="msapplication-config" content="/browserconfig.xml/ ">
//output = output + "<br>msapplication-con: "+ url(doc.querySelectorAll('meta[name="msapplication-config"]')[0],'content');
// <meta property="og:image" content="http://somesite.com/somepic.png"/>
output = output + "<br>og:image<br>" + url(doc.querySelectorAll('meta[property="og:image"]')[0],'content');
// <link rel="image_src" href="https://cdn.sstatic.net/Sites/***/Img/apple-touch-icon.png?v=c78bd457575a">
output = output + "<br>image_source<br>" + url(doc.querySelectorAll('link[rel="image_src"]')[0],'href');
var URL = window.location.hash;
document.getElementById('output').innerHTML = output;
;</script>
<div id=output></div>
如果您想自动检索 HTML，您可以对 PHP 使用类似以下的内容。
<? echo file_get_contents($_GET["url"]);
【讨论】：
【参考方案6】：网站图标通常很小（例如 16x16 或 32x32）。如果您需要更大的尺寸，请不要从主页/标题中提取图标，而是提取徽标。
【讨论】：
是否保证徽标始终出现在标题中？如果一个网页包含多个图像元素，我们如何知道哪个元素对应于徽标？ @Harish 现代浏览器自动检测放在根目录中的网站图标，您不能在网站上包含网站图标代码。如果网站图标在您的网站上，则只需放置更高分辨率的图片。以上是关于如何获取给定 URL 的高分辨率网站徽标（图标）的主要内容，如果未能解决你的问题，请参考以下文章