Sem imagem · Grátis · Sem cadastro
Gerador de favicon de texto
Crie um favicon com 1 a 3 letras, iniciais ou caracteres. Escolha fonte, cores e formato, confira no tamanho real e baixe os arquivos ICO e PNG para o site.
Projete seu favicon de texto
Use de 1 a 3 caracteres. Um ou dois costumam ficar mais legíveis em 16 px.
As fontes usam as famílias disponíveis no seu dispositivo. Os downloads são imagens rasterizadas, portanto as letras exportadas permanecem as mesmas em outros dispositivos.
Visualizar em tamanhos reais de favicon
Tamanhos reais de pixels abaixo. Verifique a legibilidade antes de fazer o download.
Baixar arquivos do favicon
Um ICO, seis tamanhos PNG, um Web App Manifest e um trecho HTML. Sem marca-d'água.
Adicionar à seção head do HTML
<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">O manifest contém referências básicas de ícones. Ele não adiciona suporte offline nem transforma seu site em um PWA completo.
Como criar um favicon a partir de texto
1. Escolha suas letras
Comece com uma única letra ou duas iniciais. Nomes longos perdem detalhes em uma guia do navegador.
2. Ajuste a forma e o espaçamento
Escolha uma fonte e cores contrastantes. Ajuste o preenchimento e inspecione as visualizações de 16, 32 e 48 px.
3. Baixe e instale
Baixe o pacote, coloque os arquivos em seu diretório público e adicione as tags HTML fornecidas. Revise os caminhos para sua estrutura.
Ideias de letras e iniciais para favicon
Um favicon de texto cria uma marca reconhecível para o site mesmo antes de você ter um logotipo completo. Comece pela parte mais memorável do nome e teste o resultado no tamanho real de uma aba. Use estes exemplos como ponto de partida no editor.
Uma letra para um site pessoal
Use a primeira letra do seu nome, publicação ou produto. Um único caractere permite traços mais fortes e uma margem mais folgada, o que melhora a leitura nas abas estreitas do navegador.
Duas iniciais para um portfólio
Duas iniciais ajudam a associar um portfólio, uma newsletter ou um pequeno negócio ao nome. Compare combinações largas, como MW, com letras mais estreitas: a mesma margem não produz o mesmo tamanho visual em todos os pares.
Um pequeno rótulo para um projeto
Uma abreviatura de três caracteres pode funcionar para uma ferramenta de desenvolvedor ou projeto paralelo. Verifique a visualização de 16 px com atenção; se as letras se fundirem, encurte o rótulo em vez de confiar na visualização ampliada.
Como manter um favicon de texto legível em 16 px
A prévia ampliada ajuda nos ajustes, mas é na menor visualização que você deve avaliar se o símbolo continua reconhecível. Altere uma configuração por vez para entender o que realmente melhora o resultado.
Escolha as letras antes de escolher a fonte
Experimente uma única inicial e uma versão de duas letras antes de escolher três caracteres. Para um nome de marca longo, use uma abreviatura familiar em vez de espremer o nome completo em um pequeno quadrado.
Equilibre o peso da fonte e os espaços abertos
Letras em negrito costumam resistir melhor à redução do que traços finos, mas um peso excessivo pode fechar os espaços internos de B, R ou a. Compare os pesos em 16 e 32 px e escolha a versão com contornos mais nítidos.
Verifique o contraste nas guias claras e escuras
Use uma cor de texto que se destaque do fundo. Mude o plano de fundo da visualização para inspecionar cantos e bordas transparentes. Um design circular com preenchimento generoso dá às letras menos espaço do que um design quadrado.
Deixe espaço ao redor das letras
Reduza o preenchimento se as iniciais parecerem muito pequenas; aumente-o se os traços parecerem aglomerados contra a borda. Cantos arredondados e círculos alteram o espaço disponível, portanto revise a menor visualização novamente após alterar a forma.
Formatos de arquivo Favicon e tamanhos PNG
| Arquivo | Tamanho | Usar |
|---|---|---|
| favicon.ico | 16/32/48 pixels | Três imagens PNG dentro de um arquivo ICO para uso do favicon do navegador. |
| favicon-16x16.png, favicon-32x32.png, favicon-48x48.png | 16/32/48 pixels | Pequenos ícones individuais para guias, favoritos e outras interfaces de usuário do site. |
| apple-touch-icon.png | 180 × 180 pixels | Um candidato a ícone da tela inicial. Escolha um fundo quadrado quando precisar de um bloco opaco. |
| android-chrome-192x192.png, android-chrome-512x512.png | 192/512 pixels | Ícones maiores referenciados pelo manifest da web incluído; estes não são ícones maskable. |
O manifest contém referências básicas de ícones. Ele não adiciona suporte offline nem transforma seu site em um PWA completo.
Como adicionar seu favicon a um site
Escolha o método de instalação para o seu projeto. Mantenha os nomes dos arquivos baixados, a menos que você também atualize suas referências e verifique o site implantado após substituir um ícone antigo.
HTML e sites estáticos
Extraia o ZIP no diretório público da raiz do site. Copie as tags HTML do editor para a seção head da página. Se os arquivos estiverem em uma subpasta, ajuste os caminhos do ícone e do manifest; confira também as imagens referenciadas no site.webmanifest.
Veja o código de instalaçãoProjetos Next.js
Use o ICO ou PNG com a convenção de favicon ou configuração de metadados do seu projeto. Verifique se o aplicativo já define um ícone antes de adicionar outra referência. O guia Next.js explica o posicionamento dos arquivos e conflitos comuns.
Guia de instalação do favicon Next.jsSites WordPress
Use o PNG de 512 px ao definir o ícone do site. O WordPress gera os tamanhos necessários automaticamente, portanto não é preciso enviar todos os arquivos do ZIP. Consulte o guia para encontrar essa opção na sua versão do WordPress.
Guia de ícones do site WordPressPor que meu novo favicon não está aparecendo?
Primeiro confirme se o arquivo gerado está correto e, em seguida, verifique como o site o veicula. Uma visualização correta aqui não verifica os caminhos ou a configuração do seu site.
O navegador ainda mostra o ícone antigo
Abra diretamente o URL do ícone implantado e confirme se ele contém o novo design. Se isso acontecer, tente uma nova sessão do navegador e revise os caches do navegador ou CDN. Verifique também se há uma referência de ícone mais antiga em seu HTML, metadados da estrutura ou configurações do site.
O ícone está faltando ou parece desfocado
Verifique se o URL do ícone retorna uma imagem, em vez de uma resposta de página ausente ou tela de login. Use um tamanho exportado adequado em vez de ampliar o PNG de 16 px. Se o arquivo em si for difícil de ler, reduza o número de caracteres ou ajuste o peso e o preenchimento.
A Pesquisa Google não atualizou o ícone
O Google precisa rastrear a página inicial e o arquivo do ícone. Mantenha a URL do ícone estável e acessível; uma atualização do navegador não significa que o resultado da pesquisa mudará imediatamente. O Google não garante que um favicon aparecerá nos resultados.
Perguntas frequentes sobre o gerador de favicon de texto
O que é um favicon de texto?
Um favicon de texto usa uma letra, iniciais ou alguns caracteres para identificar um site em uma guia do navegador. É útil quando você ainda não tem um logotipo ou quando uma marca nominativa completa é muito detalhada em tamanhos pequenos.
Quantas letras devo usar?
O editor aceita até três caracteres. Uma ou duas letras em negrito geralmente funcionam melhor em 16 × 16 pixels. Use as visualizações em tamanho real para verificar seu próprio design; traços finos ou três letras largas podem ser difíceis de ler.
Posso usar caracteres chineses ou letras acentuadas?
Sim, desde que uma fonte no seu dispositivo possa exibi-los. A combinação de acentos é contada com sua letra. Inspecione a visualização em busca de glifos ausentes antes de fazer o download. Os arquivos PNG e ICO preservam o resultado renderizado.
Por que as opções de fonte nomeiam Arial, Georgia e Courier?
Essas opções usam famílias de fontes comuns com substitutos do sistema. A face exata pode variar entre os sistemas operacionais. Os arquivos PNG e ICO exportados contêm pixels, e não referências de fontes editáveis, portanto, os visitantes não precisam instalar sua fonte.
Preciso fazer upload de alguma coisa ou criar uma conta?
Não. O texto é renderizado e as imagens são geradas no seu navegador. A ferramenta não carrega seu texto e você pode baixar os arquivos sem se inscrever.
Posso usar o pacote com Next.js ou WordPress?
Os arquivos ICO e PNG podem ser usados em qualquer projeto, mas os caminhos de instalação são diferentes. Use nossos guias Next.js e WordPress para selecionar o local correto do arquivo ou a configuração correta do ícone do site. O snippet HTML fornecido é um ponto de partida para sites HTML.
O manifest gerado é uma configuração completa do PWA?
Não. Ele fornece nomes, cores e referências de ícones comuns. Um PWA ainda precisa de configuração e testes específicos do projeto. Use o PWA Icon Generator para ícones maskable, ativos de plataforma adicionais e mais configurações de manifest.
Favicon de texto ou logotipo baseado em imagem?
Continue usando este editor para letras e iniciais. Escolha Logo Maker quando precisar de um símbolo com nome ou slogan, ou Favicon Generator para redimensionar uma imagem existente. Um símbolo simplificado pode ser mais adequado quando o logotipo completo perde detalhes no tamanho da guia.