Adicione ícones de app com IA: sem passos manuais
O jeito antigo: abrir um gerador, subir uma imagem, baixar um zip, descompactar, copiar arquivos para public/, colar vinte tags link à mão. O jeito novo: peça ao seu agente "adicione um favicon" e ele cai no repositório, com o head já ajustado, pronto.
Como tudo acontece
- 1
Você pede
Uma frase no Claude Code, no Cursor ou em qualquer agente que suporte MCP. Nenhum recurso para preparar.
- 2
Ele gera
favicon.ico, todos os tamanhos de PNG, apple-touch, ícones Android, versões claro/escuro adaptáveis ao tema e manifest.json.
- 3
Ele instala
Os arquivos são gravados no seu diretório estático, as tags <head> corretas são adicionadas ao seu layout, nada para mover à mão.
Duas formas de conectar
Ambas são zero-config além de um ajuste único, e ambas gravam os arquivos diretamente no seu projeto.
Opção A: a skill appicons
Código aberto, integrada ao seu agente
- Ensina o agente a transformar a intenção em um conjunto de ícones e instalá-lo.
- Você só conversa com ele, sem formatos ou tamanhos para escolher.
- Por baixo dos panos, ele resolve o que você escreveu em uma fonte, chama a API do favicontools.com e desempacota o resultado em public/.
Opção B: o servidor MCP do Favicon Tools
Duas ferramentas, adicionadas ao arsenal do seu agente
- search_inputs para descobrir as opções, generate_iconset para produzir o conjunto.
- Retorna URLs de CDN para cada arquivo, além de um trecho de head pronto para colar.
- Retorna um conjunto completo por estágio por padrão (um ícone de produção limpo, mais variantes de staging/dev com selo), para que o agente configure ícones por ambiente na mesma chamada.
Conversando com a skill
"Add a fox favicon to this app."
"Generate app icons for this site from our logo at public/logo.svg."
"Give this project a proper favicon using the React logo."
"Make me a favicon from https://example.com/mark.png."Quatro prompts que resolvem, todos, para um conjunto de ícones completo e instalado.
Adicionando o servidor MCP
// .mcp.json
{
"mcpServers": {
"favicontools": {
"type": "http",
"url": "https://favicontools.com/api/mcp"
}
}
}Uma entrada, e o agente tem as duas ferramentas. O padrão por estágio faz os ícones por ambiente voltarem na mesma chamada.
Você descreve em português simples
Você nunca escolhe formatos ou tamanhos de ícone. Você diz o que quer; o agente mapeia isso para uma fonte.
| O que você diz | O que o agente usa |
|---|---|
| Um emoji ou uma vibe | Um nome do Iconify como noto:fox ou twemoji:rocket |
| Uma marca / produto | simple-icons:stripe, logos:github-icon |
| Seu próprio logo | O caminho do arquivo, por exemplo ./public/logo.svg |
| A URL de uma imagem | A URL, rasterizada no servidor |
Como é o "pronto"
| O que chega | Detalhe |
|---|---|
| Arquivos de ícone | Todos em public/ (ou app/ no Next.js). |
| Tags de head | Um bloco <head> completo, ou metadados de layout, referenciando-os. |
| manifest.json | Com o nome real do seu app e a start_url. |
| favicon.ico antigo | Removido, para que o cache não sirva o placeholder. |