Favicon no Webflow: como adicionar favicon e webclip

Adicione favicon e webclip no Webflow: onde fica a configuração de ícones, os tamanhos gerados, como publicar e o que fazer quando não atualiza.

Perguntas frequentes

Qual deve ser o tamanho do favicon no Webflow?

A central de ajuda do Webflow indica um favicon de 32x32 e um webclip de 256x256. No fluxo atual, você envia uma única imagem quadrada e o Webflow gera os outros tamanhos. Então comece com um arquivo quadrado de pelo menos 256x256 pixels que continue legível quando reduzido.

Onde faço o upload do favicon no Webflow?

Abra Site settings (Configurações do site), vá em General (Geral) e encontre a seção Icons (Ícones). Envie sua imagem quadrada, escolha quais ícones atualizar, aplique a alteração e publique o site. Tutoriais mais antigos chamam isso de Project settings, mas é o mesmo lugar.

O que é um webclip no Webflow?

O webclip é o ícone maior usado quando alguém salva seu site na tela inicial do celular ou em um atalho parecido. O Webflow indica 256x256 pixels. Ele é separado do ícone pequeno exibido na aba do navegador.

Por que meu favicon do Webflow não aparece depois do upload?

A causa mais comum é não ter publicado o site depois do upload, já que os ícones só mudam no site publicado. A segunda é o cache do navegador. Publique e confira em uma janela anônima ou em outro navegador antes de concluir que o upload falhou.

O Webflow aceita favicon em SVG ou para modo escuro?

As notas de atualização do Webflow dizem que você pode enviar PNG, JPG, GIF, ICO ou SVG, e o artigo da central de ajuda menciona um ícone opcional para o modo escuro na aba do navegador. O Webflow também converte uploads em SVG para PNG por compatibilidade entre navegadores, então teste o resultado nos navegadores que importam para você.

Quanto tempo o Google leva para mostrar o novo favicon do meu site no Webflow?

Não há prazo fixo. O Google decide quando rastrear de novo e atualizar o ícone nos resultados de busca, e relatos da comunidade falam em dias, semanas ou mais. O que você controla é garantir que o ícone esteja no ar no site publicado.

Resposta rápida: no Webflow, abra Site settings > General > Icons (Configurações do site > Geral > Ícones), envie uma imagem quadrada, escolha quais ícones atualizar (favicon claro, favicon opcional para modo escuro, webclip), aplique a alteração e publique o site. O Webflow indica um favicon de 32x32 e um webclip de 256x256, e gera os demais tamanhos a partir do seu upload. Nada muda no site no ar até você publicar. (Verificado em novembro de 2026 na central de ajuda e nas notas de atualização do Webflow.)

O que o Webflow pede

Tutoriais antigos descrevem dois campos de upload separados, um para o favicon de 32x32 e outro para o webclip de 256x256. O artigo atual da central de ajuda do Webflow descreve um fluxo mais simples: você envia uma única imagem quadrada e o Webflow cuida dos tamanhos. Veja para que serve cada ícone.

Ícone	Tamanho indicado pelo Webflow	Onde aparece
Favicon (claro)	32x32	Abas do navegador e favoritos
Favicon (modo escuro, opcional)	32x32	Abas do navegador quando ele está no modo escuro
Webclip	256x256	Atalhos na tela inicial e links salvos semelhantes
Extras gerados automaticamente	Favicon 48x48, ícones de toque 180x180 e 192x192	Gerados pelo Webflow a partir do seu upload

Formatos de upload aceitos, segundo as notas de atualização do Webflow: PNG, JPG, GIF, ICO e SVG. Uploads em SVG são convertidos para PNG por compatibilidade entre navegadores.

Para ver os tamanhos em outras plataformas com mais detalhe, consulte nosso guia de tamanhos de favicon.

Prepare a imagem antes

Um favicon aparece com cerca de 16 a 32 pixels de largura na aba, então a imagem de origem importa mais do que as configurações.

Comece com uma imagem quadrada. Exporte um canvas quadrado de 256x256 ou maior, para o webclip não ser ampliado.
Simplifique. Use um símbolo da marca ou uma única letra, não o logotipo completo com o nome. Detalhes finos viram uma mancha no tamanho de aba.
Cuide do fundo. Um PNG transparente fica bom em abas claras e pode sumir em abas escuras. Se você usar um favicon para modo escuro, crie uma versão com o símbolo em cor clara.
Use um nome de arquivo neutro. Os nomes dos arquivos enviados podem aparecer no HTML publicado, então evite algo como "final_v3_REAL.png".

