How to get high resolution website logo (favicon) for a given URL

Question

I'm developing a web browser on Android and want to show the URL logo for the most visited sites like in Chrome (4 X 2). But the problem is that most favicons (eg: http://www.bbc.co.uk/favicon.ico) are of size either 16X16 or 32X32 and they don't look good when scaled up.

Is there a way I can download a high resolution icon/bitmap for an URL in a standard way? How about opening the home page and then extracting all the image links and then choose an image with the name logo in it? Would this method work for all the URLs? I want to know if there is a standard way to obtain a high resolution icon for a given URL or favicon is the only standard way to get the website logo?

Natelson

Firefox takes screenshots of often visited pages and arranges them as thumbnails on the start page. I think that's the best approach. Other than that, there is no standardized way except for favicon. You could scan a page for the header area and try and find the typically left-most biggest image in it, which supposedly is the logo of a website. You could analyze the most popular CMS and blog softwares for some common patterns of logo tagging or arrangement. This is also related: googlewebmastercentral.blogspot.com/2013/05/… – Registrar

Chrome does it by effectively taking a screenshot of the rendered web page and then reducing it to a suitable size. Can you do this in your browser? – Trinidad

I can take the snapshot from webView but the problem is that when we show multiple snapshots on a mobile device it doesn't make much sense. Also I have to save the snapshots of all the visited pages on the mobile device. Instead I'm looking for a solution wherein I can download the image dynamically. – Natelson

@Nobu, I can take the snapshot from webView but the problem is that when we show multiple snapshots on a mobile device it doesn't make much sense. Also I have to save the snapshots of all the visited pages on the mobile device. I will try if the left-most biggest image could be the logo in most cases. – Natelson

Do you need these logos or icons for a browser history list? You can still crop and scale down these screen shots and create some kind of visual similar to the task switcher of Android. But if the logo detection works for you, that's also fine. You just need some kind of fallback behavior in case your browser cannot detect a logo – Registrar

Answer 1

You can code it yourself or use an existing solution.

Do-it-yourself algorithm

1. Look for Apple touch icon declarations in the code, such as <link rel="apple-touch-icon" href="/apple-touch-icon.png">. Theses pictures range from 57x57 to 152x152. See Apple specs for full reference.
2. Even if you find no Apple touch icon declaration, try to load them anyway, based on Apple naming convention. For example, you might find something at /apple-touch-icon.png. Again, see Apple specs for reference.
3. Look for high definition PNG favicon in the code, such as <link rel="icon" type="image/png" href="/favicon-196x196.png" sizes="196x196">. In this example, you have a 196x196 picture.
4. Look for Windows 8 / IE10 and Windows 8.1 / IE11 tile pictures, such as <meta name="msapplication-TileImage" content="/mstile-144x144.png">. These pictures range from 70x70 to 310x310, or even more. See these Windows 8 and Windows 8.1 references.
5. Look for /browserconfig.xml, dedicated to Windows 8.1 / IE11. This is the other place where you can find tile pictures. See Microsoft specs.
6. Look for the og:image declaration such as <meta property="og:image" content="http://somesite.com/somepic.png"/>. This is how a web site indicates to FB/Pinterest/whatever the preferred picture to represent it. See Open Graph Protocol for reference.
7. At this point, you found no suitable logo... damned! You can still load all pictures in the page and make a guess to pick the best one.

Note: Steps 1, 2 and 3 are basically what Chrome does to get suitable icons for bookmark and home screen links. Coast by Opera even use the MS tile pictures to get the job done. Read this list to figure out which browser uses which picture (full disclosure: I am the author of this page).

APIs and open source projects

RealFaviconGenerator: You can get any web site favicon or related icon (such as the Touch Icon) with this favicon retrieval API. Full disclosure: I'm the author of this service.

BestIcon: Although less comprehensive, Besticon offers a good alternative, especially if you want to host the code yourself. There is also a hosted version you can use right away.

Confabulation

Very nice! Do you know of any PHP implementation somewhere? – Wagonage

Any chance you might write a java class for this? Say with Jsoup so given a url, someone can extract the logo? I got stuck on step 5 – Dryfoos

Also look for the fluidicon.png – Osmanli

Love using RealFaviconGenerator. Thank you! – Leaden

Thank you @Leaden :) – Confabulation

Is there any client side library for this purpose ? – Droshky

RealFaviconGenerator is a great site – Schleiermacher

Thanks @Schleiermacher :) – Confabulation

developer.mozilla.org/en-US/docs/Web/Manifest – Junina

The Browse the documentation link on the page to “Get the favicon of a website” is broken. – Hakon

@Hakon It's fixed! Thanks for reporting! – Confabulation

Unfortunately the Besticon hosted instance @ icons.better-idea.org is a dead server. The github project had a more recent hosted demo @ herokuapp, which apparently recently terminated their free service tier. Suggestions for alternate service have been made in a github discussion – Monadnock

Answer 2

The Go code at https://github.com/mat/besticon tries to solve this problem.

For example

$ besticon http://github.com 
http://github.com:  https://github.com/apple-touch-icon-144.png

