Favicon

Preview

At every size

The mark holds up from a 16px tab icon to a 512px splash. Letterforms stay legible because the container fills the frame and the IS pairing keeps generous counters.

Browser tab → home screen

16px

32px

48px

64px

128px

Download

The full set

One archive with every format plus the web manifest, ready to drop in your project's public root.

• 
  favicon.svgScalable

  Vector source. Modern browsers prefer this; renders crisp at any size.

• 
  favicon.ico16 · 32 · 48

  Multi-resolution legacy fallback served from the site root.

• 
  favicon-16x16.png16 × 16

  Browser tab at standard density.

• 
  favicon-32x32.png32 × 32

  Browser tab on retina displays and taskbar shortcuts.

• 
  apple-touch-icon.png180 × 180

  iOS home screen. Opaque white background; iOS applies its own rounding.

• 
  android-chrome-192x192.png192 × 192

  Android home screen and PWA install.

• 
  android-chrome-512x512.png512 × 512

  Splash screens and high-density PWA contexts.

• json
  site.webmanifestJSON

  Web app manifest wiring the Android icons, name, and theme colours.

Installation

Unzip the archive into your site's public root (so the files sit at /favicon.ico, /favicon.svg, and so on), then reference them.

<!-- In the document <head> -->
<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />

// app/layout.tsx — Next.js App Router
import type { Metadata } from "next"

export const metadata: Metadata = {
  icons: {
    icon: [
      { url: "/favicon.ico", sizes: "any" },
      { url: "/favicon.svg", type: "image/svg+xml" },
      { url: "/favicon-32x32.png", type: "image/png", sizes: "32x32" },
      { url: "/favicon-16x16.png", type: "image/png", sizes: "16x16" },
    ],
    apple: "/apple-touch-icon.png",
  },
  manifest: "/site.webmanifest",
}

Web manifest

site.webmanifest registers the Android icons and sets the install colours: lime as the theme colour, forest as the background.

{
  "name": "Instant Strata",
  "short_name": "Instant Strata",
  "icons": [
    { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
  ],
  "theme_color": "#C8F169",
  "background_color": "#043F2E",
  "display": "standalone"
}

Rules

• -Serve favicon.svg and favicon.ico from the site root, not a subfolder, so default browser requests resolve.
• -Keep the lime container filling the frame: never pad the mark down to a small badge inside the icon.
• -apple-touch-icon stays opaque (white background); iOS does not honour transparency and adds its own corner radius.
• -Android icons (192 / 512) keep transparent corners and are wired through site.webmanifest.
• -Do not recolour the mark for favicons — lime container, forest letterforms, always.
• -Regenerate the whole set from the SVG source if the brand mark changes; never hand-edit a single PNG.