Como adicionar favicon e webclip no Webflow

Abra seu projeto no Webflow Designer ou no painel e vá em Site settings (Configurações do site).
Selecione a aba General (Geral) e role até Icons (Ícones).
Clique em Upload icon (Enviar ícone) e escolha sua imagem quadrada.
Escolha quais ícones a imagem deve atualizar: o favicon, o favicon opcional para modo escuro e o webclip.
Se quiser um ícone diferente para o modo escuro, adicione-o no campo correspondente. Esta etapa é opcional.
Clique em Apply (Aplicar). Os textos da interface podem mudar um pouco conforme o Webflow atualiza, então siga os rótulos que aparecerem para você.
Publique o site nos seus domínios. Apenas salvar não envia os ícones para o site no ar.
Abra o site no ar em uma janela anônima e confira a aba.

Checklist para copiar

`` [ ] Imagem de origem quadrada, 256x256 ou maior [ ] O símbolo é simples o bastante para ser lido no tamanho de aba [ ] Testado em tema claro e escuro do navegador [ ] Enviado em Site settings > General > Icons [ ] Alteração aplicada (Apply) [ ] Publicado no domínio no ar (não só no domínio de teste webflow.io) [ ] Conferido em uma janela anônima [ ] Atualização forçada ou cache limpo se o ícone antigo continuar aparecendo ``

Solução de problemas

O favicon ainda mostra o ícone antigo ou o logotipo do Webflow

Siga estes passos, na ordem:

Publique de novo. Os ícones só vão ao ar com uma publicação. Se você publica em vários domínios, inclua todos eles.
Teste em uma janela anônima. Os navegadores guardam favicons em cache de forma agressiva, e uma aba normal pode mostrar o ícone antigo por muito tempo.
Atualize a página forçando o recarregamento, ou feche e abra o navegador de novo.
Abra o arquivo diretamente. Confira se a URL do ícone no código-fonte da página carrega em uma aba própria.

O upload é recusado ou a imagem fica distorcida

Alguns tópicos da comunidade relatam erros de tamanho em fluxos antigos que exigiam dimensões exatas. Se isso acontecer, use uma imagem quadrada e tente de novo. Se o problema continuar, tente outro navegador ou uma janela anônima. Essa orientação vem de relatos em fóruns, não da documentação do Webflow, então trate-a como um paliativo.

Os resultados de busca do Google mostram o ícone errado

O ícone nos resultados de busca é controlado pelo Google, não pelo Webflow. Tópicos da comunidade falam em atualizações que levam dias, semanas ou mais. Confirme que o ícone carrega no seu site no ar e aguarde. Manter um ícone quadrado e estável, sempre na mesma URL, ajuda.

O ícone fica borrado nas abas

Isso geralmente significa que a imagem de origem tem detalhes demais ou já tinha baixa resolução. Redesenhe um símbolo mais simples em tamanho maior e envie de novo.

Qual formato enviar?

Formato	Bom para	Atenção
PNG	A maioria dos sites; confiável e com suporte a transparência	Precisa de resolução suficiente para o webclip
SVG	Arte vetorial limpa	O Webflow converte para PNG, então veja a prévia do resultado
ICO	Fluxos legados	Costuma ser desnecessário quando o Webflow gera os tamanhos para você
JPG	Raramente é uma boa escolha	Não tem transparência e deixa uma caixa de fundo

Na dúvida, um PNG quadrado de 256x256 ou maior é a escolha mais segura.

Onde isso entra na preparação do lançamento

O favicon é uma parte pequena da lista de lançamento, ao lado de títulos, descrições e imagens para redes sociais. Se você está comparando plataformas antes de decidir, nossas páginas de comparação com o Webflow e de alternativas ao Webflow mostram os prós e contras, e o guia geral para trocar o favicon serve se você gerencia sites em mais de uma plataforma.

Se preferir começar a partir de um layout pronto, o plano gratuito da We.Inc permite publicar até três sites a partir de templates prontos. O construtor com IA, que cria um site a partir de um prompt, começa no plano Starter, por $20 por mês. Você pode criar sua conta aqui.

Comece grátis · Sem cartão de crédito

Umair Ali Sadaqat

Fundador da We.Inc

Umair é o fundador da We.Inc. Ele escreve sobre criação de sites com IA, agências e o negócio de administrar um estúdio web.

Pronto para criar algo incrível?

Junte-se a 15,000+ empresas que usam o We.Inc para lançar, crescer e automatizar, tudo em uma plataforma.