在 html 正文中显示每个网站的图标

Question

我正在尝试在 html 中显示标签以及 url。是否可以从互联网上显示每个 url 的图标？（而不是在每个之前添加，我想自动显示图标）

这可能吗？

Answer 1

假设您的 HTML 看起来像这样：

<ul>
  <li class="link"><a href="https://google.com">Google.com</a></li>
  <li class="link"><a href="https://whosebug.com">whosebug.com</a></li>
  <li class="link"><a href="https://example.com">Example.com</a></li>
</ul>

您可以添加脚本标签并遍历列表中的每个项目，将标准图标文件名 (favicon.ico) 附加到该项目的 url，然后使用该 url 作为来源

示例：

<ul>
  <li class="link"><a href="https://google.com">Google.com</a></li>
  <li class="link"><a href="https://whosebug.com">whosebug.com</a></li>
  <li class="link"><a href="https://example.com">Example.com</a></li>
</ul>
<script>
  for (let element of document.getElementsByClassName("link")) {
    var faviconImage = document.createElement("img");
    faviconImage.src = element.children[0].href + "/favicon.ico";
    faviconImage.classList = "faviconImage";
    element.appendChild(faviconImage)
  }
</script>

Answer 2

您可以使用 Google 网站图标抓取器：

<a href="https://whosebug.com">
  whosebug.com
  <img src="https://www.google.com/s2/favicons?domain=whosebug.com">
</a>

Answer 3

以下代码将在所有链接前添加图标图标，内部链接或 non-http 链接除外，这些链接包含在 parent 容器中 favicon class。

此外，就速度而言，最好使用 Google 的网站图标抓取器，而不是像 Lebster 在他的回答中所示那样从每个域手动抓取它。

var host = window.location.host;
var links = document.querySelectorAll('.favicon a');
var googleFaviconGrabber = "https://www.google.com/s2/favicons?domain=";

for (i = 0; i < links.length; i++) {
  var link = links[i];

  // Skip all internal links and non HTTP links

  if (link.href.match("^https?://") && !link.href.match(host)) {

    var domain = link.href.split("/");

    // Apply some CSS styles to the hyperlinks
    link.style.background = "url(" + googleFaviconGrabber + domain[2] + ") center left no-repeat";

    link.style.fontWeight = "bold";
    link.style.padding = "5px 5px 5px 20px";
    link.style.textDecoration = "underline";
  }
}

<div class="favicon">
  This demo shows how to add favicons to external links using javascript. Check out this link to
  <a href="https://codegena.com">Codegena</a>.

  <ul>
    <li> <a href="https://css-tricks.com/">CSS Tricks</a></li>
    <li><a href="https://google.in">Google</a></li>
    <li><a href="http://unheap.com">Unheap</a></li>
    <li><a href="http://www.canva.com/">Canva</a></li>

  </ul>
</div>

在 html 正文中显示每个网站的图标

Show favicon of each website in body of html

html

favicon