Как получить логотип сайта высокого разрешения (favicon) для данного URL
Я разрабатываю веб-браузер на Android и хочу показать логотип URL для самых посещаемых сайтов, например, в Chrome (4 X 2). Но проблема в том, что большинство значков (например: http://www.bbc.co.uk/favicon.ico) имеют размер 16X16 или 32X32, и они не выглядят хорошими при увеличении.
Есть ли способ загрузить значок / растровое изображение высокого разрешения для URL стандартным способом? Как насчет того, чтобы открыть домашнюю страницу, а затем извлечь все ссылки на изображения, а затем выбрать изображение с логотипом имени? Будет ли этот метод работать для всех URL-адресов? Я хочу знать, существует ли стандартный способ получения значка с высоким разрешением для данного URL-адреса, или favicon - единственный стандартный способ получения логотипа веб-сайта?
7 ответов
Вы можете написать его самостоятельно или использовать существующее решение.
Самодельный алгоритм
- Найдите в коде объявления значков Apple touch, например:
<link rel="apple-touch-icon" href="/apple-touch-icon.png">, Тезисы изображений варьируются от 57х57 до 152х152. Смотрите спецификации Apple для полной справки. - Даже если вы не найдете декларации значков Apple Touch, попробуйте загрузить их в любом случае, в соответствии с соглашением об именах Apple. Например, вы можете найти что-то на
/apple-touch-icon.png, Опять же, смотрите спецификации Apple для справки. - Ищите значок PNG высокой четкости в коде, например:
<link rel="icon" type="image/png" href="/favicon-196x196.png" sizes="196x196">, В этом примере у вас есть картинка 196x196. - Посмотрите на изображения плитки Windows 8 / IE10 и Windows 8.1 / IE11, такие как
<meta name="msapplication-TileImage" content="/mstile-144x144.png">, Размер этих картинок варьируется от 70х70 до 310х310 или даже больше. Смотрите эти ссылки на Windows 8 и Windows 8.1. - Ищу
/browserconfig.xml, посвященный Windows 8.1 / IE11. Это другое место, где вы можете найти фотографии плитки. Смотрите спецификации Microsoft. - Ищите
og:imageдекларация, такая как<meta property="og:image" content="http://somesite.com/somepic.png"/>, Вот как веб-сайт указывает FB/Pinterest/ любую предпочитаемую картинку для его представления. См. Open Graph Protocol для справки. - На данный момент вы не нашли подходящего логотипа... проклятый! Вы все еще можете загрузить все изображения на странице и сделать предположение, чтобы выбрать лучший.
Примечание. Шаги 1, 2 и 3 - это то, что в основном делает Chrome, чтобы получить подходящие значки для закладок и ссылок на главном экране. Побережье Оперы даже использует изображения плитки MS, чтобы сделать работу. Прочтите этот список, чтобы выяснить, какой браузер использует какую картинку (полное раскрытие: я являюсь автором этой страницы).
API и проекты с открытым исходным кодом
RealFaviconGenerator: Вы можете получить любой значок сайта или связанный значок (например, значок Touch) с помощью этого 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.
(Отказ от ответственности: я написал это, потому что мне нужно было решить ту же проблему некоторое время назад.)
другой вариант — получение фавиконов из любого домена с помощью скрытого API Google.
шаблон ссылки favicon будет
https://www.google.com/s2/favicons?domain={domain}&sz={size}
Например
https://www.google.com/s2/favicons?domain=stackoverflow.com&sz=64
Логотипы не будут называться последовательно, и их очень сложно идентифицировать. Попробуйте положить значок на цветную плитку подходящих размеров. Люди быстро свяжут цвет с сайтом. Вы можете извлечь доминирующий цвет с веб-сайта или иконки сайта, используя что-то вроде раскраски, или сделать каждый из них уникальным, используя формулу золотого угла, чтобы выбрать оттенок.
Вот новое и оригинальное решение, которое всегда даст вам наилучшие результаты -
- Webchromeclient выполняет обратный вызов метода onReceivedTouchIconUrl для всех веб-сайтов, которые просто содержат URL-адрес отсюда.
Следующим шагом является преобразование этого 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; }Следующим шагом является отправка этого растрового изображения для ярлыка.
Примечание. Не забудьте создать растровое изображение в фоновом потоке, например 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"]);
Обычно favicon маленький (например, 16x16 или 32x32). Если вам нужны большие размеры, извлеките не favicon, а логотип с домашней страницы / заголовка.