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

Я разрабатываю веб-браузер на Android и хочу показывать логотип URL для наиболее посещаемых сайтов, таких как Chrome (4 X 2). Но проблема в том, что большинство значков (например: http://www.bbc.co.uk/favicon.ico) имеют размер 16X16 или 32X32, и при масштабировании они выглядят не очень хорошо.

Есть ли способ загрузить стандартный значок/растровое изображение с высоким разрешением для URL-адреса стандартным способом? Как насчет открытия домашней страницы, а затем извлечения всех ссылок на изображение, а затем выберите изображение с логотипом в нем? Будет ли этот метод работать для всех URL-адресов? Я хочу знать, есть ли стандартный способ получения значка с высоким разрешением для данного URL-адреса или favicon - единственный стандартный способ получить логотип сайта?

Ответы

Ответ 1

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

Самостоятельный алгоритм

  • Ищите объявления Apple touch в коде, например <link rel="apple-touch-icon" href="/apple-touch-icon.png">. Фотографии тезисов варьируются от 57x57 до 152x152. См. спецификации 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">. Эти изображения варьируются от 70x70 до 310x310 или даже больше. См. Эти 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, чтобы получить подходящие значки для ссылок на закладку и на главном экране. Побережье от Opera даже использует снимки MS-графики, чтобы выполнить эту работу. Прочтите этот список, чтобы выяснить какой браузер использует какое изображение (полное раскрытие: я являюсь автором этой страницы).

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

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

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

Ответ 2

Код 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.

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

Ответ 3

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

Ответ 4

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