Красивая иконка на табло Яндекс Браузера

Переведя статью об иконках сайта, я, конечно же, решил настроить всё как надо на своих проектах. То есть на личном сайте и сервисе по генерации иконок (было бы странно создавать такой сервис, и не настроить для него иконки как следует). Однако, столкнулся с парочкой проблем.

Первая из них - это то, что старые версии сафари почему-то не воспринимали нормально иконку - она то появлялась, то пропадала. И методом известного еврейского учёного Тыка я пришёл к выводу, что лучше поставить иконку apple touch выше всех остальных - другие браузеры заменять на неё не будут, но зато в сафари съест её первой и всё отобразится нормально. То есть порядок я теперь использую такой:

Но перейдём ко второй, основной проблеме. Имя этой проблемы - Яндекс.Браузер (Браузер Яндекс? Я.Браузер?). Кто-нибудь, расскажите ребятам, что вечно называть свои приложения и сайты по-разному - это плохой маркетинговый ход (Я.Диск, потом Яндекс.Диск или Яндекс Диск, после - просто Диск и так со всеми приложениями по кругу).

Так вот, Яндекс Браузер наотрез отказывался нормально показывать иконку сайта на своём табло. Табло - это не грубое название лица, а страница, которая появляется при открытии новой вкладки. Если быть точным, он вовсе не показывал никакую иконку - просто писал текстом "mihailgok".

Как хороший мальчик, первое, о чём я подумал - надо прочитать API, наверняка добрые люди из Яндекса всё в нём описали. Каково же было моё удивление, когда на странице API Яндекс Браузера я увидел это:

НИ-ЧЕ-ГО. Ладно, подумал я, тогда мы гуглим (простите, яндексим) проблему. И действительно выясняем, что, у Яндекса некогда было API, описывающее работу с виджетом на табло, но когда мир нуждался в нём больше всего, оно исчезло.

Итог:

• Я наткнулся на одну хорошую подробную статью (в ней есть некоторые неточности, а что-то уже не работает).
• Также в веб-архиве откопал-таки старое API.

Таким образом мы подошли к созданию иконки для Табло Яндекс Браузера.

Вот, что нужно сделать (коротко).

• Создать файл манифеста.
• Создать изображение (можно использовать квадратное, но лучше 100 на 300).
• Подключить файл манифеста.

Начнём с самого сложного - манифеста.

где:version - версия вашего манифеста;api_version - версия апи, используемого манифестом;layout - информация вашего "виджета".

layout выглядит так:

logo - путь к картинке, которая будет отображаться на виджете. У неё должен быть прозрачный фон и разрешение 100 в высоту и 300 в ширину.

color - цвет фона;show_title - информация о том, как отображается title страницы.

Поля logo и color могут иметь как статические значения, так и зависящие от языка интерфейса браузера. В этом случае нужно указать варианты для разных языков и обязательно тот, который будет отображаться по умолчанию (т.е. когда у пользователя локаль браузера отлична от перечисленных в списке).

Начиная со второй версии API Табло поле show_title может принимать одно из трех значений:

• all — заголовок отображается независимо от того, для какой страницы сайта он был создан;
• internal — заголовок отображается только в том случае, если виджет был создан для внутренней страницы сайта (по умолчанию);
• none — заголовок не отображается.

Итоговый манифест для сайта выглядит вот так:

Тут всё просто:

• Создаём файл 300px в ширину и 100px в высоту.
• Убираем белый фон (делаем прозрачным).
• Помещаем логотип (тоже без фона) и растягиваем его на всю высоту.

• Сохраняем как файл как png.

Генератор делает примерно тоже самое.

В итоге подключаем наш манифест на страницу:

И всё! Наконец-то наш сайт выглядит замечательно на Табло Яндекс Браузера.

Я сделал белые иконки и основной цвет фоном, так показалось красиво.

Одна проблема - чтобы это отобразилось, нужно удалить сайт с табло, почистить историю браузера. Затем зайти на сайт и только после того, как вы зашли и весь контент прогрузился, - можно добавлять сайт обратно на табло Яндекс Браузера и он отобразится нормально.

Если добавите сайт в табло до того, как зайдёте или не удалите с табло перед очисткой кэша, - всё отобразится по-старому.