Favicon para Webflow

O upload do favicon do Webflow faz parte do painel Configurações do projeto, que é separado da tela do Designer. Clique no nome do projeto no painel Webflow e navegue até Configurações do projeto > Geral. Role para baixo até a seção Favicon e ícone do aplicativo, clique na área de upload e escolha seu arquivo de imagem. Webflow aceita os formatos PNG, ICO e GIF.

Um PNG de 32×32 pixels é o tamanho mínimo exigido para o uploader de favicon do Webflow, mas a partir de 512×512 produz um resultado muito mais nítido. Webflow reduz a resolução de sua imagem para a exibição da guia e quaisquer variantes geradas por CDN. Sempre forneça a maior fonte limpa que você tiver – o gerador facilita a criação de um PNG 512×512 a partir de qualquer logotipo.

Webflow hospeda o favicon em seu próprio CDN com uma URL gerada automaticamente (geralmente no formato uploads-ssl.webflow.com/...). Você não precisa fornecer um caminho CDN manualmente. Após o upload, clique em Salvar e depois em Publicar seu projeto. O favicon é injetado na publicação, não apenas ao salvar – as alterações não publicadas não são visíveis no seu domínio ativo.

Fundos transparentes funcionam corretamente com uploads de favicon Webflow. O CDN preserva os canais alfa PNG, de modo que um ícone de fundo transparente é renderizado de forma limpa em relação aos temas do navegador no modo escuro. Se o seu logotipo tiver um fundo sólido branco ou colorido, ele aparecerá como uma caixa quadrada nas guias do navegador. Exporte seu logotipo sem preenchimento de fundo antes de carregá-lo.

O uploader de favicon integrado do Webflow não suporta arquivos SVG. Se você deseja um favicon vetorial SVG para renderização nítida em qualquer escala e suporte ao modo escuro, adicione-o por meio de injeção de código personalizado. Vá para Configurações do projeto > Código personalizado > Código principal e adicione: `<link rel='icon' type='image/svg+xml' href='https://seudominio.com/favicon.svg'>`. Hospede o arquivo SVG em seu próprio servidor ou em um serviço CDN.

Adicionar um apple-touch-icon para instalações na tela inicial de iOS também requer código personalizado em Webflow, uma vez que o uploader integrado lida apenas com o favicon padrão. Carregue seu 180×180 apple-touch-icon.png para um host de arquivo (ou ativos Webflow se seu plano suportar) e injete `<link rel='apple-touch-icon' tamanhos='180x180' href='URL_TO_YOUR_FILE'>` no campo Configurações do projeto > Código personalizado > Código principal.

O suporte ao ícone PWA do Webflow é limitado em comparação com estruturas como Next.js. Não há gerador de manifesto da web nativo em Webflow. Para obter suporte completo à instalação do PWA, crie um arquivo JSON site.webmanifest manualmente, hospede-o externamente e injete a tag do link do manifesto por meio de código personalizado. Inclui entradas 192×192 e 512×512 PNG na matriz de ícones do manifesto.

Se você estiver construindo um site Webflow para um cliente, o favicon geralmente é definido no final do projeto e depois esquecido. Um fluxo de trabalho útil é definir um favicon de espaço reservado no início do projeto e substituí-lo antes da transferência. Webflow não faz versão do histórico de favicon – depois que você salva um novo favicon, o antigo desaparece das configurações do projeto, embora possa permanecer acessível por meio de seu URL CDN por algum tempo.

Sites Webflow com vários domínios — onde o mesmo projeto é publicado em vários domínios personalizados — compartilham um único favicon de Configurações do projeto. Não há substituição de favicon por domínio no Webflow nativo. O mesmo ícone aparece em todos os domínios publicados. Se você precisar de ícones por domínio, use a injeção de código personalizado para substituir condicionalmente a tag do link do ícone (isso requer um CMS Webflow ou uma lógica personalizada).

As atualizações de favicon em Webflow podem levar algum tempo para serem propagadas devido ao cache do CDN. Depois de publicar um novo favicon, o antigo pode aparecer nos navegadores por 24 a 48 horas. Abra seu site ativo em uma janela privada/anônima para ver o ícone atualizado sem interferência do cache do navegador local. Se o seu público usar páginas em cache CDN, o atraso de propagação dependerá das configurações TTL do CDN do Webflow.

Para usuários do Editor Webflow (clientes que editam conteúdo sem acesso ao Designer), o favicon não pode ser alterado através do Editor — ele está bloqueado nas Configurações do Projeto. Somente colaboradores com acesso Designer ou proprietários de contas podem atualizar o favicon. Comunique isso claramente aos clientes para que eles saibam onde solicitar futuras atualizações de favicon.

Depois de publicar seu favicon Webflow, use favicon tester para confirmar se ele é resolvido em seu domínio de produção. Compare o resultado com o tamanho esperado: 32×32 para guias, 180×180 para iOS se você adicionou apple-touch-icon. Revise também o guia best favicon size para entender quais tamanhos melhoram a pontuação de integridade do ícone do seu site.