There is also an accompanying hosted version of the code, see for example http://icons.better-idea.org/icons?url=github.com.

(Disclaimer: I wrote it because I needed to solve the same problem a while ago.)

Selfpollination

Is there a simple way to use this code in Java? kind of like ScriptEngine – Dryfoos

I haven't looked at the possibility/feasibility of using Go code in other environments. That said I believe the simplest way to use this from Java is to use the URL API provided using one of Java's HTTP clients. – Selfpollination

Jiahaog has a javascript implementation of this here. – Reste

Unfortunately the Besticon hosted instance @ icons.better-idea.org is a dead server. The github project used a more recent hosted demo @ herokuapp—who apparently recently terminated their free service tier. Suggestions for an alternate free hosting service have been made in a github discussion. – Monadnock

Answer 3

another option is getting favicons from any domain using a hidden google API

the favicon link pattern will be

https://www.google.com/s2/favicons?domain={domain}&sz={size}

for example

https://www.google.com/s2/favicons?domain=stackoverflow.com&sz=64

Agnosia

Answer 4

Logos are not going to be consistently named and very difficult to identify consistently. Consider putting the favicon on a colour tile of suitable dimensions. People will quickly associate the colour with the website. You could either extract a dominant colour from the website or favicon using something like colorthief, or make each one unique using a golden angle formula to choose a hue.

Trinidad

Answer 5

Here is a new and genuine solution which will always give you the best results-

1. Webchromeclient gives a callback of onReceivedTouchIconUrl method for all the websites just hold the url from here.

2. Next step is to convert this url to bitmap which can be done like this-

   try {
       URL url = new URL(touchiconUrl);
       HttpURLConnection connection =
               (HttpURLConnection)url.openConnection();
       connection.setDoInput(true);
       connection.connect();
       InputStream input = connection.getInputStream();
       Bitmap myBitmap = BitmapFactory.decodeStream(input);
       return myBitmap;
   } catch (IOException e) {
       e.printStackTrace();
       return null;
   }
   

3. Next step is to send this bitmap for the shortcut.

Note: Remember to create bitmap on background thread like asynctask.

Droshky

Answer 6

This HTML document requires a base url and the HTML/"View Page Source" of the web page and should output the values.

<!doctype html>
<input type=text placeholder=URL><br>
Place "View Page Source" of HTML homepage<br>
<textarea id=HTML placeholder="HTML content of webpage">
</textarea><br>
<input type=Submit>
<script>
function url(u,n){
  try{
    u = u.getAttribute(n);
  }
  catch(e){
    return 'null';
  }
  if(u.slice(0,2) == "//"){
    u = "http:"+u;
  }
  else if(u.slice(0,1) == "/"){
    u = u.slice(0,1);
  }
  return '<img src="'+u+'">';
}

document.querySelector('input[type=Submit]').onclick = function(){
var output = '';
var HTML = document.getElementById('HTML').value;
var doc = document.implementation.createHTMLDocument("New Document");
doc.documentElement.innerHTML = HTML;

output = output + "apple-touch-icon<br>"+url([].slice.apply(doc.querySelectorAll('link[rel="apple-touch-icon"]')).reverse()[0],'href')
// deprecated output = output + "apple-touch-icon-precomposed<br>"+url([].slice.apply(doc.querySelectorAll('link[rel="apple-touch-icon-precomposed"]')).reverse()[0],'href')

output = output + "<br>image/png<br>" + url(doc.querySelectorAll('link[rel="icon"][type="image/png"]')[0],'href');
// <meta name="msapplication-TileImage" content="/mstile-144x144.png">
// deprecated output = output + "<br>msapplication-Ti:<br>"+ url(doc.querySelectorAll('link[name="msapplication-TileImage"]')[0],'content');
// <meta name="msapplication-config" content="/browserconfig.xml/ ">
//output = output + "<br>msapplication-con: "+ url(doc.querySelectorAll('meta[name="msapplication-config"]')[0],'content');
// <meta property="og:image" content="http://somesite.com/somepic.png"/>
output = output + "<br>og:image<br>" + url(doc.querySelectorAll('meta[property="og:image"]')[0],'content');
// <link rel="image_src" href="https://cdn.sstatic.net/Sites/stackoverflow/Img/apple-touch-icon.png?v=c78bd457575a"> 
output = output + "<br>image_source<br>" + url(doc.querySelectorAll('link[rel="image_src"]')[0],'href');


var URL = window.location.hash;

document.getElementById('output').innerHTML = output;
};</script>
<div id=output></div>

If you would like to automate the retrieval of the HTML you could use something like the following for PHP.

<? echo file_get_contents($_GET["url"]); 

Junina

Answer 7

Usually favicon is small (like 16x16 or 32x32). If you need bigger dimensions, extract not favicon, but logo from homepage/header.

Tullius

Is the logo guaranteed to be present in the header always? If a webpage contains multiple image elements how can we know which element corresponds to the logo? – Natelson

@Harish modern browsers auto detect favicon placed in root directory and you can not include favicon code on website. If favicon is on your site, then just put higher resolution image. – Tullius