Icons & Branding

Tynd uses one icon source and renders every output format at build time. No manual multi-size ICO, no separate macOS ICNS step.

Source icon

Put one file in public/:

public/favicon.svg         ← preferred
public/favicon.png         ← fallback
public/favicon.ico         ← Windows-only; skipped for macOS/Linux

Alternative locations auto-detected in this order:

1. public/{favicon,icon,logo}.svg
2. public/{favicon,icon,logo}.{ico,png}
3. assets/icon.{svg,png,ico}
4. icon.{svg,png,ico}

Override via icon in tynd.config.ts:

export default {
  icon: "./branding/app-icon.svg",
} satisfies TyndConfig;

What’s rendered per format

Why SVG

• Pixel-perfect at every size — rasterized at render time per DPI bucket.
• Small on disk — typically 2-10 KB.
• Editable — you can tweak colors in an SVG editor and rebuild in seconds.

PNG source degrades to single-size (native resolution). ICO source passes through to Windows bundles only — macOS/Linux bundlers skip with a warning.

SVG gotchas

• Must be square. Tynd auto-wraps non-square SVGs in a square viewBox (Windows PE + macOS ICNS reject/distort non-square inputs). Design your icon with a square canvas.
• Avoid <foreignObject>, <filter>, heavy <clipPath>. Some rasterizers (resvg) fall back or skip. Simple paths + solid fills render the same everywhere.
• Flatten external fonts. <text> with a web font won’t render identically in the rasterizer. Convert text to paths in your SVG editor.
• Use absolute coordinates. Relative paths (d="m 1 1 l 2 3") work in browsers but some rasterizers mis-handle them.

Taskbar / Dock

The icon shown in the taskbar (Windows) / Dock (macOS) / activities view (Linux) is the same as your build icon — Tynd doesn’t expose a separate runtime icon API yet.

Window icon at runtime

Not currently exposed. If you want to change the window icon after launch (e.g. show an “unread” badge), track the feature request on GitHub.

Installer imagery (Windows)

NSIS wizard imagery is separate from the app icon:

bundle: {
  nsis: {
    headerImage:  "./installer-header.bmp",    // 150×57 BMP, top of wizard
    welcomeImage: "./installer-welcome.bmp",   // 164×314 BMP, welcome page
  },
}

Must be 24-bit BMP (NSIS is strict). Optional — default is no imagery.

Splash screen

Not currently a first-class feature. If your app needs a splash, render it in the frontend — your first-paint HTML is the splash. Once app.onReady fires (DOMContentLoaded), swap to the real UI.

export default function App() {
  const [ready, setReady] = useState(false);
  useEffect(() => {
    // heavy init
    initApp().then(() => setReady(true));
  }, []);
  return ready ? <MainApp /> : <Splash />;
}

App name in installers

Override any of these via bundle.* fields in tynd.config.ts.

Brand consistency checklist

tynd build --bundle

test -f public/favicon.svg || { echo "icon missing"; exit 1; }

Related

• Bundling guide.
• tynd.config.ts reference.
• TYNDPKG format — how the icon gets embedded.