Подготовка иконок и графических ассетов для сайта
Иконки — один из самых недооценённых элементов подготовки к разработке. Типичная проблема: дизайнер нарисовал иконки в Figma, разработчик экспортировал как PNG — и получил растровые иконки с жёстко заданным цветом, которые размываются на Retina-дисплеях и не поддерживают смену темы.
Форматы: что и когда
SVG — стандарт для иконок в вебе. Масштабируется без потери качества, поддерживает currentColor для динамического цвета, CSS-анимации, малый вес (обычно 0.5–3 KB на иконку).
PNG — только для иконок со сложным градиентом или текстурой, которые нельзя воспроизвести в SVG. Нужны версии 1x, 2x, 3x для Retina.
SVG Sprite — все иконки в одном файле, подключаются через <use href="#icon-name">. Один HTTP-запрос, кэшируется браузером.
Icon Font (Font Awesome, Material Icons) — устаревший подход. Плохая доступность, сложнее контролировать рендеринг, FOIT при загрузке. Используйте только если уже подключён в проекте.
Подготовка SVG-иконок
Иконка, готовая к разработке, должна:
-
Использовать
currentColorвместо захардкоженного цвета:<path fill="currentColor" d="M..." />Тогда
color: redна родителе меняет цвет иконки. -
Иметь фиксированный viewBox, обычно
0 0 24 24или0 0 20 20 -
Не содержать лишних атрибутов —
id,class,style,data-*из Figma-экспорта нужно убрать. Инструмент: SVGO или онлайн svgomg.net -
Быть оптимизированной — SVGO убирает лишние
<g>, объединяет пути, убирает пробелы. Типичная экономия: 30–60% веса файла.
Системы иконок
Готовые библиотеки иконок, которые стоит рассмотреть прежде чем рисовать с нуля:
| Библиотека | Лицензия | Иконок | Стиль |
|---|---|---|---|
| Lucide Icons | MIT | 1500+ | Outline, 24×24 |
| Heroicons | MIT | 292 | Outline + Solid, 24×24 |
| Phosphor Icons | MIT | 9000+ | 6 стилей |
| Tabler Icons | MIT | 5500+ | Outline, 24×24 |
| Material Symbols | Apache 2.0 | 3000+ | Variable font |
Если бренд требует уникальных иконок — рисуем на основе выбранной сетки (24×24, stroke 1.5–2px для outline-стиля, единый corner radius).
Фавикон и App Icons
Фавикон в 2024 году — не один ICO-файл. Минимальный набор:
-
favicon.ico— 32×32, для старых браузеров -
favicon.svg— векторный, поддерживается Chrome 80+, Firefox 84+ -
apple-touch-icon.png— 180×180, для iOS Safari -
icon-192.png+icon-512.png— для PWA manifest
SVG-фавикон поддерживает prefers-color-scheme — разный вид в светлой и тёмной системной теме:
<svg xmlns="http://www.w3.org/2000/svg">
<style>
path { fill: #000; }
@media (prefers-color-scheme: dark) {
path { fill: #fff; }
}
</style>
<path d="..."/>
</svg>
OG-изображения и социальные ассеты
Для SEO и шаринга в соцсетях нужны:
-
OG Image (Open Graph): 1200×630px, PNG или JPEG. Автогенерация через
@vercel/ogили Puppeteer — для динамических страниц. - Twitter Card: 1200×628px (аналогично OG)
- LinkedIn Banner: 1128×191px (для корпоративных страниц)
Сроки
Подготовка полного набора ассетов (оптимизация существующих иконок, SVG-спрайт, фавикон-набор, OG-шаблон) — 2–4 дня в зависимости от объёма иконок и наличия исходников.