Imagens · Gerador de favicons

Gerar favicons para um site no Mac

Todos os favicons de que um site precisa, além do web manifest e do HTML para colar na sua página.

Roda no seu Mac

Perguntar à IAChatGPTClaudePerplexityModo IAGrokMarkdown

Baixar o OneMacTools Mais ferramentas de Imagens

Gerador de favicons em um Mac

Gerador de favicons com arquivos de exemplo e suas opções

O que Gerador de favicons gerou a partir dos arquivos de exemplo

Capturas de tela do app, usando arquivos de exemplo.

Como usar Gerador de favicons

1
Arraste seu logo
Use uma imagem, quadrada se possível e com pelo menos 512 px. Imagens não quadradas são recortadas em um quadrado centralizado.
2
Adicione os dados do seu site
Digite o nome do site e a cor do tema para o web manifest e escolha o fundo do Apple touch icon.
3
Clique em Criar favicons
Todos os arquivos de favicon são criados, junto com o manifest e o trecho de HTML.
4
Envie para o seu site
Copie os arquivos da pasta “favicons” (em uma pasta com data em Downloads › OneMacTools) para a raiz do seu site e cole o HTML no <head> da sua página. O trecho também aparece no app.

O que Gerador de favicons faz

A partir de um logo, receba favicon.ico com 16, 32 e 48 px dentro, PNGs de 16 e 32 px, um Apple touch icon de 180 px sobre fundo sólido para não ficar preto em iPhones, e ícones de 192 e 512 px para Android e web apps instaláveis — além de um site.webmanifest com o nome e a cor de tema do seu site e o trecho de HTML para o seu <head>.

Ideal para

Adicionar um favicon a um novo site
Tornar um site instalável em celulares
Substitua um favicon borrado

Opções explicadas

Nome do site: O nome usado no site.webmanifest, exibido quando alguém instala seu site em um celular. Se ficar vazio, é usado o nome do arquivo da imagem. O nome curto são os 12 primeiros caracteres.
Cor do tema: Uma cor hex como #1E90FF, usada como cor do tema do navegador e cor de fundo do manifest. Branco se ficar vazio.
Fundo do Apple touch icon: Branco, Cor do tema ou Preto. iPhones mostram ícones transparentes da tela de início sobre preto, então o Apple touch icon de 180 px recebe um fundo sólido.
Arredondar os cantos: Desativado por padrão. Arredonda os cantos do seu logo em todos os tamanhos de favicon.

Boas práticas

Use um símbolo simples, não o logo completo com palavras. Em 16 px, só formas fortes continuam reconhecíveis.
Comece com um PNG transparente para que o favicon fique bem em abas claras e escuras do navegador.
Digite a cor do tema como valor hex. Ela colore a interface do navegador em alguns celulares, então escolha a cor principal da sua marca.
Depois de enviar, abra seu site em uma janela privada para conferir o novo ícone, já que os navegadores guardam favicons em cache por muito tempo.

Funciona com

Entrada: Uma imagem, de preferência um PNG quadrado de 512 px ou mais.
Saída: Uma pasta “favicons” com favicon.ico (com 16, 32 e 48 px dentro), favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png (180 px), android-chrome-192x192.png e android-chrome-512x512.png, além de site.webmanifest e add-to-head.html.

Imagens não quadradas são recortadas em um quadrado centralizado.

Perguntas sobre o Gerador de favicons

Quais arquivos de favicon um site precisa?

favicon.ico para navegadores antigos, PNGs de 16 e 32 px para abas, um Apple touch icon de 180 px para a tela de início do iPhone e ícones de 192 e 512 px com um web manifest para Android. O OneMacTools cria todos eles e o HTML para colar no <head> da sua página.

Para onde vão os arquivos?

Na pasta raiz do seu site, ao lado do index.html. O trecho de HTML e o manifest esperam que eles estejam lá.

Como criar um favicon.ico no Mac?

Arraste seu logo para Gerador de favicons e clique em Criar favicons. O favicon.ico é criado com versões de 16, 32 e 48 px dentro, além dos tamanhos em PNG.

Por que meu ícone fica preto na tela de início do iPhone?

O iOS mostra as áreas transparentes de um ícone da tela de início em preto. Para evitar isso, o Apple touch icon é colocado sobre um fundo sólido branco, preto ou na cor do tema.

Para que serve o site.webmanifest?

Ele informa aos celulares o nome, os ícones e as cores do seu site quando alguém o adiciona à tela de início ou o instala como web app.

Meu novo favicon não aparece. O que está errado?

Os navegadores guardam favicons em cache de forma agressiva. Confira se os arquivos estão na raiz do site e se o trecho está no <head>, e depois recarregue em uma janela privada.

Gerador de favicons envia meus arquivos?

Não. O Gerador de favicons roda inteiramente no seu Mac, então seus arquivos nunca saem dele e ele funciona offline.

Gerador de favicons altera meus arquivos originais?

Não. Os resultados são salvos como novos arquivos em uma pasta datada em Downloads › OneMacTools, e seus originais ficam exatamente como estavam, a menos que você ative uma opção que diga o contrário.

Do que Gerador de favicons precisa?

Só um Mac com macOS 26 ou posterior. Não há mais nada para instalar.

Faça isto em seguida

Gerador de imagem OG

Crie o cartão de 1200 × 630 que aparece quando seu link é compartilhado no X, LinkedIn, Slack, WhatsApp e iMessage.

Gerador de ícones de app

De uma imagem quadrada para todos os ícones de app: o catálogo de assets iOS para o Xcode, ícones de launcher e adaptáveis do Android e um .icns para Mac.