Five browser tabs, all the same favicon: dev, preview, production.. and you keep editing the wrong one. env.style tints your existing favicon per environment at build time, Vercel-style: same mark, different color. Production is never touched.

Website · Examples

pnpm add env.style

// next.config.ts
import { withEnvStyles } from 'env.style'
export default withEnvStyles(nextConfig)

// vite.config.ts
import { defineConfig } from 'vite'
import { envStyle } from 'env.style/vite'
export default defineConfig({ plugins: [envStyle()] })

See the package README for full API docs, options, and how it works.

See DEVELOPMENT.md for setup, repo structure, and how to run examples.

MIT