Подключение манифеста и иконки

Урок показывает, как подключить манифест к HTML, какие иконки подготовить и какие дополнительные теги нужны.

Манифест не работает сам по себе — его нужно подключить к странице тегом <link rel="manifest"> в <head>.

Подключение в head

В каждой странице приложения (а лучше в общем шаблоне) добавьте ссылку на манифест:

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="manifest" href="/manifest.json">
  <meta name="theme-color" content="#3367D6">
  <title>Моя заметка</title>
</head>

Браузер увидит этот тег, скачает манифест и прочитает настройки. Метатег theme-color дублирует поле из манифеста и влияет на цвет панели браузера ещё до установки.

Какие иконки подготовить

Минимум — две иконки: 192×192 и 512×512 пикселей, формат PNG. Но на практике добавляют больше размеров и специальные «maskable»-иконки, которые система может обрезать под свою форму (круг, скруглённый квадрат).

"icons": [
  { "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
  { "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png" },
  { "src": "/icons/maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
]

Поле purpose: "maskable" говорит системе: «эту иконку можно безопасно обрезать, важное содержимое в центре». Без maskable-иконки на Android вокруг вашей картинки может появиться некрасивая белая подложка.

Особенности iOS

Safari на iOS долгое время игнорировал часть манифеста. Чтобы иконка и заголовок корректно работали на iPhone, добавляют отдельные «яблочные» теги:

<link rel="apple-touch-icon" href="/icons/apple-icon-180.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="Заметка">

Эти теги — наследие до-манифестной эпохи, но iOS до сих пор на них опирается. Подробнее об ограничениях iOS — в последнем разделе курса.

Как работает под капотом загрузка манифеста

Манифест загружается асинхронно и не блокирует рендеринг страницы. Браузер кеширует его и перечитывает при следующих заходах. Если вы поменяли манифест (например, добавили иконку), изменения подхватятся не сразу — браузер может держать старую копию. Поэтому при отладке полезно очищать данные сайта в DevTools.

Проверка в DevTools

В Chrome откройте DevTools → вкладка Application → раздел Manifest. Там видно, как браузер прочитал ваш манифест: имя, иконки, цвета, и предупреждения, если чего-то не хватает. Это первое место, куда стоит смотреть, если установка не предлагается.

Частые ошибки

Манифест не подключён. Файл лежит на сервере, но тега <link rel="manifest"> нет — браузер о нём не знает.
Неверный MIME-тип. Сервер должен отдавать манифест как application/manifest+json или хотя бы application/json.
Забыли apple-touch-icon. На iPhone иконка будет «скриншотом» страницы вместо нормальной иконки.
Нет maskable-иконки. На Android вокруг иконки появится белый фон.

Итоги

Манифест подключается тегом <link rel="manifest" href="/manifest.json"> в <head>.
Нужны иконки 192 и 512, желательно ещё maskable-версия.
Для iOS добавляют apple-touch-icon и apple-метатеги.
Проверяйте манифест в DevTools → Application → Manifest.