Переведя статью об иконках сайта, я, конечно же, решил настроить всё как надо на своих проектах. То есть на личном сайте и сервисе по генерации иконок (было бы странно создавать такой сервис, и не настроить для него иконки как следует). Однако, столкнулся с парочкой проблем.
Первая из них - это то, что старые версии сафари почему-то не воспринимали нормально иконку - она то появлялась, то пропадала. И методом известного еврейского учёного Тыка я пришёл к выводу, что лучше поставить иконку apple touch выше всех остальных - другие браузеры заменять на неё не будут, но зато в сафари съест её первой и всё отобразится нормально. То есть порядок я теперь использую такой:
<link rel="apple-touch-icon" href="/apple-touch-icon.png"><!-- 180×180 -->
<link rel="icon" href="/favicon.ico" sizes="any"><!-- 32×32 -->
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="manifest" href="/manifest.webmanifest">
Но перейдём ко второй, основной проблеме. Имя этой проблемы - Яндекс.Браузер (Браузер Яндекс? Я.Браузер?). Кто-нибудь, расскажите ребятам, что вечно называть свои приложения и сайты по-разному - это плохой маркетинговый ход (Я.Диск, потом Яндекс.Диск или Яндекс Диск, после - просто Диск и так со всеми приложениями по кругу).
Так вот, Яндекс Браузер наотрез отказывался нормально показывать иконку сайта на своём табло. Табло - это не грубое название лица, а страница, которая появляется при открытии новой вкладки. Если быть точным, он вовсе не показывал никакую иконку - просто писал текстом "mihailgok".
Как хороший мальчик, первое, о чём я подумал - надо прочитать API, наверняка добрые люди из Яндекса всё в нём описали. Каково же было моё удивление, когда на странице API Яндекс Браузера я увидел это:
НИ-ЧЕ-ГО. Ладно, подумал я, тогда мы гуглим (простите, яндексим) проблему. И действительно выясняем, что, у Яндекса некогда было API, описывающее работу с виджетом на табло, но когда мир нуждался в нём больше всего, оно исчезло.
Итог:
- Я наткнулся на одну хорошую подробную статью (в ней есть некоторые неточности, а что-то уже не работает).
Таким образом мы подошли к созданию иконки для Табло Яндекс Браузера.
Вот, что нужно сделать (коротко).
- Создать файл манифеста.
- Создать изображение (можно использовать квадратное, но лучше 100 на 300).
- Подключить файл манифеста.
Файл манифеста
Начнём с самого сложного - манифеста.
где:
version - версия вашего манифеста;
api_version - версия апи, используемого манифестом;
layout - информация вашего "виджета".
layout выглядит так:
logo - путь к картинке, которая будет отображаться на виджете. У неё должен быть прозрачный фон и разрешение 100 в высоту и 300 в ширину.
В API рекомендуют высоту до 50, но разрешения экранов с 2014 года поднялись. Я увеличил параметры в 2 раза и всё работает.
color - цвет фона;
show_title - информация о том, как отображается title страницы.
Итоговый манифест для сайта выглядит вот так:
Создание файла логотипа и подключение манифеста.
Тут всё просто:
- Создаём файл 300px в ширину и 100px в высоту.
- Убираем белый фон (делаем прозрачным).
- Помещаем логотип (тоже без фона) и растягиваем его на всю высоту.
Сохраняем как файл как png.
Генератор делает примерно тоже самое.
В итоге подключаем наш манифест на страницу:
<link rel="yandex-tableau-widget" href="/tableau.json">
И всё! Наконец-то наш сайт выглядит замечательно на Табло Яндекс Браузера.
Я сделал белые иконки и основной цвет фоном, так показалось красиво.
Одна проблема - чтобы это отобразилось, нужно удалить сайт с табло, почистить историю браузера. Затем зайти на сайт и только после того, как вы зашли и весь контент прогрузился, - можно добавлять сайт обратно на табло Яндекс Браузера и он отобразится нормально.
Если добавите сайт в табло до того, как зайдёте или не удалите с табло перед очисткой кэша, - всё отобразится по-старому.