Переведя статью об иконках сайта, я, конечно же, решил настроить всё как надо на своих проектах. То есть на личном сайте и сервисе по генерации иконок (было бы странно создавать такой сервис, и не настроить для него иконки как следует). Однако, столкнулся с парочкой проблем.
Первая из них – это то, что старые версии сафари почему-то не воспринимали нормально иконку – она то появлялась, то пропадала. И методом известного еврейского учёного Тыка я пришёл к выводу, что лучше поставить иконку 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, описывающее работу с виджетом на табло, но когда мир нуждался в нём больше всего, оно исчезло.
Итог:
- Я наткнулся на одну хорошую подробную статью (в ней есть некоторые неточности, а что-то уже не работает).
- Также в веб-архиве откопал-таки старое API.
Таким образом мы подошли к созданию иконки для Табло Яндекс Браузера.
Вот, что нужно сделать (коротко).
- Создать файл манифеста.
- Создать изображение (можно использовать квадратное, но лучше 100 на 300).
- Подключить файл манифеста.
Файл манифеста
Начнём с самого сложного – манифеста.
{
// ОБЯЗАТЕЛЬНАЯ ЧАСТЬ
"version": "<номер_версии_манифеста>",
"api_version": <номер_версии_API_Табло>,
"layout": {...},
// ОПЦИОНАЛЬНАЯ ЧАСТЬ
"feed": {...}
}где:
version – версия вашего манифеста;
api_version – версия апи, используемого манифестом;
layout – информация вашего “виджета”.
layout выглядит так:
"layout": {
"logo": "https://mihailgok.ru/tableau.png",
"color": "#0035FF",
"show_title": none
},logo – путь к картинке, которая будет отображаться на виджете. У неё должен быть прозрачный фон и разрешение 100 в высоту и 300 в ширину.
В API рекомендуют высоту до 50, но разрешения экранов с 2014 года поднялись. Я увеличил параметры в 2 раза и всё работает.
color – цвет фона;
show_title – информация о том, как отображается title страницы.
Уточнения
Поля logo и color могут иметь как статические значения, так и зависящие от языка интерфейса браузера. В этом случае нужно указать варианты для разных языков и обязательно тот, который будет отображаться по умолчанию (т.е. когда у пользователя локаль браузера отлична от перечисленных в списке).
"layout":
{
"logo":
{
"en": "",
"ru": "",
"default": ""
},
"color":
{
"en": "<цвет виджета (hex) для английского языка>",
"ru": "<цвет виджета (hex) для русского языка>",
"default": "<цвет виджета (hex) для всех прочих языков>"
}
} Начиная со второй версии API Табло поле show_title может принимать одно из трех значений:
- all — заголовок отображается независимо от того, для какой страницы сайта он был создан;
- internal — заголовок отображается только в том случае, если виджет был создан для внутренней страницы сайта (по умолчанию);
- none — заголовок не отображается.
Итоговый манифест для сайта выглядит вот так:
"layout":
{
"logo":{
"version": "1.2",
"api_version": 3,
"layout": {
"logo": "https://mihailgok.ru/tableau.png",
"color": "#0035FF",
"show_title": none
}
}Создание файла логотипа и подключение манифеста.
Тут всё просто:
- Создаём файл 300px в ширину и 100px в высоту.
- Убираем белый фон (делаем прозрачным).
- Помещаем логотип (тоже без фона) и растягиваем его на всю высоту.
- Сохраняем как файл как png.
Генератор делает примерно тоже самое.
В итоге подключаем наш манифест на страницу:
<link rel="yandex-tableau-widget" href="/tableau.json">И всё! Наконец-то наш сайт выглядит замечательно на Табло Яндекс Браузера.
Я сделал белые иконки и основной цвет фоном, так показалось красиво.
Одна проблема – чтобы это отобразилось, нужно удалить сайт с табло, почистить историю браузера. Затем зайти на сайт и только после того, как вы зашли и весь контент прогрузился, – можно добавлять сайт обратно на табло Яндекс Браузера и он отобразится нормально.
Если добавите сайт в табло до того, как зайдёте или не удалите с табло перед очисткой кэша, – всё отобразится по-старому.