Íconos de app por entorno, generados por tu agente
Cuando local, staging y producción muestran el mismo ícono de pestaña, es solo cuestión de tiempo hasta que alguien ejecute el script equivocado en la pestaña equivocada. El MCP de Favicon Tools lo resuelve de raíz: devuelve íconos de dev, staging y producción de forma predeterminada.
Lo que recibe cada etapa
| Etapa | Ícono |
|---|---|
| Producción | Ícono de marca limpio, sin superposición |
| Staging | El mismo glifo con un distintivo "S" en la esquina |
| Desarrollo | El mismo glifo con un distintivo "D" en la esquina |
Una sola llamada devuelve el conjunto entero
Apunta tu agente al servidor MCP y llama a generate_iconset. Con los valores predeterminados, una sola fuente produce el kit completo por etapa, más los manifests correspondientes.
// .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> snippetEl fragmento de instalación ya es condicional
No escribes la lógica de conmutación tú mismo. El fragmento devuelto renderiza el ícono y el manifest correctos a partir de tu variable de entorno. Colócalo en tu layout raíz:
// 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} />El mismo patrón viene para React, Vue, Svelte y Astro. Se basa en un prefijo de nombre de archivo (/, /staging-, /dev-) para que producción quede limpia y las demás etapas reciban su distintivo automáticamente.
Una red de seguridad para el despliegue
La barra de pestañas se convierte en un indicador visible de un vistazo de qué entorno estás mirando. Un ícono con distintivo es la pausa que impide que un comando destructivo caiga en producción.
Como las variantes y el fragmento condicional vuelven en la misma respuesta, obtienes higiene multientorno gratis: sin una segunda pasada de generación, sin etiquetas link editadas a mano.
Antes de publicar
- 1
Comprueba que los archivos están ahí
Confirma que los archivos staging-* y dev-* (y sus manifests) están en tu directorio estático.
- 2
Define la variable de entorno por despliegue
El fragmento lee NEXT_PUBLIC_APP_ENV o tu equivalente. Defínela en todos los entornos.
- 3
Añade un sufijo al nombre de cada manifest
Por ejemplo "Acme", "Acme (Staging)", "Acme (Dev)".
- 4
Verifica cada entorno
Ejecuta /verify contra la URL de cada entorno para confirmar que el ícono correcto está en vivo.