Иконка приложения: чем она отличается от favicon
Иконка приложения — это изображение, представляющее установленное приложение на домашнем экране, в лаунчере, доке или переключателе приложений, в отличие от favicon, который представляет сайт внутри браузера. В вебе одна и та же графика служит обоим: iOS берёт иконку приложения из тега link apple-touch-icon, а Android и десктопные PWA берут её из массива icons в веб-манифесте приложения. Каждая платформа обрезает и маскирует её под свою форму, так что графика должна быть нарисована так, чтобы это пережить.
Та же графика, другая задача
Favicon живёт внутри интерфейса браузера, на 16–32 пикселях, рядом с заголовком страницы, который несёт большую часть смысла. Иконка приложения живёт на домашнем экране на 100 пикселях и больше, сама по себе, рядом с десятком конкурентов, и она — единственное, что вас обозначает. Ей достаётся больше места и больше внимания.
Практическая разница в том, откуда платформа её берёт и что делает с ней потом. Браузеры рисуют favicon как есть. Операционные системы обрезают иконки приложений под форму, добавляют тень, а иногда тонируют или приглушают их, так что знак, доходящий до края холста, обрезается.
Откуда каждая платформа берёт иконку приложения
| Платформа | Источник | Размер для отдачи |
|---|---|---|
| iOS / iPadOS | link rel="apple-touch-icon" | PNG 180x180, непрозрачный |
| Android | Массив icons в манифесте | PNG 192x192 и 512x512 |
| Десктопный PWA | Массив icons в манифесте | PNG 512x512 |
| Маска формы лаунчера Android | Запись манифеста с purpose maskable | PNG 512x512, безопасная зона 80% |
| Ярлык Windows | favicon.ico | Запись 48x48 |
Два важных объявления
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.json">iOS читает первое, Android и десктопные PWA читают массив icons в файле, на который указывает второе. Вместе они покрывают каждую поверхность установленного приложения.
Частые вопросы об иконке приложения
Нужна ли отдельная графика для иконки приложения и для favicon?
Обычно не отдельная графика, но часто отдельная обработка. Иконка приложения хочет залитый фон и щедрые отступы; favicon хочет знак как можно крупнее и проще. Один логотип, два экспорта.
Почему моя иконка на домашнем экране выглядит как скриншот?
iOS откатывается к скриншоту страницы, когда не находит ни ссылки apple-touch-icon, ни /apple-touch-icon.png в корне сайта. Добавление любого из них это исправляет, хотя старая иконка может сохраняться, пока ярлык не будет добавлен заново.
Какого размера должна быть исходная графика?
1024x1024 или больше, квадратная, без запечённых скруглённых углов. Каждый платформенный размер чисто уменьшается из неё, а платформы применяют собственные формы углов.