Підготовка іконок і графічних ассетів для сайту
Іконки — один з найнедооцінених елементів підготовки до розробки. Типова проблема: дизайнер нарисував іконки у 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 дні залежно від обсягу іконок й наявності вихідників.