41

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?

5 Answers 5

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' />
8
  • 3
    Just FYI, Grabicon is a pay (free trial) service.
    – Sean O
    Oct 2, 2015 at 13:15
  • 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. Apr 14, 2016 at 21:10
  • 1
    Seems grabicon.com is gone 😅
    – Can Rau
    Jul 13, 2022 at 5:58
  • 1
    @CanRau Well, the first solution does still work (and supports higher resolution favicons too). Jul 30, 2022 at 7:51
  • 1
    @CanRau like this: t0.gstatic.com/… (change the value of size at the end for different resolutions) Aug 9, 2022 at 5:40
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

7
  • The ICO format can have multiple images of multiple sizes, Google's S2 just gives you the 16x16 one (the most used one). Apr 7, 2010 at 15:42
  • Google Shared Stuff has since been taken offline.
    – Ken Liu
    Apr 17, 2010 at 1:53
  • 3
    This solution is still working as of 17 November, 2014 Nov 17, 2014 at 6:34
  • Working July 2018
    – B3none
    Jul 27, 2018 at 15:41
  • 1
    @Maku That's probably an issue with the favicon itself, or you're fetching the 16x16 version and zooming in. Jul 30, 2022 at 7:51
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

3
  • 5
    GitHub also offers its own favicon service => favicons.githubusercontent.com/domain.com
    – Sam Denty
    Jan 2, 2018 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, 2018 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, 2018 at 16:44
1

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.

0
0

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:

For GitHub:

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>
2
  • 1
    Github service does not work anymore for public users
    – Lyokolux
    Aug 9, 2022 at 11:59
  • Thus the multiple source solution. Looks like GitHub totally pulled the plug or they moved it somewhere else.
    – Slion
    Aug 10, 2022 at 14:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.