Gerador de favicon
Crie todos os tamanhos de favicon a partir de uma única imagem.
Solte seu logo aqui ou clique para escolher
PNG, SVG, JPG, WebP ou ICO. Um logo quadrado de 512 × 512 px ou mais funciona melhor. Os arquivos são processados no navegador e nunca enviados. Elas ficam neste navegador até você removê-las.
Ctrl+OescolherCtrl+Vcolar
Um favicon é o pequeno ícone que os navegadores mostram nas abas e nos favoritos; os celulares usam versões maiores quando alguém adiciona o seu site à tela inicial. Solte um logo e este gerador cria todos os arquivos de que um site precisa — favicon.ico, favicons PNG, o ícone Apple touch, ícones Android e um manifesto web — com prévias ao vivo e o HTML para colar na sua página. Tudo roda no seu navegador, então o seu logo nunca sai do seu dispositivo; é grátis e não exige cadastro.
Como criar um favicon
- Solte o seu logo (PNG, SVG, JPG ou WebP) em qualquer lugar da página, cole-o com Ctrl+V ou clique para escolhê-lo. Uma imagem que você adicionou em outra ferramenta de imagem já está na lista, do jeito que você a deixou lá: clique na miniatura dela para usá-la. O logo de exemplo permite testar sem arquivo.
- O logo é enquadrado para você: o símbolo de um logo largo, ou o logo sem as bordas vazias. Arraste o quadrado sobre o logo para mudar o enquadramento ou escolha Logo inteiro. Escolha um fundo (as cores do seu logo vêm primeiro), a margem e o formato; as prévias são atualizadas enquanto você ajusta.
- Clique em Baixar tudo (ZIP), coloque os arquivos na pasta raiz do seu site, depois clique em Copiar HTML e cole as tags no <head> da sua página.
Recursos
- favicon.ico com ícones de 16, 32 e 48 px, além de favicons PNG de 16 e 32 px
- apple-touch-icon.png (180 px) e ícones Android Chrome (192 e 512 px)
- site.webmanifest com o nome do app e a cor do tema, e as tags HTML para o seu <head>
- Encontra sozinho o símbolo de um logo largo; arraste o quadrado para usar outra parte ou encaixe o logo inteiro
- Fundo: transparente, as cores do próprio logo ou qualquer cor; margem de 0 a 30%; formato quadrado, arredondado ou circular
- Prévias ao vivo de todos os tamanhos, de uma aba do navegador e de uma tela inicial, nos temas claro e escuro
- Parte de PNG, SVG, JPG, WebP ou ICO; todos os arquivos em um único ZIP
É privado?
Sim. Os ícones são criados no seu navegador por um mecanismo de imagem em WebAssembly; o seu logo e os arquivos nunca saem do seu dispositivo. O logo fica neste navegador até você removê-lo da lista.
Perguntas frequentes
De quais tamanhos de favicon eu preciso?
Quatro arquivos cobrem quase tudo: favicon.ico com 16, 32 e 48 px para abas do navegador, favoritos e atalhos do Windows; um apple-touch-icon.png de 180 px para a tela inicial do iPhone e do iPad; e PNGs de 192 e 512 px, listados no site.webmanifest, para Android e web apps instaláveis. O ZIP traz todos eles, além de PNGs de 16 e 32 px para navegadores que preferem PNG.
Como adicionar o favicon ao meu HTML?
Coloque os arquivos na pasta raiz do seu site, de modo que /favicon.ico abra, depois clique em Copiar HTML e cole as tags no <head> de todas as páginas. Os navegadores procuram /favicon.ico mesmo sem nenhuma tag; as tags acrescentam os tamanhos PNG, o ícone da Apple e o manifesto.
Por que o apple-touch-icon.png tem fundo?
Porque iPhones e iPads mostram pixels transparentes como preto e arredondam os cantos por conta própria, então o ícone da Apple é sempre um quadrado cheio e opaco: com a sua cor de fundo, ou branco quando o fundo é transparente. Os outros ícones mantêm a transparência e o formato.
Posso usar um logo em SVG?
Sim. O navegador desenha o SVG no tamanho dele, ou em 1024 px quando ele é menor, e todos os ícones são criados a partir disso. Um SVG que aponta para outros arquivos (imagens, fontes ou folhas de estilo) não pode ser desenhado por completo como imagem, então a ferramenta avisa em vez de criar ícones incompletos; antes, exporte-o como PNG ou incorpore as imagens dele.
Troquei o favicon, mas o navegador ainda mostra o antigo. Por quê?
Os navegadores guardam favicons em cache por muito tempo. Recarregue a página com Ctrl+F5 (Cmd+Shift+R no Mac) ou abra o site em uma janela anônima para ver o novo ícone.