Иконки манифеста: массив icons в веб-манифесте приложения
Иконка манифеста — это запись в массиве icons веб-манифеста приложения, JSON-файла, который описывает ваш сайт при установке. Каждая запись задаёт src, строку sizes, обычно type и опционально purpose, а браузер выбирает ближайшее совпадение для домашнего экрана, лаунчера приложений, переключателя задач и экрана загрузки. Как минимум объявите PNG 192x192 и 512x512.
Для чего нужен этот массив
Веб-манифест приложения — это JSON-файл, подключаемый из <head>, который говорит браузеру, как ваш сайт должен вести себя при установке: его имя, стартовый URL, режим отображения, цвет темы и иконки. Иконки манифеста — это те, что используются вне интерфейса браузера: лаунчер, переключатель приложений, запрос на установку, экран загрузки.
В отличие от тегов <link> с favicon, массив — это список кандидатов, а не набор инструкций. Вы описываете, что представляет собой каждый файл, а браузер выбирает под каждую поверхность. Значит, объявлять больше записей — дёшево: ничего не скачивается, пока какой-то поверхности это не понадобится.
Минимальный манифест
{
"name": "Example App",
"short_name": "Example",
"start_url": "/",
"display": "standalone",
"theme_color": "#0b0b0b",
"background_color": "#ffffff",
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" },
{
"src": "/icon-maskable-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
]
}Подключите его из <head> тегом <link rel="manifest" href="/manifest.json">. Файл также может называться manifest.webmanifest; важен именно тег <link>.
Поля записи иконки
| Поле | Что делает |
|---|---|
| src | Путь к изображению, разрешаемый относительно URL манифеста. Обязательно. |
| sizes | Размеры в виде "ШИРИНАxВЫСОТА" или несколько через пробел для многоразмерного файла. |
| type | MIME-тип, например image/png. Позволяет браузеру пропустить форматы, которые он не может декодировать. |
| purpose | "any" (по умолчанию), "maskable" для иконок, которые безопасно обрезать, или "monochrome". |
Частые вопросы об иконках манифеста
Почему именно 192 и 512?
192x192 — это размер, который Android использует для иконки на домашнем экране при распространённых плотностях экрана, а 512x512 используется для экрана загрузки и запроса на установку. Вместе они удовлетворяют проверкам устанавливаемости в браузерах на Chromium.
Заменяют ли иконки манифеста мой favicon?
Нет. Они покрывают только поверхности установленного приложения. Вкладки браузера, закладки и история по-прежнему берутся из ваших тегов link rel="icon" и /favicon.ico, так что отдавайте и то, и другое.
Читает ли iOS иконки манифеста?
Safari читает манифест ради таких вещей, как имя и режим отображения, но иконка домашнего экрана берётся из ссылки apple-touch-icon. Объявите оба, если хотите, чтобы иконка была правильной и на iOS, и на Android.