获取网站icon,常用最简单的方法就是通过website/favicon.ico来获取,不过由于很多网站都是在页面里面设置favicon(<link rel="shortcut icon" href="http://example.com/favicon.ico" />),所以此方法很多情况都不可用。
更好的办法是通过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; 1000px; } #submit { height: 30px; text-align: center; color: #ffffff; line-height: 30px; 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 = ' fx0bxa0u2000u2001u2002u2003u2004u2005u2006u2007u2008u2009u200au200bu2028u2029u3000'; 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>
源代码下载:http://files.cnblogs.com/shinnyChen/getIcon.rar
后记:
对于国内的网站,也可以使用360的服务:
http://cdn.website.h.qhimg.com/index.php?domain=www.baidu.com