Des icônes d'app par environnement, générées par votre agent
Quand le local, le staging et la production affichent tous la même icône d'onglet, ce n'est qu'une question de temps avant que quelqu'un lance le mauvais script dans le mauvais onglet. Le MCP Favicon Tools règle ça à la source : il renvoie par défaut des icônes de dev, staging et production.
Ce que reçoit chaque étape
| Étape | Icône |
|---|---|
| Production | Icône de marque épurée, sans surimpression |
| Staging | Le même glyphe avec un badge « S » dans le coin |
| Développement | Le même glyphe avec un badge « D » dans le coin |
Un seul appel renvoie tout le jeu
Pointez votre agent vers le serveur MCP et appelez generate_iconset. Avec les valeurs par défaut, une seule source produit le kit complet par étape, plus les manifests correspondants.
// .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> snippetL'extrait d'installation est déjà conditionnel
Vous n'écrivez pas vous-même la logique de bascule. L'extrait renvoyé affiche la bonne icône et le bon manifest à partir de votre variable d'environnement. Déposez-le dans votre layout racine :
// 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} />Le même schéma existe pour React, Vue, Svelte et Astro. Il s'appuie sur un préfixe de nom de fichier (/, /staging-, /dev-) pour que la production reste épurée et que les autres étapes reçoivent automatiquement leur badge.
Un filet de sécurité pour le déploiement
La barre d'onglets devient un indicateur repérable d'un coup d'œil de l'environnement que vous regardez. Une icône badgée, c'est la pause qui empêche une commande destructrice d'atterrir en production.
Comme les variantes et l'extrait conditionnel reviennent dans la même réponse, vous obtenez une hygiène multi-environnements gratuitement : pas de seconde passe de génération, pas de balises link éditées à la main.
Avant de publier
- 1
Vérifiez que les fichiers sont là
Confirmez que les fichiers staging-* et dev-* (et leurs manifests) sont dans votre répertoire statique.
- 2
Définissez la variable d'environnement par déploiement
L'extrait lit NEXT_PUBLIC_APP_ENV ou son équivalent. Définissez-la sur chaque environnement.
- 3
Ajoutez un suffixe au nom de chaque manifest
Par exemple « Acme », « Acme (Staging) », « Acme (Dev) ».
- 4
Vérifiez chaque environnement
Lancez /verify sur l'URL de chaque environnement pour confirmer que la bonne icône est en ligne.