Como usar
- Escolha Letras e digite um ou dois caracteres com as cores desejadas, ou escolha Imagem e selecione um logo (de preferência quadrado e com pelo menos 512 px).
- Confira as pré-visualizações de todos os tamanhos, especialmente 16 e 32 px, usados nas abas do navegador.
- Baixe o ZIP e envie os arquivos para a raiz do seu site.
- Cole as tags HTML na seção head das suas páginas e, se necessário, ajuste o nome em site.webmanifest.
Como funciona
Navegadores e dispositivos procuram ícones em locais diferentes. O conjunto gerado aqui abrange os casos mais comuns: favicon.ico com imagens de 16, 32 e 48 px para abas do navegador, favoritos e softwares antigos que solicitam /favicon.ico automaticamente; arquivos PNG de 16 e 32 px referenciados por tags link; um apple-touch-icon de 180 × 180 usado quando alguém adiciona seu site à tela inicial de um iPhone ou iPad; e ícones de 192 e 512 px referenciados em site.webmanifest para telas iniciais do Android e aplicativos web instaláveis.
O arquivo favicon.ico armazena os ícones como imagens PNG dentro de um contêiner ICO, que todos os navegadores atuais e o Windows Vista ou posterior conseguem ler. Os arquivos ICO e ZIP são montados pelo código desta página; nada é enviado a um servidor.
Tamanhos pequenos exigem um design simples: em 16 × 16 pixels, linhas finas e textos pequenos desaparecem. Por isso, uma letra em negrito ou uma versão simplificada do logotipo funciona melhor do que um logo completo com texto. A imagem é reduzida em várias etapas de alta qualidade. O apple-touch-icon sempre recebe uma cor de fundo sólida, pois o iOS preenche áreas transparentes com preto e arredonda os cantos por conta própria.
Depois de enviar novos ícones, os navegadores podem continuar exibindo o favicon antigo por um tempo, pois armazenam esse arquivo em cache por bastante tempo. Geralmente, uma atualização forçada da página ou abrir /favicon.ico diretamente resolve.
Exemplos
Ícone com letras para um novo projeto
Digite "TG" em letras brancas sobre um quadrado verde-escuro com cantos arredondados para criar um ícone simples e legível em 16 × 16 px na aba do navegador, sem precisar de um logotipo desenvolvido.
Ícone a partir de um logo existente
Um logo PNG de 1024 × 1024 com fundo transparente, configurado para Ajustar imagem inteira, gera ícones transparentes para abas e um apple-touch-icon com a cor da sua marca como fundo.
Logo horizontal
Em um logotipo horizontal de 1200 × 300, Cortar o centro mantém apenas as letras do meio. Ajustar imagem inteira mantém tudo, mas deixa o resultado minúsculo; geralmente, um ícone quadrado separado fica melhor.
Perguntas frequentes
Ainda preciso do favicon.ico?
Sim, ainda é útil. Alguns navegadores, leitores de feeds e ferramentas solicitam /favicon.ico na raiz do site mesmo sem uma tag link. Navegadores modernos também usam os ícones PNG referenciados no HTML.
Onde coloco os arquivos?
Envie os arquivos para a pasta raiz do seu site, junto à página inicial, para que /favicon.ico e os outros caminhos no HTML funcionem. Se usar uma subpasta, altere os caminhos nas tags link e em site.webmanifest.
Por que meu favicon antigo ainda aparece?
Os navegadores armazenam favicons em cache separadamente e por bastante tempo. Tente atualizar a página à força, abrir /favicon.ico em uma nova aba ou verificar em uma janela privativa. Renomear os arquivos, por exemplo, para favicon-v2.ico, também força o recarregamento.
A ferramenta cria um favicon SVG?
Não. A ferramenta cria arquivos PNG e ICO, que funcionam em todos os lugares. Se você já tem um logo SVG, pode adicioná-lo por conta própria com uma tag link do tipo image/svg+xml, além desses arquivos.
Privacidade
Os ícones, o arquivo ICO e o ZIP são criados no seu navegador. Sua imagem e seu texto não são enviados, armazenados nem incluídos em análises.