Как сделать веб-приложение с собственной иконкой на Android (как у нативного)
Чтобы ваше веб-приложение при добавлении на главный экран Android отображалось с собственной иконкой, а не скриншотом страницы, нужно выполнить несколько шагов. Это достигается с помощью технологии Progressive Web App (PWA) или, как минимум, корректных мета-тегов и файла манифеста.
1. Подготовьте иконки разных размеров
Android требует иконки минимум 192×192 px, но лучше подготовить набор:
· icon-192.png (192×192)
· icon-512.png (512×512) – для высокого разрешения
· icon-72.png, icon-96.png – для старых устройств (опционально)
Иконка должна быть в формате PNG с прозрачностью или без, но обязательно квадратной.
2. Создайте файл манифеста manifest.json
В корне вашего сайта создайте файл с таким содержимым (подставьте свои значения):
```json
{
"name": "Название приложения",
"short_name": "Короткое имя",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#000000",
"icons": [
{
"src": "icon-192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any maskable"
},
{
"src": "icon-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any maskable"
}
]
}
```
· display: "standalone" – убирает адресную строку браузера, приложение выглядит полноэкранным.
· theme_color и background_color – задают цвета строки состояния и заставки при запуске.
3. Подключите манифест в HTML
Вставьте в <head> вашей страницы:
```html
<link rel="manifest" href="/manifest.json">
```
4. Добавьте мета-теги для старых браузеров и Chrome на Android
Для гарантированного отображения иконки даже без поддержки PWA добавьте:
```html
<!-- Иконка для Android (Chrome) -->
<link rel="icon" type="image/png" sizes="192x192" href="icon-192.png">
<!-- Иконка для Safari (iOS) – но на Android она тоже иногда используется -->
<link rel="apple-touch-icon" href="icon-192.png">
<!-- Цвет темы для адресной строки Chrome на Android -->
<meta name="theme-color" content="#000000">
```
5. Проверьте работу
· Откройте ваше приложение в браузере Chrome на Android.
· Нажмите на меню (три точки) → "Добавить на главный экран".
· Если всё сделано правильно, вы увидите вашу иконку, а после добавления ярлык будет открывать приложение в режиме standalone (без интерфейса браузера).
6. Дополнительные улучшения (полноценное PWA)
Чтобы приложение действительно вело себя как нативное, добавьте Service Worker для кеширования и офлайн-работы. Это выходит за рамки иконки, но сделает опыт максимально приближенным к нативному.
---
Советы
· Используйте генератор иконок (например, PWA Asset Generator), чтобы получить все размеры и корректный manifest.json.
· Убедитесь, что иконки имеют правильные MIME-типы и доступны по указанным путям.
· После изменения манифеста или иконок перезагрузите страницу и удалите старый ярлык с рабочего стола перед повторным добавлением – браузер кеширует данные.
Следуя этим шагам, ваше веб-приложение будет выглядеть на Android как полноценное нативное приложение с собственной узнаваемой иконкой.