# Створила набори піктограм і фавіконів компанії на основі двох намальованих вручну зображень; кожен похідний ресурс перегенеровується скриптом, а перевірка падає, якщо похідний файл закомічено раніше за його джерело.

липень 2026

**Ситуація.** Фірмовий стиль малої компанії зазвичай купують, генерують або збирають зі стокових матеріалів, і в результаті виходить стиль, який нікому не належить. Протилежна проблема ще гірша: намальована вручну графіка існує лише у вигляді експортованих файлів, вихідний малюнок втрачено, експортовані файли редагують напряму, і за рік версії, що використовуються, суперечать одна одній, а оригіналу, який розв'язав би суперечку, вже немає.

**Завдання.** Фірмовий стиль треба було намалювати, а не придбати, а шлях від малюнка до опублікованого ресурсу мав бути відтворюваним, щоб кожен файл на сайті можна було отримати з джерела, а не просто зберігати.

**Дія.** Згенерована графіка почалася з двох намальованих вручну малюнків: растрового знака компанії та векторної шестірні, яку намалювали для вкладки браузера з міркування, що виразний силует лишається розбірливим у розмірі 16 пікселів. Коли їх показали поруч у розмірах 16, 32 і 48 пікселів на світлій і темній панелях вкладок, знак лишився впізнаваним, а шестірня розмилася, тож піктограма вкладки перейшла на знак, і тепер кожну піктограму, яку публікує сайт, згенеровано з цього одного малюнка. З нього скрипти генерують усі похідні формати: набір favicon у потрібних розмірах, піктограми для сенсорних пристроїв (touch icons) і зображення екрана запуску для кожного розміру пристрою. Генерація — це завдання, яке може запустити будь‑хто, тож відповідь на питання «звідки взявся цей файл» — конкретна команда. Усе це тримається завдяки перевірці застарілості: вона порівнює дату коміту кожного похідного ресурсу з датою коміту його джерела й завершується з помилкою, якщо похідний файл закомічено раніше. Так вона виявляє саме той збій, якому покликана запобігти вся ця схема: хтось редагує джерело, забуває перегенерувати похідні файли, і опублікований сайт і далі показує графіку, яка вже не відповідає оригіналу. Правило, що похідні файли ніколи не редагують вручну, записано там, де лежать джерела.

**Результат.** Один малюнок тепер дає кожну опубліковану піктограму, зокрема й піктограму вкладки, перегенерація — одна команда, а застарілий ресурс призводить до помилки збірки. Компроміс — жорстка залежність від інструментарію: похідні файли закомічено, тож сайт збирається будь‑де, але щоб змінити фірмовий стиль, інструменти генерації мають і далі працювати, а вихідний формат, який перестане читатися, забере із собою весь фірмовий стиль.

---

- Роль: Дизайнер бренду та айдентики
- Категорії: [Веброзробка](https://brand.engineer.company/uk/categories/web-development/), [Автоматизація та CI/CD](https://brand.engineer.company/uk/categories/automation/), [Тестування та QA](https://brand.engineer.company/uk/categories/testing/), [Дизайн‑системи та UI](https://brand.engineer.company/uk/categories/design-systems/), [UX / UI‑дизайн](https://brand.engineer.company/uk/categories/ux-ui/), [Бренд і маркетинг](https://brand.engineer.company/uk/categories/brand-marketing/)
- Послуги: [Розробка вебсайтів та CMS](https://brand.engineer.company/uk/services/web-development/), [UI/UX‑дизайн та дизайн‑системи](https://brand.engineer.company/uk/services/ui-ux-design/), [Бренд, маркетинг та SEO](https://brand.engineer.company/uk/services/brand-marketing/)

<https://brand.engineer.company/uk/portfolio/built-the-visual-identity-from-two-drawings-164/>
