Sobre: Gerador de favicon
Um favicon é o pequeno ícone que os navegadores mostram na aba, nos favoritos e quando um site é adicionado à tela inicial de um celular. O Gerador de favicon cria o conjunto completo de arquivos de que um site precisa a partir de uma imagem, de uma ou duas letras ou de um emoji.
Você recebe o favicon.ico, ícones PNG para navegadores, iPhone e Android, um web manifest e as linhas HTML para colar nas suas páginas. Os ícones são desenhados no seu navegador; nada é enviado.
Como usar
- Escolha a partir do que o ícone será criado: Imagem, Texto ou Emoji.
- Para uma imagem, escolha um arquivo e ajuste o espaçamento e o fundo. Para texto, digite um ou dois caracteres e escolha a fonte, as cores e a forma. Para um emoji, digite ou cole um emoji.
- Confira a pré-visualização em 16, 32 e 180 pixels, sobre fundos claros e escuros.
- Clique em “Baixar favicon.zip”, envie os arquivos para a pasta raiz do seu site e cole o código HTML no <head> das suas páginas.
Recursos
- Três formas de começar: Use um logotipo ou uma foto (inclusive SVG), uma ou duas letras em qualquer idioma, ou um emoji.
- Todos os tamanhos em um ZIP: favicon.ico com ícones de 16, 32 e 48 px, ícones PNG de 16, 32, 180, 192 e 512 px e site.webmanifest.
- Nítido em tamanhos pequenos: Um ícone mestre grande é reduzido em etapas, o que mantém as bordas suaves mesmo em 16 px.
- Pronto para iPhone: O Apple touch icon recebe um fundo sólido, porque o iOS mostra as partes transparentes em preto.
- Privado: Os ícones são desenhados no seu dispositivo. Nada é enviado nem armazenado.
Exemplos
Um ícone rápido para um site novo
Digite a primeira letra do nome do site, escolha a cor da sua marca e a opção Arredondado e baixe o ZIP.
Transformar um logotipo em favicon
Escolha o logotipo em SVG ou PNG e adicione um pouco de espaçamento e uma cor de fundo para que ele continue visível em abas escuras do navegador.
Limitações e observações
- Os emojis têm aparência diferente em dispositivos Apple, Google e Windows. O ícone usa o emoji do dispositivo em que você o cria.
- O texto usa as fontes instaladas no seu dispositivo (a fonte sem serifa do sistema, Georgia ou a fonte monoespaçada do sistema).
- Não é criado um favicon em SVG; os arquivos são PNG e ICO, que todos os navegadores aceitam.
- Os arquivos só funcionam depois que você os envia para a pasta raiz do seu site, junto da página inicial.
Perguntas frequentes
Minha imagem é enviada?
Não. A imagem é aberta, e os ícones são desenhados e compactados no ZIP por JavaScript no seu navegador.
De quais arquivos eu realmente preciso?
Só o favicon.ico já cobre a aba do navegador em todos os navegadores. Os arquivos PNG, o Apple touch icon e o site.webmanifest acrescentam ícones mais nítidos para telas de alta resolução, para a tela inicial do iPhone e para o Android.
Onde coloco os arquivos?
Na pasta raiz do site, para que o ícone fique acessível em /favicon.ico. Depois, adicione as linhas HTML ao <head> de cada página.
Por que o meu novo favicon não aparece?
Os navegadores guardam favicons em cache por muito tempo. Recarregue a página limpando o cache ou abra-a em uma janela anônima para ver o novo ícone.