Gerador de favicons
Crie o ícone do seu site a partir de um logo, letras ou emoji e baixe o conjunto completo: favicon.ico, ícones para iPhone e Android, manifesto e código para colar.
Na aba do navegador
Todos os tamanhos
Arquivos
Código para <head>
Coloque os arquivos na raiz do site, junto da página inicial, e cole este código dentro da tag head em todas as páginas.
Um favicon em poucos minutos
- 1Escolha a baseletras, emoji ou sua própria imagem
- 2Ajuste o visualcores, fonte, cantos e tamanho
- 3Baixe o conjuntoZIP com ícones, manifesto e código
Texto, emoji ou imagem
Letras sobre fundo colorido são a opção mais comum: a primeira letra do nome é legível até em 16 px. Emoji é um jeito rápido de ter um ícone chamativo sem designer. O logo deve ser quadrado e sem detalhes pequenos: em 16 px tudo o que é pequeno se mistura.
Confira o tamanho pequeno
Veja a prévia da aba no tema claro e no escuro. Se o símbolo some na aba escura, adicione um fundo ou escolha uma cor mais viva. Margem em volta da imagem ajuda quando o logo encosta nas bordas.
O que fazer com os arquivos
Coloque todos os arquivos do ZIP na raiz do site, junto da página inicial, e cole o código na seção head. No WordPress, Tilda e outros construtores de sites, normalmente basta enviar o favicon.ico ou um PNG de 512 px nas configurações do site.
Perguntas frequentes
Não encontrou a resposta? Fale com a gente que ajudamos.
Aqui você cria seu próprio ícone do zero. O "Favicon do site" faz o contrário: a partir de um link, encontra e baixa os ícones que outro site já usa.
No mínimo, favicon.ico na raiz do site: todos os navegadores procuram por ele. Um PNG de 32 px dá um ícone nítido na aba, apple-touch-icon.png de 180 px dá o ícone na tela do iPhone, e site.webmanifest com ícones de 192 e 512 px é necessário para Android e PWA.
Três imagens: 16, 32 e 48 px em formato PNG. O navegador e o Windows escolhem sozinhos o tamanho certo.
O iOS arredonda sozinho os cantos do ícone na "Tela de Início" e preenche as áreas transparentes com preto. Por isso salvamos o apple-touch-icon quadrado e com fundo: branco, se você escolheu transparente.
Sim. O emoji é desenhado com a fonte do seu sistema: no iPhone no estilo Apple, no Windows no estilo Microsoft, no Android no estilo Google. O arquivo fica com a aparência que você vê na prévia.
Descompacte o ZIP na raiz do site e cole o código do bloco "Código para <head>" dentro da tag head. Se o ícone não mudar, recarregue a página sem cache: os navegadores lembram do favicon antigo por muito tempo.
Experimente também
Também grátis e sem cadastro