快捷方式图标 - 它们隐藏在 html 代码中的什么位置?

shortcut icon - where are they hidden in html code?

大多数快捷方式图标在 HTML 中显示如下:

<link rel="Shortcut icon" href="url" />

但许多网站在其 html 代码中没有快捷方式图标,但 chrome 仍然在选项卡上向我显示图标。他们是怎么做到的?我想从不同的网站下载图标,但我不知道我的爬虫应该在哪里寻找它们。我可以找到的网站示例:

http://www.amazon.com/dp/0976470705?tag=lessolearn01-20&camp=0&creative=0&linkCode=as4&creativeASIN=0976470705&adid=0E34NG800FT9HMWYP4D6

http://www.startuplessonslearned.com/2008/10/lean-startups-vs-lean-companies.html

它被称为网站图标(大多数时候!)。

您指向的第二个 link 是:

<link href='http://www.startuplessonslearned.com/favicon.ico' rel='icon' type='image/x-icon'/>

另外,它可以通过多种方式添加。有关更多信息,请阅读 this article

以第二页为例,标签为

<link href='http://www.startuplessonslearned.com/favicon.ico' rel='icon'
type='image/x-icon'/>

属性规范 rel="icon" 实际上与 rel="shortcut icon" 同义。

在第一页上,没有影响 favicon 问题的标签,但是在 服务器根目录 有一个名为 favicon.ico 的文件,即 http://www.amazon.com/favicon.ico,这是浏览器按照惯例使用的。如果您希望对所有页面使用相同的图标,那么在服务器根目录下以这样的名称放置图标会使 link 元素变得多余。当然不是所有人都能把文件放在服务器根目录下。

您也可以使用 .png 文件:

<link rel="shortcut icon" type="x-icon" href=".directory/image.png" />