Знак каждого продукта во всех размерах, которые нужны на практике. Скачайте нужный размер и поставьте — ничего дорисовывать не надо.
Под каждым знаком — лесенка в натуральную величину: так видно, что остаётся читаемым на вкладке браузера, а что нет.
Иконка почти всегда мелкая и в окружении чужих. Здесь — домашний экран телефона в светлом и тёмном оформлении.
вкладки браузера — иконка 16 px
| Файл | Где используется | Как подключить |
|---|---|---|
| 512.png | Домашний экран телефона (PWA), магазин приложений | manifest.webmanifest → icons |
| 256.png | Карточка продукта на сайте, презентации, документы | <img src="…"> |
| 192.png | Иконка сайта в браузере, манифест | <link rel="icon"> |
| 180.png | Safari на iPhone, «На экран Домой» | <link rel="apple-touch-icon"> |
| 64.png | Список приложений, боковое меню | <img> в интерфейсе |
| 32 / 16.png | Вкладка браузера, закладки | <link rel="icon" sizes> |
| favicon.ico | Старые браузеры, корень сайта | /favicon.ico |
Замените efir на имя своего продукта — папки называются efir, zbs, bi, ii, tasker, psa, foliant.
<!-- в <head> страницы -->
<link rel="icon" type="image/png" sizes="192x192" href="/brandbook/icons/efir/192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/brandbook/icons/efir/32.png">
<link rel="apple-touch-icon" href="/brandbook/icons/efir/180.png">
<!-- в manifest.webmanifest приложения -->
"icons": [
{ "src": "/brandbook/icons/efir/192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/brandbook/icons/efir/512.png", "sizes": "512x512", "type": "image/png", "purpose": "any" }
]
Берите готовый размер. Файлы уже нарезаны под каждый случай. Растянутая иконка 16 px до 192 выглядит мыльной — качество не вернуть.
Скруглённый квадрат — часть знака. Не обрезайте его в круг и не добавляйте свою рамку: платформы скругляют иконку сами, поверх.
Светлая плашка не случайна. Она держит знак читаемым и на светлом, и на тёмном экране — посмотрите примерку выше.
Не перекрашивайте знак под свою страницу. Цвет продукта — часть опознания: голубой Эфир, хвойный ЗБС, янтарный BI, фиолетовый ИИ, шалфейный Tasker, индиговый PSA-Control, терракотовый Фолиант.
Не растягивайте непропорционально и не наклоняйте. Знак квадратный, соотношение сторон 1:1 всегда.
Подпись «.AZ» на иконке не заменяет название. На 32 px она нечитаема — это нормально. Название продукта пишите текстом рядом.