Per-environment app icons, आपके agent द्वारा बनाए गए
जब local, staging, और production सब एक ही tab icon दिखाते हैं, तो यह सिर्फ़ समय की बात है कि कोई गलत tab में गलत script चला दे। Favicon Tools MCP इसे स्रोत पर ही ठीक करता है: यह default रूप से dev, staging, और production icons लौटाता है।
हर stage को क्या मिलता है
| Stage | Icon |
|---|---|
| Production | साफ़ brand icon, कोई overlay नहीं |
| Staging | वही glyph, कोने में "S" badge के साथ |
| Development | वही glyph, कोने में "D" badge के साथ |
एक call पूरा set लौटाती है
अपने agent को MCP server की ओर इंगित करें और generate_iconset call करें। defaults के साथ, एक single source पूरा per-stage kit बनाता है, साथ ही मेल खाते manifests भी।
// .mcp.json: add the server
{
"mcpServers": {
"favicontools": {
"type": "http",
"url": "https://favicontools.com/api/mcp"
}
}
}// then the agent calls:
generate_iconset({ source: "noto:fox" })
// → clean production icon
// → staging-* variants (corner "S")
// → dev-* variants (corner "D")
// → manifest.json + staging-manifest.json + dev-manifest.json
// → a stage-aware <head> snippetInstall snippet पहले से ही conditional है
switching logic आप खुद नहीं लिखते। लौटाया गया snippet आपके environment variable के आधार पर सही icon और manifest render करता है। इसे अपने root layout में डालें:
// app/layout.tsx (Next.js)
const isStaging = process.env.NEXT_PUBLIC_APP_ENV === "staging";
const isDev = process.env.NODE_ENV === "development";
// pick the filename prefix + manifest per stage
const prefix = isDev ? "/dev-" : isStaging ? "/staging-" : "/";
const manifest = isDev
? "/dev-manifest.json"
: isStaging
? "/staging-manifest.json"
: "/manifest.json";
// <link rel="icon" href={`${prefix}favicon.ico`} />
// <link rel="icon" sizes="32x32" href={`${prefix}favicon-32x32.png`} />
// <link rel="manifest" href={manifest} />यही pattern React, Vue, Svelte, और Astro के लिए भी आता है। यह एक filename prefix (/, /staging-, /dev-) पर आधारित है ताकि production साफ़ रहे और बाकी stages को अपना badge अपने-आप मिल जाए।
एक deploy safety net
Tab bar इस बात का एक झलक में दिखने वाला संकेतक बन जाता है कि आप किस environment को देख रहे हैं। badge वाला icon वह ठहराव है जो एक destructive command को production में गिरने से रोकता है।
क्योंकि variants और conditional snippet एक ही response में वापस आते हैं, आपको multi-environment hygiene मुफ़्त में मिलती है: कोई दूसरी generation pass नहीं, कोई हाथ से edit किए गए link tags नहीं।
Ship करने से पहले
- 1
जाँचें कि files मौजूद हैं
पुष्टि करें कि staging-* और dev-* files (और उनके manifests) आपकी static dir में हैं।
- 2
हर deployment के लिए env var सेट करें
Snippet NEXT_PUBLIC_APP_ENV या आपके समकक्ष को पढ़ता है। इसे हर environment पर सेट करें।
- 3
हर manifest name में suffix जोड़ें
उदाहरण के लिए "Acme", "Acme (Staging)", "Acme (Dev)"।
- 4
हर environment को verify करें
हर environment URL पर /verify चलाकर पुष्टि करें कि सही icon live है।