How do I Get a website's favicon using 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?

Blowsie · Answer 1 · 2016-04-15T08:08:00.440

58

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' />

edited Apr 15 '16 at 08:08

answered Oct 07 '10 at 10:12

Blowsie

40,239
15
88
108

3

Just FYI, Grabicon is a pay (free trial) service. – Sean O Oct 02 '15 at 13:15
@SeanO thanks, the goalposts are always changing with free services. – Blowsie Oct 05 '15 at 12:54
3

Hi, I'm the creator of Grabicon. Indeed, it was impossible to keep it reliable, available, AND free/freemium. It now uses a free trial model. On the plus side, it's now stable and not going anywhere. – Jaime Bellmyer Apr 14 '16 at 21:10
1

Seems grabicon.com is gone – Can Rau Jul 13 '22 at 05:58
1

@CanRau Well, the first solution does still work (and supports higher resolution favicons too). – Rudra Saraswat Jul 30 '22 at 07:51
@RudraSaraswat higher resolution how? – Can Rau Aug 02 '22 at 05:14
1

@CanRau like this: https://t0.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=http://www.google.com&size=256 (change the value of size at the end for different resolutions) – Rudra Saraswat Aug 09 '22 at 05:40
Huh interesting, thanks a lot – Can Rau Aug 10 '22 at 14:56

score 26 · Answer 2 · answered Jan 13 '10 at 15:18

26

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

answered Jan 13 '10 at 15:18

hsz

148,279
62
259
315

The ICO format can have multiple images of multiple sizes, Google's S2 just gives you the 16x16 one (the most used one). – Diogo Gomes Apr 07 '10 at 15:42
Google Shared Stuff has since been taken offline. – Ken Liu Apr 17 '10 at 01:53
3

This solution is still working as of 17 November, 2014 – timothyjgraham Nov 17 '14 at 06:34
Working July 2018 – B3none Jul 27 '18 at 15:41
Working June 2020 – Mr Klonwar Jun 10 '20 at 16:58
working April 2021, but image is too blurred – Maku Apr 02 '21 at 19:59
1

@Maku That's probably an issue with the favicon itself, or you're fetching the 16x16 version and zooming in. – Rudra Saraswat Jul 30 '22 at 07:51

NVI · Accepted Answer · 2010-01-13T15:39:59.737

17

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

edited Jan 13 '10 at 15:39

answered Jan 13 '10 at 15:29

NVI

14,907
16
65
104

5

GitHub also offers its own favicon service => [`favicons.githubusercontent.com/domain.com`](https://favicons.githubusercontent.com/domain.com) – Sam Denty Jan 02 '18 at 14:30
@samdd How i can get the actual .png or .jpg image from that service , i am inspecting the page but no where .jpt or .png :) – GOXR3PLUS May 31 '18 at 11:49
@GOXR3PLUS you can't; github just proxies it for use in their services. I doubt they'd want people using it, but it works nevertheless – Sam Denty May 31 '18 at 16:44

edelwater · Answer 4 · 2016-04-10T23:24:03.297

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 e.g. 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.

Slion · Answer 5 · 2021-05-24T16:41:06.133

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>

Thus the multiple source solution. Looks like GitHub totally pulled the plug or they moved it somewhere else. — Slion, Aug 10 '22 at 14:25

How do I Get a website's favicon using JavaScript?

5 Answers5

Linked