如何使用 JavaScript 获取网站的图标？

Question

I am wondering if it is possible to get a website's favicon by a URL with JavaScript .

For example, I have the URL http://www.bbc.co.uk/ and I would like to get the path to the favicon described in <link rel="icon".../> meta tag - http://www.bbc.co.uk/favicon.ico .

I have many URLs so that should not load every page and search for link tag I think.

Any ideas?

Answer 1

Here are 2 working options, I tested over 100 urls and got different results which each option. Please note, this solution is not JS , but JS may not be necessary.

<!-- Free --> 
<img height="16" width="16" src='http://www.google.com/s2/favicons?domain=www.edocuments.co.uk' />
<!-- Paid -->
<img height="16" width="16" src='http://grabicon.com/edocuments.co.uk' />

Answer 2

Suddenly I found something called Google Shared Stuff that returns image with website's favicon by hostname:

http://www.google.com/s2/favicons?domain=www.domain.com

But fot BBC site it returns favicon a bit small. Compare:

http://www.google.com/s2/favicons?domain=www.bbc.co.uk
http://www.bbc.co.uk/favicon.ico

Answer 3

You could use YQL for that

http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%3D"http://bbc.co.uk/"and%20xpath%3D"/html/head/link[@rel%3D'icon']%20|%20/html/head/link[@rel%3D'ICON']%20|%20/html/head/link[@rel%3D'shortcut%20icon']%20|%20/html/head/link[@rel%3D'SHORTCUT%20ICON']"&format=json&callback=grab

This query used by Display Feed Favicons Greasemonkey script .

