App icon против favicon: в чём разница?
Они выглядят похоже, но служат разным целям. Вот когда использовать каждый и как они работают вместе.
Сравнение бок о бок
| Аспект | Favicon | App icon |
|---|---|---|
| Основное применение | Вкладки браузера, закладки, результаты поиска | Домашний экран, переключатель приложений, магазины приложений |
| Где пользователи его видят | Десктопные браузеры, мобильные браузеры | Домашний экран iOS, лаунчер Android |
| Типичные размеры | 16x16, 32x32, 96x96px | 180x180, 192x192, 512x512px |
| Формат файла | ICO, PNG, SVG | PNG (часто maskable) |
| Определяется в | Тегах <link> в HTML | manifest.json |
| Обязателен для | Всех сайтов | PWA, устанавливаемых веб-приложений |
Что представляет собой каждый
Favicon (сокращение от «favorite icon») — это маленький значок, который появляется на вкладках браузера, в закладках, истории браузера и результатах поисковых систем. Это визуальный идентификатор вашего сайта в браузере.
App icon — это более крупная иконка, которая появляется на домашнем экране пользователя, когда он устанавливает ваше веб-приложение как прогрессивное веб-приложение (PWA). Она представляет ваше приложение как самостоятельное приложение.
Где появляется каждый
Favicon
Start hereНужен каждому сайту, PWA или нет
- Идентификация на вкладке браузера
- Визуальное узнавание в закладках
- Брендинг в результатах поиска
- Иконки в истории браузера
- Ярлыки на рабочем столе (Windows)
- Объявляется в HTML: <link rel="icon" href="/favicon.ico">
App icon
Появляется только после того, как кто-то установит приложение
- Лаунчер домашнего экрана
- Переключатель приложений / многозадачность
- Значки уведомлений
- Карточки в магазинах приложений
- Брендинг на заставке
- Объявляется в manifest.json: "icons": [{"sizes": "192x192"}]
Размеры favicon рядом с размерами app icon
1. Требования к размеру
Favicon обычно маленькие (от 16x16 до 96x96px), потому что появляются в компактных местах, таких как вкладки браузера. Они должны быть узнаваемы в крошечных размерах.
App icon значительно крупнее (от 180x180 до 512x512px), потому что отображаются на видном месте на домашних экранах. Они могут содержать больше деталей и часто проектируются с maskable-вариантами для разных форм устройств.
2. Контекст использования
Favicon всегда видны во время просмотра: они часть интерфейса браузера. Пользователи видят их постоянно, переключаясь между вкладками и сайтами.
App icon появляются только после установки. Они представляют ваше приложение как самостоятельную сущность, отдельную от браузера. Пользователи нажимают на них, чтобы запустить приложение в полноэкранном режиме.
3. Техническая реализация
Favicon объявляются в HTML с помощью тегов <link> в head документа. Можно указать несколько размеров для разных контекстов.
App icon определяются в manifest.json, на который ссылается HTML. Манифест также включает другие метаданные PWA, такие как имя приложения, цвета темы и режим отображения.
Нужны ли вам оба?
Да, у вас должны быть оба. Вот почему.
Favicon важны для всех сайтов: они улучшают узнаваемость бренда на вкладках браузера и в результатах поиска.
App icon обязательны, если вы хотите, чтобы пользователи устанавливали ваш сайт как PWA. Без них предложения об установке не появляются, а опыт на домашнем экране получается плохим.
Они могут использовать один и тот же дизайн, но должны быть оптимизированы под свои размеры и контексты.
Советы по дизайну favicon
Держите дизайн простым: детали теряются в 16px.
Используйте высокий контраст для видимости.
Тестируйте в нескольких размерах (16x16, 32x32, 96x96).
Рассмотрите SVG для чёткого масштабирования.
Убедитесь, что он работает и на светлом, и на тёмном фоне.
Советы по дизайну app icon
Проектируйте минимум под 192x192px (рекомендуется 512x512px).
Создавайте maskable-варианты для Android.
Убедитесь, что безопасная зона (внутренние 80%) содержит критичные элементы.
Используйте брендинг, единый с вашим favicon.
Тестируйте на реальных устройствах для лучшего результата.