Como usar: Gerador de favicons
- Escolha “Texto/emoji” e digite uma letra ou escolha um emoji, ou mude para “Imagem” e arraste seu logotipo (SVG ou um PNG quadrado com 512 px ou mais funciona melhor).
- Ajuste as cores, o tamanho do texto, o espaçamento e o arredondamento dos cantos enquanto vê a pré-visualização na aba do navegador no tamanho real de 16 px.
- Digite o nome do seu site e a cor do tema para o manifesto da web.
- Clique em “Baixar tudo (ZIP)”, envie os arquivos para a pasta raiz do seu site e cole o trecho de HTML em
<head>. No Webflow, envie o favicon de 32×32 e o webclip de 256×256 nas “Configurações do site”.
O que é um favicon?
Um favicon é aquele ícone pequeno que os navegadores mostram nas abas, nos favoritos e no histórico, e que o Google exibe ao lado do nome do seu site nos resultados de busca no celular e no computador. Os celulares também usam versões maiores quando alguém adiciona seu site à tela inicial. Hoje em dia, um conjunto completo é bem pequeno: um arquivo ICO para solicitações legadas e padrão /favicon.ico , um PNG para navegadores modernos, um ícone de toque da Apple, dois ícones para Android/PWA referenciados a partir de um manifesto de aplicativo web — e, opcionalmente, um SVG.
O que esse gerador cria
| Arquivo | Tamanho | Usado por |
|---|---|---|
favicon.ico | 16, 32, 48 px em um único arquivo | Todos os navegadores, atalhos do Windows, ferramentas que solicitam /favicon.ico diretamente |
favicon-32x32.png | 32 × 32 | abas de navegadores modernos; o tamanho que o Webflow pede |
apple-touch-icon.png | 180 × 180 | Tela inicial do iPhone/iPad e Safari |
android-chrome-192x192.png, -512x512.png | 192, 512 | Tela inicial do Android, instalação do PWA e tela de boas-vindas |
webclip-256x256.png | 256 × 256 | Configuração do Webclip do Webflow |
site.webmanifest | JSON | Nome, cores e lista de ícones para sites instaláveis |
O arquivo ICO é montado diretamente no seu navegador: um pequeno cabeçalho ICO e um diretório, seguidos por três imagens compactadas em PNG, um formato que todos os navegadores atuais e versões do Windows reconhecem. Nada é enviado.
Melhores práticas para favicons
- Projete para 16 px. Detalhes finos e palavras longas desaparecem nesse tamanho. Uma única letra em negrito, um símbolo simples ou um emoji ficam muito melhores do que um logotipo completo com slogan.
- Os ícones de toque da Apple precisam ser opacos. O iOS arredonda os cantos automaticamente e preenche os pixels transparentes com preto, então essa ferramenta sempre exporta o ícone de 180 px (e o webclip do Webflow) como um quadrado completo com fundo sólido.
- Verifica o modo escuro. Um logotipo escuro em fundo transparente some em uma aba escura do navegador — a pré-visualização mostra os dois temas. Adiciona uma cor de fundo ou preenchimento, se precisar.
- A Pesquisa do Google exige um favicon quadrado que possa ser rastreado e recomenda algo maior que 48×48 px; por isso, o snippet também inclui o link para o PNG de 192 px. As alterações podem levar dias para aparecer nos resultados de pesquisa.
- Cache: os navegadores armazenam favicons no cache de forma agressiva. Se você substituir um, teste em uma janela anônima ou adicione uma consulta de versão, como
/favicon.ico?v=2.
Adicionando um favicon no Webflow
Abra Configurações do site → Geral e role até Favicon e Webclip. Envie uma imagem de 32×32 px como favicon e uma de 256×256 px como webclip (usado como ícone de toque da Apple), salve e publique o site. O Webflow gera as <link> automaticamente, então você não precisa do trecho de HTML nem do manifesto, a menos que os adicione por meio de código personalizado. Para conferir o que está no ar depois, o Verificador de Metatags mostra as tags do favicon e do ícone de toque da Apple.
Também pesquisado como: favicon, favicon.ico, conversor de ico, png para ico, ícone da apple no touch, site.webmanifest, favicon de emoji, webclip.
Ferramentas que combinam com: Gerador de favicons
- PWA Manifest Generator — Make any website an installable PWA.
- Redimensionador de imagens — Redimensione uma foto para dimensões exatas em pixels ou uma porcentagem, recorte-a para se ajustar ao tamanho de uma rede social ou encaixe-a dentro de uma moldura com uma cor de fundo — tudo isso diretamente no seu navegador.
- Gerador de imagens OG — Crie uma imagem de pré-visualização de link bem feita para o Facebook, LinkedIn, X, Slack e WhatsApp em segundos — escolha um modelo, digite o título, adicione um logotipo e, em seguida, baixe o arquivo PNG e as metatags correspondentes.
- Meta Tag Generator — Fill in one form and get a complete, valid <head> — title, description, canonical, robots, Open Graph, X/Twitter cards, theme color and icons — with live previews and Webflow-specific output.
Perguntas frequentes
Qual deve ser o tamanho de um favicon?
favicon.ico, um PNG de 32×32, um ícone de toque da Apple de 180×180 e PNGs de 192×192 e 512×512 para o Android. Esse gerador cria todos eles a partir de uma única fonte.Ainda preciso de um arquivo favicon.ico?
/favicon.ico da raiz do site, mesmo sem uma <link> tag, então deixar uma lá evita erros 404 e ícones que não aparecem.Quais são os tamanhos de favicon que o Webflow precisa?
favicon-32x32.png e webclip-256x256.png do arquivo ZIP.Posso usar um emoji como favicon?
Por que meu novo favicon não tá aparecendo?
?v=2) aos URLs dos ícones. A Pesquisa do Google pode levar dias ou semanas para rastreá-lo novamente.