I need a way to get the favicon's URL from a generic webpage considering that the favicon is not always at the base url.
P.s. without using an external service or library.
I need a way to get the favicon's URL from a generic webpage considering that the favicon is not always at the base url.
P.s. without using an external service or library.
For people still not getting the favicon with above codes;
Most browsers support getting the favicon by sending a request (/favicon.ico
) themselves, instead of in the html.
Another solution is provided by Google.
To get the favicon for a domain, use:
https://s2.googleusercontent.com/s2/favicons?domain=www.stackoverflow.com
To get the favicon for an URL, use:
https://s2.googleusercontent.com/s2/favicons?domain_url=https://www.stackoverflow.com
https://s2.googleusercontent.com/s2/favicons?domain=http://www.stackoverflow.com
great solution.
Aug 30, 2019 at 22:33
This seems to work:
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 have a look at http://jsfiddle.net/PBpgY/3/ for an online example.
rel="shortcut icon"
attribute they used. Have a look at mine.
favicon = nodeList[i].getAttribute("href");
to favicon = nodeList[i].href;
. Ta-daaaaa! :D
Jul 16, 2014 at 1:34
The favicon is at /favicon.ico
unless you have a <link rel="icon" href="...">
element. So you can get all of the link
elements via document.getElementsByTagName
and then look at each of the elements in the returned NodeList
to see if any of them have the attribute rel
with the value "icon"
and, if so, look at its href
. (You might also look at ones where rel
is "shortcut icon"
or "icon shortcut"
for historical reasons.)
NodeList
you got back from getElementsByTagName
, looking for one with rel="shortcut icon"
(or just "icon"
, because that's the newer form). NodeList
is indexed, so for instance, if you have var list = document.getElementsByTagName("link");
then list[0]
is the first matched element, list[1]
is the second one, etc. There's also a handy length
property. See the provided links.
Apr 23, 2012 at 15:08
Live working fiddle example: 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;
}