Como usar
- 1.Solte seu logo na página, cole-o ou clique em “Escolher uma imagem”. Um PNG ou SVG quadrado de pelo menos 512 × 512 pixels dá o melhor resultado.
- 2.Ajuste a margem interna e escolha uma cor de fundo e cantos arredondados, se o seu logo precisar de uma forma sólida por trás.
- 3.Confira a prévia: as abas do navegador mostram como o ícone fica com 16 pixels nos temas claro e escuro.
- 4.Clique em “Baixar favicon.zip”, envie os arquivos para a pasta raiz do seu site e cole o HTML na seção head das suas páginas.
Quais arquivos de favicon um site precisa
Um conjunto pequeno atende a todos os navegadores e dispositivos de hoje. O favicon.ico é o arquivo clássico que navegadores, leitores de feed e outras ferramentas buscam em /favicon.ico mesmo quando a página não o menciona; ele contém versões de 16, 32 e 48 pixels. Os navegadores modernos preferem um ícone SVG (icon.svg), que fica nítido em qualquer tamanho e pode até mudar de cor no modo escuro com uma media query prefers-color-scheme dentro do SVG.
O apple-touch-icon.png (180 × 180) é o que o iPhone e o iPad usam quando alguém adiciona seu site à tela inicial. O Android e os web apps instalados usam os PNGs de 192 e 512 pixels listados no site.webmanifest. Guias antigos listam dezenas de tamanhos; os navegadores redimensionam esses poucos arquivos para todo o resto.
Onde colocar os arquivos
Envie os arquivos para a pasta raiz do site, para que carreguem a partir de endereços como https://example.com/favicon.ico, e adicione as linhas de HTML ao <head> de todas as páginas. Troque o nome no site.webmanifest pelo nome do seu site.
Os frameworks costumam ter um jeito próprio. No App Router do Next.js, coloque favicon.ico, icon.svg (ou icon.png) e apple-icon.png na pasta app e as tags são adicionadas automaticamente. No WordPress, envie uma imagem quadrada em Aparência → Personalizar → Identidade do site → Ícone do site. Construtores hospedados como Shopify, Wix e Squarespace têm um campo de favicon nas configurações do site.
Como criar um ícone que funcione com 16 pixels
A aba do navegador mostra seu ícone com 16 × 16 pixels (32 em telas de alta resolução). Textos pequenos, linhas finas e logos cheios de detalhes viram um borrão nesse tamanho. Use um símbolo simples, a primeira letra do seu nome ou uma parte marcante do seu logo, com contraste forte.
Confira as duas prévias de abas: um logo escuro sobre fundo transparente pode sumir em um tema escuro do navegador. Se isso acontecer, dê uma cor de fundo ao ícone ou acrescente um contorno claro ao logo.
Perguntas frequentes
Meu logo é enviado para algum lugar?
Não. Os ícones são desenhados e empacotados no arquivo ZIP pelo seu navegador, no seu dispositivo. Nada é enviado ao nestoo nem a ninguém.
Qual deve ser o tamanho de um favicon?
As abas do navegador usam 16 × 16 e 32 × 32 pixels, que é o que o favicon.ico contém (mais 48 × 48 para atalhos do Windows). Celulares e web apps precisam de ícones maiores: 180 × 180 para o Apple touch icon, e 192 × 192 e 512 × 512 para o Android. Comece com uma imagem de pelo menos 512 × 512 pixels, ou com um SVG.
Por que meu novo favicon não aparece?
Os navegadores guardam favicons em cache por muito tempo, às vezes mesmo depois de um recarregamento forçado. Abra o arquivo do ícone diretamente (/favicon.ico) e recarregue, tente uma janela anônima, ou acrescente uma versão aos links no seu HTML, como href="/favicon.ico?v=2", para que os navegadores busquem o arquivo novo.
Devo usar ICO ou PNG?
Os dois. Mantenha o favicon.ico na pasta raiz, porque alguns navegadores e ferramentas só procuram esse arquivo. Os navegadores modernos usam os ícones PNG ou SVG indicados no seu HTML. O arquivo ICO gerado aqui guarda imagens PNG por dentro, o que o mantém pequeno.
Posso criar um favicon a partir de um emoji ou de um texto?
Não diretamente nesta ferramenta, mas é fácil com SVG: salve <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text y=".9em" font-size="90">🦊</text></svg> como icon.svg e solte o arquivo aqui. Os emojis têm aparência diferente em cada sistema operacional, então os arquivos PNG e ICO gerados mostram o emoji do jeito que o seu computador o desenha.