如何获取网站icon有哪些可行的方法

198 阅读 0 评论 131 点赞

我是靠谱客的博主懦弱月饼，最近开发中收集的这篇文章主要介绍如何获取网站icon有哪些可行的方法，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

获取网站icon，常用最简单的方法就是通过website/favicon.ico来获取，不过由于很多网站都是在页面里面设置favicon，所以此方法很多情况都不可用。

更好的办法是通过google提供的服务来实现：
http://www.google.com/s2/favicons?domain=http://www.baidu.com

代码：

复制代码代码如下:

 
<!doctype html> 
<html> 

<head> 
<meta charset="utf-8"> 
<style type="text/css"> 
#input { 
height: 300px; 
padding: 10px 5px; 
line-height: 20px; 
width: 1000px; 
} 
#submit { 
height: 30px; 
text-align: center; 
color: #ffffff; 
line-height: 30px; 
width: 80px; 
background-color: blue; 
margin-top: 20px; 
} 
#result { 
margin-top: 20px; 
} 
#result li { 
height: 40px; 
line-height: 40px; 
float: left; 
margin: 10px 14px; 
} 
</style> 
</head> 

<body> 
<textarea id="input" placeholder="输入多个网址以空格间隔"></textarea> 
<div id="submit">获取icon</div> 
<ul id="result"> 

</ul> 

<script type="text/javascript"> 
var input = document.getElementById("input"); 
var submit = document.getElementById("submit"); 
var result = document.getElementById("result"); 
var val; 

function trim(str) { 
var whitespace = ' nrtfx0bxa0u2000u2001u2002u2003u2004u2005u2006u2007u2008u2009u200au200bu2028u2029u3000'; 
for (var i = 0, len = str.length; i < len; i++) { 
if (whitespace.indexOf(str.charAt(i)) === -1) { 
str = str.substring(i); 
break; 
} 
} 
for (i = str.length - 1; i >= 0; i--) { 
if (whitespace.indexOf(str.charAt(i)) === -1) { 
str = str.substring(0, i + 1); 
break; 
} 
} 
return whitespace.indexOf(str.charAt(0)) === -1 ? str : ''; 
} 

function getFavIconUrl(url) { 
var prohost; 
prohost = url.match(/([^:/?#]+://)?([^/@:]+)/i); 
prohost = prohost ? prohost : [true, "http://", document.location.hostname]; 

//补全url 
if (!prohost[1]) { 
prohost[1] = "http://"; 
} 
//抓取ico 
return "http://www.google.com/s2/favicons?domain=" + prohost[1] + prohost[2]; 
} 
submit.onclick = function() { 
val = input.value; 
if (!val) alert("输入为空！"); 
val = val.split(" "); 
val.forEach(function(item) { 
item = trim(item); 
if (!item) return; 
result.innerHTML += "<li>" + item + "<img src='" + getFavIconUrl(item) + "'></li>"; 
}); 
}; 
</script> 
</body> 
</html> 