You can write queries in YQL console, but it requires to login (btw, using queries don't):

http://developer.yahoo.com/yql/console/#h=select%20*%20from%20html%20where%20url%3D%22http%3A//bbc.co.uk/%22and%20xpath%3D%22/html/head/link%5B@rel%3D%27icon%27%5D%20%7C%20/html/head/link%5B@rel%3D%27ICON%27%5D%20%7C%20/html/head/link%5B@rel%3D%27shortcut%20icon%27%5D%20%7C%20/html/head/link%5B@rel%3D%27SHORTCUT%20ICON%27%5D%22

It is better than http://www.google.com/s2/favicons?domain=www.domain.com , in case favicon exists, but doesn't located in domain.com/favicon.ico

Answer 4

After 30.000 to 40.000 tests I noticed that you really encounter lots of different situations which have to be worked against.

The starting point is ofcourse somewhere to only look at the rel tag in there and fetch this, but along the way you will find more and more situations you will have to cover.

In case anyone will look at this thread and tries to come closer to 100% perfection I uploaded my (PHP) code here: https://plugins.svn.wordpress.org/wp-favicons/trunk/includes/server/class-http.php . This is part of a (GPL) WordPress Plugin that retrieves Favicons, more or less on request back then, out of limitations of the standard Google one (as mentioned above). The code finds a substantially amount more icons that the code of Google. But also includes google and others as image providers to shortcut further iterations on trying to retrieve the icon.

When you read through the code you will probably see some situations that you will encounter eg base64 data uris, pages redirecting to 404 pages or redirecting a gazillion times, retrieving weird HTTP status codes and having to check every possible HTTP return code for validness, the icons themselves that have a wrong mime type, client side refresh tags, icons in the root folder and none in the html code, etc... etc... etc...

If you go up a directory you will find other classes that then are ment to store the actual icons against their url (and ofcourse you will then need to find out which "branches" use the same favicon and which not, and find out if they belong to the same "owner" or are really different parts but under the same domain.

Answer 5

These days I thought that GitHub's service did a much better job than Google's:

https://favicons.githubusercontent.com/microsoft.com

Though neither are perfect it seems. For stackoverflow:

• Works: https://www.google.com/s2/favicons?domain=stackoverflow.com
• Does not work: https://favicons.githubusercontent.com/stackoverflow.com

For GitHub:

• Does not work: https://www.google.com/s2/favicons?domain=github.com
• Works: https://favicons.githubusercontent.com/github.com

Here is an article I wrote about a solution that can fetch favicons from multiple source.

Here is the source code:

<!DOCTYPE html>
<html>
<body style="background-color:grey;">
<script type="text/javascript">

const KRequestFaviconGitHub = 'https://favicons.githubusercontent.com/';
const KRequestFaviconGoogle = 'https://www.google.com/s2/favicons?domain=';

const KDefaultUrl = KRequestFaviconGoogle;

// We rely on pre-defined hostname configurations
const hostnames = {
    "stackoverflow.com": { url:KRequestFaviconGoogle+"stackoverflow.com", invert:0 },
    "theregister.co.uk": { url:KRequestFaviconGoogle+"theregister.co.uk", invert:1 },
    "github.com": { url:KRequestFaviconGitHub+"github.com", invert:1 },
    "android.googlesource.com": { url:KRequestFaviconGoogle+"googlesource.com", invert:0 },
    "developer.android.com": { url:KRequestFaviconGitHub+"developer.android.com", invert:0 }
};

document.addEventListener('DOMContentLoaded', function(event) {

    addFavicon("stackoverflow.com");
    addFavicon("bbc.co.uk");
    addFavicon("github.com");
    addFavicon("theregister.co.uk");
    addFavicon("developer.android.com");
    addFavicon("android-doc.github.io");
    addFavicon("slions.net");
    addFavicon("alternate.de");
    addFavicon("amazon.de");
    addFavicon("microsoft.com");
    addFavicon("apple.com");
    addFavicon("googlesource.com");
    addFavicon("android.googlesource.com");
    addFavicon("firebase.google.com");
    addFavicon("play.google.com");
    addFavicon("google.com");
    addFavicon("team-mediaportal.com");
    addFavicon("caseking.de");
    addFavicon("developer.mozilla.org");
    addFavicon("theguardian.com");
    addFavicon("niche-beauty.com");
    addFavicon("octobre-editions.com");
    addFavicon("dw.com");
    addFavicon("douglas.com");
    addFavicon("douglas.de");
    addFavicon("www.sncf.fr");
    addFavicon("paris.fr");
    addFavicon("bahn.de");
    addFavicon("hopfully.that.domain.does.not.exists.nowaythisisavaliddomain.fart");

});

/**
*
*/
function addFavicon(aDomain)
{
    var a = document.createElement("a");
    a.href = "http://" + aDomain;
    //a.style.display = "block";
    var div = document.createElement("div");
    div.innerText = aDomain;
    div.style.verticalAlign = "middle";
    div.style.display = "inline-block";
    var img = document.createElement("img");
    img.className = "link-favicon";
    img.style.width = "16px";
    img.style.height = "16px";
    img.style.verticalAlign = "middle";
    img.style.display = "inline-block";
    img.style.marginRight = "4px";
    a.prepend(img);
    a.appendChild(div);
    document.body.appendChild(a);
    document.body.appendChild(document.createElement("p"));

    const conf = hostnames[aDomain]
    if (conf==null)
    {
        img.src = KDefaultUrl+aDomain;
    }
    else
    {
        img.src = conf.url;
        img.style.filter = "invert(" + conf.invert + ")";
    }
}
</script>
</body>
</html>

Answer 6

Disclaimer: I built this service myself, but you can try http://grabicon.com . It's a very simple API for favicons that handles resizing and reformatting on the fly. It uses a lot of proactive caching for speed, as well. Like most other services like this, you can insert this directly into your HTML and it works great. I don't have online documentation just yet, but here are some examples using everybody's favorite web destination:

Get the icon in PNG format:

http://grabicon.com/icon?domain=microsoft.com

Resize to 64 pixels square:

http://grabicon.com/icon?domain=microsoft.com&size=64

This hunts down the icon using the various methods people can implement them, and uses the highest resolution version available, since favicon.ico files actually contain a collection of icons. It uses that version to resize to your preference, unless a perfect match is already available.

Let me know what you guys think, and what other features you might like!

UPDATE:

Grabicon is now back in operation, and it's not going anywhere. It was originally built for a customer who later decided not to support it. But now it's under my direct care, with much better speed and resizing capability.