如何获取网站的网站图标?

204

很简单的问题:我创建了一个小应用程序,基本上只是一个收藏夹,它坐落在我的系统托盘中,以便我可以从同一位置打开经常使用的站点/文件夹/文件。从我的系统获取已知文件类型的默认图标并不是非常复杂,但是我不知道如何获取网站的favicon。(例如,SO在地址栏中具有灰色->橙色堆栈图标)

有人知道我该如何做到这一点吗?


1
我不确定自动加载/解析此页面有多容易(或可能),但它似乎拥有一切:Favicon-Checker。至少,您可以将其用作参考/检查。 - Kevin Fegan
你可以直接使用Statvoo Favicon API,这将非常快速和无痛。 - AO_
1
Favicon Kit 让您像普通图像一样获取和嵌入站点图标,并且如果可用,可以获得比 16 像素大得多的尺寸。(声明:我是作者) - AndreasPizsa
17个回答

366
您需要采取以下几种方法来解决这个问题:
  1. 在域的根目录下查找 favicon.ico

    www.domain.com/favicon.ico

  2. 寻找带有 rel="shortcut icon" 属性的 <link> 标签

    <link rel="shortcut icon" href="/favicon.ico" />

  3. 寻找带有 rel="icon" 属性的 <link> 标签

    <link rel="icon" href="/favicon.png" />

后两种方法通常会产生更高质量的图像。


为了覆盖所有情况,还有特定设备图标文件,可能会产生更高质量的图像,因为这些设备通常具有比浏览器需要的图标更大的图标:

<link rel="apple-touch-icon" href="images/touch.png" />

<link rel="apple-touch-icon-precomposed" href="images/touch.png" />


如果您只是想下载图标而不在意图标类型,可以使用像 http://www.google.com/s2/favicons 这样的实用工具来完成所有繁重的工作:

var client = new System.Net.WebClient();

client.DownloadFile(
    @"http://www.google.com/s2/favicons?domain=stackoverflow.com",
    "stackoverflow.com.ico");

2
GetFavIcon还能用吗?当我运行你的示例时,我得到了一个400错误。 - Julien
34
谷歌似乎现在也有类似的服务:http://www.google.com/s2/favicons?domain_url=stackoverflow.com。 - hunter
39
如果有人想要一个替代谷歌的选项,DuckDuckGo提供了另一个解决方案:http://icons.duckduckgo.com/ip2/www.stackoverflow.com.ico - Jose Serodio
3
@JoseSerodio - 嗯...那是我尝试的第一件事,但对于我正在检查的域,我只得到了一个“暗淡”的图像,里面有一个右指向箭头(大于号)在一个圆圈内-在一个正方形内。它看起来像这样,但我检查了一下,确保我正确拼写了“domain.com.ico”。现在,通过互联网的奇迹,它正在正确地工作...想象一下=)所以,不用理会了。 - Kevin Fegan
7
请在参数中添加 &sz=:size,其中的 :size 表示图片的像素大小,例如 https://www.google.com/s2/favicons?sz=32&domain_url=stackoverflow.com - ATYB
显示剩余8条评论

60

2020年更新

以下是你可以在2020年及以后使用的三项服务。

<img height="16" width="16" src='https://icons.duckduckgo.com/ip3/www.google.com.ico' />

<img height="16" width="16" src='http://www.google.com/s2/favicons?domain=www.google.com' />

<img height="16" width="16" src='https://api.statvoo.com/favicon/?url=google.com' />

5
grabicon.com现在已成为付费服务,起价为每月$9。 - janot
1
另外一个:http://favicon.allesedv.com/ <img width="144" height="144" src="//f3.allesedv.com/144/www.stackoverflow.com" /> - Martin Seitl
1
谢谢@AO_,我现在实际上正在使用DuckDuckGo,我已经更新了我的答案。 - Blowsie
1
@AO_ 那么stavoo API只是Google服务的包装器。 - vixalien
1
@saintvixalien,我相信最近对于那些没有使用API密钥进行初始化的人来说已经发生了变化,因为服务器正在受到攻击。我使用主要服务与API密钥,并直接获得响应而不需要包装器。我确实测试过没有API密钥,它会像你说的那样重定向到Google的服务。 - AO_
显示剩余5条评论

