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

Question

我试图在 html 中显示标签和 url。是否可以显示来自互联网的每个网址的图标？（我想自动显示图标，而不是在每个之前添加）这可能吗？

Answer 1

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

<ul>

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

  <li class="link"><a href="https://stackoverflow.com">Stackoverflow.com</a></li>

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

</ul>

您可以添加脚本标记并循环遍历列表中的每个项目，将标准 favicon 文件名 (favicon.ico) 附加到该项目的 url，然后使用该 url 作为源创建一个图像元素

例子：

<ul>

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

  <li class="link"><a href="https://stackoverflow.com">Stackoverflow.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://stackoverflow.com">

  Stackoverflow.com

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

</a>

Answer 3

以下代码会将网站图标添加到所有链接（内部链接或非 http 链接除外）之前，这些链接均包装在带有favicon类的父容器内。

此外，就速度而言，最好使用 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>