如何获取网站icon

获取网站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