html自动获取logo图标

a标签前自动获URL对应的Logo

以下使用JavaScript原生代码，只需要在域名后添加favcion.ico以作为img标签的src路径即可，先看效果图

 <ul class="ul-none">
      <li><a class="url-host" href="http://www.baidu.com"><img>百度</img></a></li>
      <li><a class="url-host" href="https://cn.bing.com/images/trending?form=Z9LH"><img>必应搜图</img></a> </li>
      <li><a class="url-host" href="http://www.sogou.com"><img>搜狗</img></a></li>
      <li><a class="url-host" href="http://huawei.com"><img>华为</img></a></li>
      <li><a class="url-host" href="http://Tencent.com"><img>腾讯</img></a> </li>
      <li><a class="url-host" href="http://www.microsoft.com/zh-cn/software-download/windows10"><img>Window 10下载</img></a> </li>
</ul>

javaScript代码

<script type="text/javascript">
    /*动态添加图片路径*/
    var urls = document.getElementsByClassName("url-host")
    for (var i=0;i<urls.length;i++){
        var url = urls[i].host
        var imgUrl = "http://"+url+"/favicon.ico"
        var img = urls[i].getElementsByTagName("img")
        img[0].setAttribute("src",imgUrl)
    }
</script>

给图片加了些简单的样式控制图片大小

.url-host>img{
   width:2rem;
   height: 2rem;
   margin: 1rem;
   border-radius: 20%;
}