env.style

env.style tints or swaps favicons by environment so dev, preview, staging, and production tabs are visually distinct. Use it when a project has multiple browser tabs for the same app and mistakes between environments are a real workflow risk. Source: env.style site, 2026-07-06

Version Snapshot

As of 2026-07-07, npm reports env.style@1.0.1 as latest, published 2026-07-05. The enriched bookmark's resolved GitHub child had 36 stars at collection time; the official GitHub page now describes it as environment-tinted favicons for Next.js and Vite and shows installation through pnpm add env.style. Source: npm registry; GitHub QuadDepo/env.style, 2026-07-07

How It Fits

The tool wraps framework config instead of asking every app to manually maintain favicon variants. The official README shows withEnvStyles(nextConfig) for Next.js and an envStyle() Vite plugin imported from env.style/vite. It also documents color-per-environment config, icon-per-environment config, enabling/disabling, explicit environment selection, excluded colors, and the operational limits: environment resolution is build-time, CDN-only favicons are not intercepted, and icon source changes require a dev-server or build restart. Source: GitHub QuadDepo/env.style, 2026-07-07

Use it when:

  • Production, preview, staging, and development are open at the same time.
  • The same app shell appears under multiple domains or Vercel environments.
  • A deploy/release workflow has caused "wrong tab" edits, checks, or demos.

Do not use it when a project already has a clear environment banner, when favicon churn would violate brand/legal constraints, or when the environment difference should be hidden from end users.

Kevin Stack Route

For Kevin projects, treat env.style as a DX affordance near Interface Micro-Polish, not as a product-design dependency. If adopted:

  1. Add the package in the app repo.
  2. Choose colors/icons that are obvious in a crowded tab strip.
  3. Preserve production brand colors unless the app explicitly wants a production tint.
  4. Verify favicon behavior in Next.js/Vite dev, preview, and production builds because browsers cache favicons aggressively.

Timeline