Усі записи

Іконка, яка не встигла за власним скриптом

«6 в 1» показав скрін чату ШІ, де сайт уже впізнається за адресою, але в іконки світлі кути. favicon.ico лишався зі старого способу малювання (знімок Playwright-сторінки, непрозорий) з 20.09, хоча scripts/icons.ts перейшов на sharp (чесно прозорі кути) ще 24–26.09 — просто ніхто не перегенерував файл.

Що показав скрін

«6 в 1» надіслав скрін: ШІ-чат уже впізнає посилання на сайт і показує його з іконкою — саме те, про що йшлося раніше того ж дня (favicon, og:title, structured data вже на місці). Але в самої іконки — світлий «провал» по кутах, там, де мало бути заокруглення в тон темного тла.

Де саме

Виміряно піксель за пікселем (fetch + canvas.getImageData на живому проді, не на око):

файл кут
/favicon.ico [255,255,255,255] — суцільний непрозорий білий
/icon-192.png, /icon-512.png [0,0,0,0] — прозорий
/apple-touch-icon.png, /icon-maskable-512.png темно-зелений, непрозорий (квадратні, без заокруглення — так і задумано)

Лише favicon.ico зіпсований — і то не «трохи», а суцільним білим квадратом там, де мала бути прозорість.

Чому

git log на public/favicon.ico і на scripts/icons.ts розійшовся: іконку востаннє перегенерували 20.09 (d335574a), а сам скрипт міняли двічі пізніше, 24.09 і 26.09 (68cedf58, d6955e53). До 20.09 малюнок фотографували Playwright-сторінкою — типове тло HTML-сторінки, непрозоре, лягало в кутах поза заокругленою рамкою. З 24–26.09 скрипт малює SVG напряму через sharp, який за замовчуванням чесно лишає прозорість. Новий код запускали для PWA-іконок (вони й були метою того коміта, і вийшли правильними одразу), а favicon.ico й apple-touch-icon.png — ні, просто не запустили npm run icons повторно.

Локально відтворено на самому sharp: той самий draw() на поточному favicon.svg, на всіх перевірених розмірах (16, 32, 48, 192, 512) дає прозорий кут — тобто перегенерований файл був би правильним увесь цей час, якби хтось запустив скрипт.

Виправлення

npm run icons. Змінилося лише те, що й мало: favicon.ico (937 → 735 байт) і apple-touch-icon.png (3560 → 2507 байт, той самий малюнок, ефективніше закодований). PWA-іконки — байт у байт ті самі, підтверджуючи, що вони вже були актуальні.

Коментар у scripts/icons.ts виправлено: він стверджував «жодної прозорості в жодному з варіантів», що лишається правдою тільки для квадратного (apple-touch-icon, maskable) — заокруглений варіант навпаки навмисно лишає прозорі кути, щоб те, що його показує, компонувало іконку на власному тлі, а не з чужим квадратом по кутах.

Що перевірено

Окремий worktree від origin/main у скретчпаді сесії (спільний робочий каталог мав два чужі незапушені коміти — щоб їх не зачепити). Пікселі перевірено sharp-ом напряму (не лише на око): прозорий кут на заокруглених варіантах, суцільний темно-зелений на квадратному, на кожному перевіреному розмірі. npm run verify:code пройшов повністю. Змін у src/ui/** чи маршрутах немає, тож окремого прогону Playwright не було.

Запис зроблено 29 вересня 2026 р.

Коміти, про які цей запис

  • 863f716