Seu app novo parece inacabado sem um favicon
Você entregou a funcionalidade, ligou o banco de dados, fez deploy em uma URL de verdade, e a aba do navegador ainda mostra uma folha de papel em branco. É um quadradinho de 16×16, e ele diz baixinho a cada visitante que o produto não está pronto.
Por que isso sempre acontece
Favicons são o último 1% que ninguém agenda. Fazer o scaffold de um projeto te dá um ícone placeholder de graça, então o alerta nunca dispara, e o placeholder segue direto até a produção.
Montar um conjunto adequado à mão é genuinamente chato: exportar uma dúzia de tamanhos, gerar um ICO, escrever um manifest à mão, colar vinte tags link. Então isso é adiado para "depois", e o depois nunca chega.
Por que uma aba em branco te custa caro
O ícone da aba é sua marca no menor tamanho possível. Quando alguém está com 30 abas abertas, o favicon é o único jeito de reencontrar a sua. Um em branco é invisível.
É também o sinal de credibilidade mais barato que existe. Um ícone nítido soa como "um produto de verdade"; um em branco soa como "um protótipo de fim de semana", mesmo quando o código por baixo é excelente.
O quadrado que todo mundo realmente vê
Os sinais de um ícone faltando
Se qualquer um destes for verdade no seu site no ar, os visitantes estão vendo um app inacabado:
Um ícone de página-com-a-ponta-dobrada em branco parado na aba do navegador.
O padrão do framework (o logo do Next.js, do Vite ou do Create React App) indo para produção.
Um screenshot pixelado e esticado que alguém jogou em public/favicon.ico só para o alerta sumir.
Ícones que não batem: uma coisa na aba, outra na tela inicial do iOS, nada no prompt de instalação do PWA.
Resolva em um passo
O problema inteiro desaparece no momento em que você para de tratar ícones como uma tarefa manual. O fluxo é curto:
- 1
Escolha uma fonte
Um emoji, uma marca, o arquivo do seu logo ou a URL de uma imagem.
- 2
Gere o conjunto completo
favicon.ico, todos os tamanhos de PNG, apple-touch-icon, ícones Android e manifest.json.
- 3
Instale
Coloque os arquivos em public/ e as tags link no seu <head> (ou em app/layout.tsx).
- 4
Verifique
Confira que ele renderiza na aba, no mobile e no prompt de instalação antes de dar por pronto.
À mão, ou pelo agente
À mão
O motivo pelo qual isso é adiado
- Exportar uma dúzia de tamanhos.
- Gerar um ICO.
- Escrever um manifest à mão.
- Colar vinte tags link.
Deixe seu agente de código fazer
Start hereClaude Code, Cursor ou qualquer agente que suporte MCP
- Você nunca abre um gerador de favicon.
- Os ícones são criados e instalados direto no repositório: arquivos gravados, <head> ajustado.
- Tudo a partir de um único prompt como "adicione um favicon de raposa a este app".