How to get favicon url from shared webpage in javascript?

Question

I need a way to get the favicon url from a shared webpage, given that the icon is not always on the base url.

Ps without using an external service or library.

Answer 1

It works:

var getFavicon = function(){ var favicon = undefined; var nodeList = document.getElementsByTagName("link"); for (var i = 0; i < nodeList.length; i++) { if((nodeList[i].getAttribute("rel") == "icon")||(nodeList[i].getAttribute("rel") == "shortcut icon")) { favicon = nodeList[i].getAttribute("href"); } } return favicon; } alert(getFavicon());​ 

Or look at http://jsfiddle.net/PBpgY/3/ for an online example.

Answer 2

For people not yet receiving badges with the above codes,

• Most browsers support getting the icon by sending a request ( /favicon.ico ) themselves, and not in html.

• Another solution is provided by Google.

  To get an icon for a domain, use:
  https://plus.google.com/_/favicon?domain=www.stackoverflow.com

  To get the icon for a URL, use:
  https://plus.google.com/_/favicon?domain_url=http://www.stackoverflow.com

Answer 3

The icon is located in /favicon.ico if you do not have the <link rel="icon" href="..."> element. So you can get all the link elements through document.getElementsByTagName , and then look at each of the elements in the returned NodeList to see if any of them have a rel attribute with the value "icon" and, if so, look on his href . (You can also see where rel is the "shortcut icon" or "icon shortcut" for historical reasons.)

Answer 4

An example of a live working script: http://jsfiddle.net/sc8qp/2/

Just for good measure and completeness without regex:

 function getIcons() { var links = document.getElementsByTagName('link'); var icons = []; for(var i = 0; i < links.length; i++) { var link = links[i]; //Technically it could be null / undefined if someone didn't set it! //People do weird things when building pages! var rel = link.getAttribute('rel'); if(rel) { //I don't know why people don't use indexOf more often //It is faster than regex for simple stuff like this //Lowercase comparison for safety if(rel.toLowerCase().indexOf('icon') > -1) { var href = link.getAttribute('href'); //Make sure href is not null / undefined if(href) { //Relative //Lowercase comparison in case some idiot decides to put the //https or http in caps //Also check for absolute url with no protocol if(href.toLowerCase().indexOf('https:') == -1 && href.toLowerCase().indexOf('http:') == -1 && href.indexOf('//') != 0) { //This is of course assuming the script is executing in the browser //Node.js is a different story! As I would be using cheerio.js for parsing the html instead of document. //Also you would use the response.headers object for Node.js below. var absoluteHref = window.location.protocol + '//' + window.location.host; if(window.location.port) { absoluteHref += ':' + window.location.port; } //We already have a forward slash //On the front of the href if(href.indexOf('/') == 0) { absoluteHref += href; } //We don't have a forward slash //It is really relative! else { var path = window.location.pathname.split('/'); path.pop(); var finalPath = path.join('/'); absoluteHref += finalPath + '/' + href; } icons.push(absoluteHref); } //Absolute url with no protocol else if(href.indexOf('//') == 0) { var absoluteUrl = window.location.protocol + href; icons.push(absoluteUrl); } //Absolute else { icons.push(href); } } } } } return icons; }