Как получить логотип (значок) веб-сайта с высоким разрешением для заданного URL

Вы можете запрограммировать это самостоятельно или использовать существующее решение.

Алгоритм своими руками

1. Найдите в коде объявления значков Apple Touch, например <link rel="apple-touch-icon" href="/apple-touch-icon.png">. Размеры тезисов от 57x57 до 152x152. Для получения полной справки см. спецификации Apple.
2. Даже если вы не найдете декларации значков касания Apple, все равно попробуйте загрузить их в соответствии с соглашением об именах Apple. Например, вы можете найти что-то в /apple-touch-icon.png. Опять же, см. спецификации Apple для справки. .
3. Найдите в коде значок PNG с высоким разрешением, например <link rel="icon" type="image/png" href="/favicon-196x196.png" sizes="196x196">. В этом примере у вас есть изображение 196x196.
4. Ищите мозаичные изображения Windows 8 / IE10 и Windows 8.1 / IE11, например <meta name="msapplication-TileImage" content="/mstile-144x144.png">. Эти изображения варьируются от 70x70 до 310x310 или даже больше. См. Эти Windows 8 и ссылки на Windows 8.1.
5. Найдите /browserconfig.xml, посвященный Windows 8.1 / IE11. Это еще одно место, где можно найти изображения плитки. См. спецификации Microsoft.
6. Найдите объявление og:image, например <meta property="og:image" content="http://somesite.com/somepic.png"/>. Это то, как веб-сайт указывает FB / Pinterest / любой другой предпочтительной картинке для его представления. Для справки см. Open Graph Protocol.
7. На данный момент вы не нашли подходящего логотипа ... черт возьми! Вы по-прежнему можете загрузить все изображения на страницу и сделать предположение, чтобы выбрать лучшее.

Примечание. Шаги 1, 2 и 3 - это в основном то, что делает Chrome для получения подходящих значков для закладок и ссылок на главный экран. Coast by Opera даже использует изображения плиток MS, чтобы выполнить свою работу. Прочтите этот список, чтобы выяснить, какой браузер использует какое изображение (полное раскрытие: я являюсь автором этой страницы).

API и проекты с открытым исходным кодом

RealFaviconGenerator: вы можете получить любой значок веб-сайта или связанный значок (например, сенсорный значок) с помощью этого API для поиска значков. Полное раскрытие: я являюсь автором этой услуги.

BestIcon: хотя и менее всеобъемлющий, Besticon предлагает хорошую альтернативу, особенно если вы хотите разместить код самостоятельно. Существует также размещенная версия, которую вы можете использовать прямо сейчас.

Код Go на https://github.com/mat/besticon пытается решить эту проблему.

Например

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

Существует также сопровождающая размещенная версия кода, см., Например, http://icons.better-idea.org/icons?url=github.com.

(Отказ от ответственности: я написал это, потому что мне нужно было решить ту же проблему некоторое время назад.)

Логотипы не будут иметь однозначного названия, и их очень сложно идентифицировать последовательно. Подумайте о том, чтобы разместить значок на цветной плитке подходящего размера. Люди быстро ассоциируют цвет с сайтом. Вы можете либо извлечь доминирующий цвет с веб-сайта или значка, используя что-то вроде colorthief, либо сделать каждый из них уникальным, используя формулу золотого угла для выбора оттенка.

Вот новое и оригинальное решение, которое всегда даст вам наилучшие результаты -

1. Webchromeclient выполняет обратный вызов метода onReceivedTouchIconUrl для всех веб-сайтов, которые просто содержат URL-адрес отсюда.

2. Следующим шагом является преобразование этого URL-адреса в растровое изображение, что можно сделать следующим образом:

   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. Следующим шагом является отправка этого растрового изображения для ярлыка.

Примечание. Не забудьте создать растровое изображение в фоновом потоке, например asynctask.

Для этого HTML-документа требуется базовый URL-адрес и HTML / исходный код страницы просмотра веб-страницы, и он должен выводить значения.

<!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>

Если вы хотите автоматизировать получение HTML, вы можете использовать что-то вроде следующего для PHP.

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

Обычно фавикон небольшой (например, 16x16 или 32x32). Если вам нужны большие размеры, извлекайте не фавикон, а логотип с главной страницы / заголовка.