App-Icons pro Umgebung, von deinem Agenten generiert
Wenn lokal, Staging und Produktion alle dasselbe Tab-Icon zeigen, ist es nur eine Frage der Zeit, bis jemand das falsche Skript im falschen Tab ausführt. Der MCP von Favicon Tools behebt das an der Quelle: Er liefert standardmäßig Icons für Dev, Staging und Produktion.
Was jede Stage bekommt
| Stage | Icon |
|---|---|
| Produktion | Sauberes Marken-Icon, kein Overlay |
| Staging | Derselbe Glyph mit einem "S"-Badge in der Ecke |
| Entwicklung | Derselbe Glyph mit einem "D"-Badge in der Ecke |
Ein Aufruf liefert das ganze Set
Richte deinen Agenten auf den MCP-Server und rufe generate_iconset auf. Mit den Standardwerten erzeugt eine einzige Quelle das vollständige Kit pro Stage plus die passenden Manifeste.
// .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> snippetDas Install-Snippet ist bereits bedingt
Du verdrahtest die Umschaltlogik nicht selbst. Das zurückgegebene Snippet rendert das richtige Icon und Manifest anhand deiner Umgebungsvariable. Setz es in dein 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} />Dasselbe Muster gibt es für React, Vue, Svelte und Astro. Es richtet sich nach einem Dateinamen-Präfix (/, /staging-, /dev-), sodass die Produktion sauber bleibt und die anderen Stages automatisch ihr Badge bekommen.
Ein Sicherheitsnetz für Deploys
Die Tab-Leiste wird zu einem auf einen Blick erkennbaren Hinweis darauf, welche Umgebung du gerade vor dir hast. Ein Icon mit Badge ist die Pause, die verhindert, dass ein destruktiver Befehl in der Produktion landet.
Da die Varianten und das bedingte Snippet in derselben Antwort zurückkommen, bekommst du Multi-Umgebungs-Hygiene gratis: kein zweiter Generierungslauf, keine von Hand bearbeiteten link-Tags.
Bevor du auslieferst
- 1
Prüfe, ob die Dateien da sind
Bestätige, dass die staging-*- und dev-*-Dateien (und ihre Manifeste) in deinem Static-Verzeichnis liegen.
- 2
Setze die Env-Variable pro Deployment
Das Snippet liest NEXT_PUBLIC_APP_ENV oder dein Äquivalent. Setze sie in jeder Umgebung.
- 3
Häng an jeden Manifest-Namen ein Suffix an
Zum Beispiel "Acme", "Acme (Staging)", "Acme (Dev)".
- 4
Verifiziere jede Umgebung
Führe /verify gegen die URL jeder Umgebung aus, um zu bestätigen, dass das richtige Icon live ist.