Gerador de favicon

O que vem no favicons.zip

Envie uma imagem e o gerador cria, no seu navegador, todos os arquivos que um site atual precisa:

Arquivo	Tamanho	Usado por
favicon.ico	16, 32 e 48 px num só arquivo	Abas, favoritos, Windows e qualquer ferramenta que procure /favicon.ico
favicon-16x16.png	16×16	Abas em telas comuns
favicon-32x32.png	32×32	Abas em telas de alta densidade, atalhos
favicon-48x48.png	48×48	Resultados do Google, atalhos na área de trabalho
apple-touch-icon.png	180×180	"Adicionar à Tela de Início" no iPhone e iPad
android-chrome-192x192.png	192×192	Tela inicial do Android
android-chrome-512x512.png	512×512	Sites instalados como app (PWA) e tela de abertura
site.webmanifest	—	Diz ao Android/Chrome onde estão os dois ícones grandes
README-favicon.html	—	As tags HTML para colar

Qual imagem de origem funciona melhor

• Quadrada, simples e forte. Em 16 px você tem 256 pixels no total. Um logo completo com slogan vira um borrão; uma letra ou símbolo continua legível. Muitas marcas usam uma versão simplificada só para o favicon.
• Pelo menos 512×512. O maior ícone tem 512 px, então uma imagem menor será ampliada e ficará suave demais. Um logo em SVG é o ideal — ele é renderizado em alta resolução antes de ser reduzido.
• PNG transparente ou SVG. A transparência é mantida no .ico e nos PNGs pequenos, então o ícone fica bom em temas claros e escuros do navegador.
• Não é quadrada? A imagem é encaixada no quadrado sem cortes, com espaço transparente nas laterais. Se preferir preencher o quadrado, recorte antes ou faça uma versão redonda com Recorte circular.

O fundo do ícone Apple touch

O iOS não aceita transparência em ícones da tela de início — áreas transparentes ficam pretas. Por isso o apple-touch-icon.png de 180×180 sempre recebe um fundo sólido. Ele é branco por padrão; use o campo de cor ao lado da área de upload para colocar a cor da sua marca (o seletor de cores consegue tirá-la do seu logo). Os outros tamanhos continuam transparentes.

Onde colocar os arquivos

1. Descompacte e envie todos os arquivos para a raiz do site, de forma que https://seusite.com/favicon.ico abra o ícone.
2. Cole as tags do README-favicon.html no <head> de todas as páginas (ou no template de cabeçalho do tema):

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

3. Se o site fica numa subpasta, ajuste os caminhos.

No WordPress, Aparência → Personalizar → Identidade do site → Ícone do site faz isso com uma única imagem de 512×512 — use android-chrome-512x512.png. Shopify, Wix e Squarespace têm um campo de "favicon" parecido.

O site.webmanifest incluído só lista os ícones. Se quiser que visitantes instalem o site como app, acrescente name, short_name, theme_color, background_color e "display": "standalone".

"Troquei o favicon, mas continua aparecendo o antigo"

Navegadores guardam favicons em cache com mais teimosia do que quase tudo num site.

• Abra https://seusite.com/favicon.ico diretamente e force a atualização (Ctrl + F5, ou Cmd + Shift + R no Mac).
• Adicione uma versão aos links, por exemplo href="/favicon.ico?v=2", para o navegador tratar como arquivo novo.
• Limpe o cache do CDN ou do plugin de cache, se usar.
• Favoritos e atalhos na tela inicial mantêm o ícone antigo até serem recriados.
• O Google só atualiza o ícone nos resultados depois de rastrear de novo a sua página inicial, o que pode levar dias ou semanas. O Google pede um ícone quadrado com lado múltiplo de 48 px — o PNG de 48×48 e o .ico atendem.

Ferramentas relacionadas

• Tire o fundo de uma foto antes de transformá-la em ícone: Remover fundo.
• O logo está em WebP? Converta para PNG se o seu editor não abrir.
• Precisa de uma imagem simples de 512×512 para loja ou perfil? Redimensionar para 512×512.