19

是的,这就是我所做的。对于我的Tampermonkey脚本,我只需更改“domain =”(例如https://www.google.com/s2/favicons?domain=doodstream.com)即可。 - Sridhar Sarnobat

15

10
您可以通过以下3个步骤无需编程来完成:
    1. 打开网站,右键单击并选择"查看源代码"以打开该网站的HTML代码。然后在文本编辑器中搜索"favicon" - 它会指向类似于以下内容:

    <link rel="icon" href='/SOMERELATIVEPATH/favicon.ico' type="image/x-icon" />

    获取href中的字符串,并将其附加到网站的基本URL(假设为"http://WEBSITE/"),使其看起来像

    http://WEBSITE/SOMERELATIVEPATH/favicon.ico

    这是favicon的绝对路径。如果您没有以这种方式找到它,则它也可能在根目录中,在这种情况下URL为http://WEBSITE/favicon.ico

    2. Take the URL you determined and insert it into the href-Parameter of the following code:
    <html>
      <head>
       <title>Capture Favicon</title>   
      </head>
      <body>
        <a href='http://WEBSITE/SOMERELATIVEPATH/favicon.ico' alt="Favicon"/>Favicon</a> 
      </body>
    </html>
    
    3. 将此HTML代码保存在本地(例如桌面)并命名为GetFavicon.html,然后双击它打开。它只会显示一个名为Favicon的链接。右键单击此链接,选择"另存为..."将Favicon保存到您的本地PC即可完成!

8

7
首先要查找的是站点根目录中的/favicon.ico文件;类似于WebClient.DownloadFile()这样的方法应该能够很好地实现。但是,你也可以在元数据中设置图标 - 对于SO来说,这是:
<link rel="shortcut icon"
   href="http://sstatic.net/stackoverflow/img/favicon.ico">

请注意,可能会提供其他图标;例如,“touch”图标往往更大、更高分辨率。
<link rel="apple-touch-icon"
   href="http://sstatic.net/stackoverflow/img/apple-touch-icon.png">

如果是HTML格式,你可以使用HTML Agility Pack或XmlDocument来解析,然后使用WebClient.DownloadFile()方法下载。

以下是我使用Agility Pack获取此内容的代码:

var favicon = "/favicon.ico";
var el=root.SelectSingleNode("/html/head/link[@rel='shortcut icon' and @href]");
if (el != null) favicon = el.Attributes["href"].Value;

请注意,这个图标属于他们,而不是你的。

1
谢谢Marc。我很感激这个例子。关于图片,我不打算修改它们或将它们用于除了快捷方式标签旁边的上下文菜单中的图标之外的任何其他用途。 - Steven Evers

6

2020年,从CLI使用duckduckgo.com的服务

curl -v https://icons.duckduckgo.com/ip2/<website>.ico > favicon.ico

示例

curl -v https://icons.duckduckgo.com/ip2/www.cdc.gov.ico > favicon.ico

对我来说非常有效。 - conmak

6
您可以从网站的HTML中获取favicon URL。
这是`favicon`元素:
<link rel="icon" type="image/png" href="/someimage.png" />

在这里应该使用正则表达式。如果没有找到标签,则在站点根目录中查找favicon.ico。如果仍未找到,则该站点没有favicon。


4
从我的研究和其他资源中综合答案如下。
根据您的需求,有几种实现方法。其中一些比其他方法更可靠。
  1. 获取嵌入favicon的URL:

  2. 同时获取多个网站的favicon

  3. 其他替代方法


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接