外部链接旁边的 Favicons

除非我们为每个要执行此操作的网站创建一个自定义 CSS 选择器，否则 CSS 无法从链接中提取 href 并将其用于在链接旁边放置 Favicon。但是，如果我们引入一点 JavaScript，就可以完成它。

“我希望”仅使用 CSS 的方法

如果您的 HTML 结构简单，像这样

<a href="https://github.com">GitHub</a>

然后您可以使用类似 getFavicon 的服务访问您需要的一切信息来插入 Favicon 的背景图像。

/* Fair warning, this doesn't work */

a[href^="http://"]::before {
  content: url(https://g.etfv.co/ + attr(href));
}

也许语法不会完全像这样，但应该是类似的。关键是您不能在 CSS 中将 url() 语法混合到部分中。

Google 的 Favicon 服务

Google 拥有自己的 Favicon 服务，您可以使用它。 例如

https://www.google.com/s2/u/0/favicons?domain=css-tricks.com

自动化

诀窍是您只需要主机名和 TLD，其他都不需要。我四处搜索，找到了一个简单的正则表达式，可以从任何 URL 中获取它。我们需要它，因为链接并不总是（甚至通常不是）网站的根目录。

function getDomain(url) {
  return url.match(/:\/\/(.[^/]+)/)[1];
}

使用这些内容和 jQuery，我们将找到所有链接并将 Favicon 作为背景图像应用。外部链接检查非常基本，但如果需要，您可以 在这里找到更强大的方法。

$("a[href^='http']").each(function() {
  $(this).css({
    background: "url(http://www.google.com/s2/favicons?domain=" + getDomain(this.href) + ") left center no-repeat",
    "padding-left": "20px"
  });    
});

然后 @travis 提醒我，您只需使用 this.hostname 而不是花哨的正则表达式。所以

/* Nothing else needed */
$("a[href^='http']").each(function() {
  $(this).css({
    background: "url(https://www.google.com/s2/favicons?domain=" + this.hostname + ") left center no-repeat",
    "padding-left": "20px"
  });    
});

我不确定 hostname 的浏览器支持情况如何，它是否与 href 一样好，或者更差一些，不确定。

getFavicon 方法

@seanodotcom 向我展示了另一个类似的服务，名为 getFavicon。

它由 Google AppEngine 托管，但不是 Google 自己的服务。我发现它有点慢。但优势在于您根本不需要处理主机名，只需将完整 URL 提供给它们即可。

那么它就变成了

$("a[href^='http']").each(function() {
    $(this).css({
        background: "url(https://g.etfv.co/" + this.href + ") left center no-repeat",
        "padding-left": "20px"
    });
});​

查看演示

性能？

正如您所知，页面发出的 HTTP 请求数量对性能至关重要。这些技术中的每个小图像都是一个页面请求。

@yuritkanchenko 向我指出了一个很酷的 Favicon 服务，可以自动为您生成 Favicon 雪碧图，以便您只保留一个请求。

例如

http://favicon.yandex.net/favicon/google.com/yandex.ru/css-tricks.com

我担心我没有走得更远，编写了查找所有链接、连接域、发出请求，然后将图像应用为雪碧图所需的 JavaScript 代码，但我相信，如果您确实需要它，您可以很快地将其编写出来。