如何获取给定URL的高分辨率网站徽标(favicon)

问题描述 投票:22回答:4

我正在Android上开发一个网络浏览器,并希望显示访问量最大的网站的网址,例如Chrome(4 X 2)。但问题是,大多数favicons(例如:http://www.bbc.co.uk/favicon.ico)的大小为16X16或32X32,并且在放大时看起来不太好。

有没有办法以标准方式为URL下载高分辨率图标/位图?如何打开主页,然后提取所有图像链接,然后选择一个名称为logo的图像?这种方法适用于所有网址吗?我想知道是否有一种标准方法可以获得给定URL的高分辨率图标,或者图标是获取网站徽标的唯一标准方法?

image url browser favicon graphical-logo
4个回答
45
投票

您可以自己编写代码或使用现有解决方案。

自己动手算法

  1. 在代码中查找Apple touch图标声明,例如<link rel="apple-touch-icon" href="/apple-touch-icon.png">。这些图片的范围从57x57到152x152。请参阅Apple specs以获取完整参考。
  2. 即使您没有找到Apple touch图标声明,也请尝试根据Apple命名约定加载它们。例如,您可能会在/apple-touch-icon.png找到一些东西。再次,请参阅Apple specs以供参考。
  3. 在代码中寻找高清PNG图标,例如<link rel="icon" type="image/png" href="/favicon-196x196.png" sizes="196x196">。在此示例中,您有196x196图片。
  4. 查找Windows 8 / IE10和Windows 8.1 / IE11平铺图片,例如<meta name="msapplication-TileImage" content="/mstile-144x144.png">。这些图片的范围从70x70到310x310,甚至更多。请参阅这些Windows 8Windows 8.1参考文献。
  5. 寻找专用于Windows 8.1 / IE11的/browserconfig.xml。这是您可以找到瓷砖图片的另一个地方。见Microsoft specs
  6. 寻找og:image声明,如<meta property="og:image" content="http://somesite.com/somepic.png"/>。这是一个网站如何向FB / Pinterest /表示它的首选图片。请参阅Open Graph Protocol以供参考。
  7. 此时,你发现没有合适的标志......该死的!您仍然可以加载页面中的所有图片并进行猜测以选择最佳图片。

注意:步骤1,2和3基本上是Chrome为获取书签和主屏幕链接的合适图标所做的工作。 Coast by Opera甚至使用MS平铺图片来完成工作。阅读此列表以找出which browser uses which picture(完全披露:我是本页的作者)。

API和开源项目

RealFaviconGenerator:您可以使用此favicon retrieval API获取任何网站图标或相关图标(例如触摸图标)。完全披露:我是这项服务的作者。

BestIcon:尽管不太全面,Besticon提供了一个很好的选择,特别是如果你想自己托管代码。还有一个hosted version,你可以立即使用。


12
投票

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

(免责声明:我写这篇文章是因为我不久前需要解决同样的问题。)


0
投票

标识不会一致地命名,并且很难一致地识别。考虑将favicon放在合适尺寸的彩色瓷砖上。人们会很快将颜色与网站联系起来。您可以使用colorthief之类的东西从网站或图标中提取主色,或者使用金色角度公式选择每个色调以选择色调。


-3
投票

通常,favicon很小(如16x16或32x32)。如果您需要更大的尺寸,请提取不是图标,而是从主页/标题中提取徽标。

© www.soinside.com 2019 - 2024. All rights reserved.