Icons

The universal form

Single form, one exception: the Android adaptive icon variant shifts the mark to ~50% so the system’s circle/squircle/rounded-square mask doesn’t clip it.

Required assets

All PNG icons ship as solid navy-900 (no transparency). Icons live on varying backgrounds - Windows tiles, iOS home screens, Android launchers with custom wallpapers - and transparency produces unpredictable results. Solid navy guarantees the brand mark reads consistently.

PWA manifest

manifest.webmanifest:

{
  "name": "Frontier Defense Technology",
  "short_name": "FDT",
  "description": "Decision superiority at the speed of relevance.",
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#0A1220",
  "background_color": "#0A1220",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" },
    { "src": "/icon-maskable.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ]
}

Both theme_color and background_color are navy-900. On mobile browsers, theme_color tints the address bar and system chrome when the PWA is launched. Using navy-900 makes the chrome disappear into the product surface - a single unbroken dark frame. An electric-blue chrome would advertise the brand in the OS chrome and fight the product’s own dark UI; we don’t.

HTML head references

<!-- Primary -->
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/svg+xml" href="/safari-pinned-tab.svg">

<!-- PNG fallbacks -->
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">

<!-- iOS -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

<!-- Windows -->
<meta name="msapplication-TileColor" content="#0A1220">
<meta name="msapplication-TileImage" content="/mstile-150x150.png">

<!-- PWA + theme color -->
<link rel="manifest" href="/manifest.webmanifest">
<meta name="theme-color" content="#0A1220">
<meta name="color-scheme" content="dark">

color-scheme: dark tells the browser not to invert colors or apply any “auto light mode” heuristics. FDT surfaces are dark-native everywhere.

Per-product variations

Each product (GRIDWATCH, GHOST GRID, QRF, OVERWATCH, SECTOR) gets its own favicon set with identical anatomy - navy-900 ground, white mark - but the mark may be replaced with a product-specific glyph when the shared FDT hex alone doesn’t distinguish the product in the tab strip.

Default posture: use the FDT hex. A product-specific glyph is an opt-in, not a default. Product glyphs follow the same construction rules (geometric wireframe, white on navy-900, no effects, ~60% canvas fill) so the family reads as a set at 16×16.

Anti-patterns

• No glow. At favicon scale, a glow degrades to muddy blue fringing. Save the glow for surfaces where it can be seen cleanly.
• No gradient ground. Solid navy-900 only. Gradients compress badly to PNG and read as noise.
• No text or wordmark. “FDT” in Barlow Condensed is not legible at 16×16. The mark alone is the brand at this scale.
• No product-specific ground color. GHOST GRID does not get a red favicon; SECTOR does not get an amber favicon. The ground is always navy-900 - the product differentiates through its mark, not through background color. This keeps the family visually coherent in the browser tab strip.
• No transparency. Solid background only. Transparent PNGs render unpredictably on Windows tiles and Android launchers.
• No drop shadow. The mark is the mark. Shadow gains nothing at this size and loses contrast at 16×16.