# Erudit — site icons + Open Graph card The favicon set and the `og:image` link-preview card for the public landing (`ui/landing.html`) and the SPA shell (`ui/index.html`). Same design language as the [VK loading-screen logo](../vk/README.md): the wooden Erudit «Э» tile (score `8`), with the wordmark on the app's dark board green (`ui/src/app.css` tokens). | Output (committed to `ui/public/`) | Purpose | |------|---------| | `favicon.svg` | Vector favicon, transparent; tile + «Э» only (the score is illegible below ~32 px). | | `favicon.ico` | 32×32 PNG-in-ICO fallback (also answers the browsers' blind `/favicon.ico` probe). | | `apple-touch-icon.png` | 180×180 opaque full-bleed tile; iOS masks its own corners. | | `og-image.png` | 1200×630 card: tile + «Эрудит / Скрэббл — игра в слова». Referenced absolutely as `https://erudit-game.ru/og-image.png`. | ## How it works `build/extract.js` extracts the needed glyph outlines (tile glyphs + every wordmark character) from LiberationSans (Arial-metric, the game's font stack) with their advance widths into `build/glyphs.json` (committed). `build/generate.js` composes plain SVG from those outlines — no font is needed at generation time — writes `favicon.svg` and rasterises the PNG/ICO outputs by screenshotting the SVGs with the `ui` package's Playwright chromium (`@playwright/test`); the `.ico` container is assembled in-script (a single PNG entry). Raster bytes therefore depend on the installed chromium version; the SVG sources are deterministic. ## Regenerate Requirements: Node ≥ 18, `ui` installed (`pnpm install`, provides Playwright). `extract.js` additionally needs `opentype.js` (`npm i opentype.js`); **`generate.js` needs no extra packages**. ```sh cd assets/icons # 1. (optional) re-extract the glyphs — only if the font or the wordmark changes: # default font: /usr/share/fonts/truetype/liberation/LiberationSans-Regular.ttf node build/extract.js [/path/to/font.ttf] # -> build/glyphs.json # 2. regenerate everything in ui/public/: node build/generate.js ```