Как добавить иконку и фон в закладки?

Question

[Meowt]

Доброго времени суток.
Недавно установил визуальные закладки от яндекса и увидел красивое оформление популярных сайтов в виде цвета фона сайта и иконки.

Заметил, что большинство других (включая мои) имеют подобный не очень красивый вид

Итак, вопрос - каким образом можно реализовать "подхватываение" фона сайта и его иконки?

UPD:
На худой конец - буду рад и такому варианту


P.S. API Табло от Яндекса не предлагать, ибо не думаю, что зарубежные сайты его используют.

Answer 1

[Павел]

А у вас указаны meta-теги для цвета топ-бара в ios, Android, цвет плитки для Windows? На месте разработчиков Яндекса, я бы брал это за основу + web-app иконка

Comments

[Meowt]

Какие именно? Просмотрел несколько сайтов, но ничего кроме указания favicon`ки не увидел. Просматривал почти все ресурсы, указанные на странице, но ни 1 картинка не совпадает с той, что выводится в закладках.
По поводу цвета - думал, что берется за основу цвет body, но это не так.

[Павел]

Meowt: попробуйте этот сервис realfavicongenerator.net он выдает все возможные мета теги, задающие цвет и изображения в мобильных ОС + Windows 10

[Meowt]

Павел: стало хоть что-то, а именно такой вариант - https://habrastorage.org/files/d2d/1b6/935/d2d1b69...
Цвет, как я понял, берется из преобладающего цвета в фавиконке.
Но все-таки как же быть с более красивым вариантом?

[Павел]

Meowt: ну тут где-то уже написали, видимо, либо заготовленный Яндексом пример, либо владельцы сайта использовали их Тфбло

[Meowt]

Павел: варианты отпадают, ибо у малоизвестных сайтов есть подобная фича, а в коде никаких намеков на использование какого-то API или url до картинки в закладках нет.
Либо работникам Яндекс заняться нечем, вот и делают для всех сайтов подряд. Написать им в тех. под. что ли >_>

Answer 2

[Константин]

Вам нужно API Табло, но прямо сейчас эта страница, как видите, недоступна. Можно покопаться в кеше поисковиков, Веб-архиве, попросить у разработчиков эту документацию или же просто подождать публикации актуальной версии API.
Ну или погуглить релевантную информацию и сделать оттуда выводы.
Например, что используется некий манифест, можно попробовать найти его на каком-нибудь сайте и "отреверсить" его формат

Comments

[Meowt]

Вы читали постскриптум?

[Константин]

Meowt: сори, конец дня, уже ничего не вижу. Про популярные сайты: я думаю, что Яндекс прям в браузере захардкодил иконки для них. А для простых смертных и есть это самое Табло

[Константин]

Meowt: в общем-то, если сходить по ссылке на хабр, то можно увидеть, что именно это они и пишут: "API Табло

Одним из нововведений команды Яндекс.Браузера стало Табло. Мы отказались от представлений сайтов в виде скриншотов, заменив их виджетами-«кирпичиками». На момент запуска мы отрисовали виджеты не только для своих сервисов, но и для полутора сотен самых популярных сайтов, включая Хабрахабр, ВКонтакте, Facebook, Лента.ру и т.д."

[Meowt]

unity_ultra_hardcore: хм, на счет популярных сайтов - вполне возможно, но как быть, например, с irecommend.ru ? Я бы не сказал, что его можно сравнить с YouTube.