Ícones de app por ambiente, gerados pelo seu agente
Quando local, staging e produção mostram o mesmo ícone de aba, é só questão de tempo até alguém rodar o script errado na aba errada. O MCP do Favicon Tools resolve isso na origem: ele retorna ícones de dev, staging e produção por padrão.
O que cada estágio recebe
| Estágio | Ícone |
|---|---|
| Produção | Ícone de marca limpo, sem sobreposição |
| Staging | O mesmo glifo com um selo "S" no canto |
| Desenvolvimento | O mesmo glifo com um selo "D" no canto |
Uma chamada retorna o conjunto inteiro
Aponte seu agente para o servidor MCP e chame generate_iconset. Com os padrões, uma única fonte produz o kit completo por estágio, mais os manifests correspondentes.
// .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> snippetO trecho de instalação já é condicional
Você não escreve a lógica de troca sozinho. O trecho retornado renderiza o ícone e o manifest certos a partir da sua variável de ambiente. Coloque-o no seu layout raiz:
// 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} />O mesmo padrão vem para React, Vue, Svelte e Astro. Ele se baseia em um prefixo de nome de arquivo (/, /staging-, /dev-) para que a produção fique limpa e os outros estágios recebam o selo automaticamente.
Uma rede de segurança para deploy
A barra de abas vira um indicador visível de qual ambiente você está olhando. Um ícone com selo é a pausa que impede um comando destrutivo de cair na produção.
Como as variantes e o trecho condicional voltam na mesma resposta, você ganha higiene multiambiente de graça: sem uma segunda passada de geração, sem tags link editadas à mão.
Antes de publicar
- 1
Confira se os arquivos estão lá
Confirme que os arquivos staging-* e dev-* (e seus manifests) estão no seu diretório estático.
- 2
Defina a variável de ambiente por deployment
O trecho lê NEXT_PUBLIC_APP_ENV ou seu equivalente. Defina-a em todos os ambientes.
- 3
Adicione um sufixo ao nome de cada manifest
Por exemplo "Acme", "Acme (Staging)", "Acme (Dev)".
- 4
Verifique cada ambiente
Rode /verify contra a URL de cada ambiente para confirmar que o ícone certo está no ar.