Gerador de favicon
Crie favicons a partir de texto, emojis ou imagens para seu site
Design do favicon
Escolher um emoji
0% é quadrado; 100% usa o traçado original totalmente arredondado.
Arquivo de imagem de até 10 MiB. O renderizador original estica a imagem para formar um quadrado.
Prévia e arquivos
Esta é uma ilustração. A renderização de emojis do navegador e do sistema pode ser diferente.
Prévia ao vivo atualizada. Gere os arquivos quando seu design estiver pronto.
Arquivos PNG gerados
O design mudou. Estes arquivos ainda contêm o último design gerado; gere-os novamente para atualizá-los.
Arquivos PNG: 16, 32, 48, 64, 128 e 256 px. O ICO contém o PNG gerado de 32 px.
Adicionar ao seu site
- Envie os arquivos baixados e use as tags copiadas no head da sua página.
- Os caminhos padrão das tags se referem à raiz do seu site; ajuste-os se colocar os arquivos em outro lugar.
- O download do ICO contém uma imagem PNG, em vez de todos os tamanhos gerados.
- Os ícones de toque da Apple e os ícones do manifesto de aplicativos web são recursos separados; esta ferramenta não gera esses arquivos.
- Não há garantia de que um favicon apareça nos resultados de busca.
- A ferramenta lê seu arquivo no navegador sem enviá-lo. Mantenha um original intacto.
Sobre a ferramenta Gerador de favicon
Nosso gerador de favicon online gratuito permite criar favicons profissionais a partir de texto, letras, emojis ou imagens enviadas, direto no navegador. Favicons são os pequenos ícones que aparecem nas abas do navegador, nos favoritos e nos resultados de busca, e têm papel importante no reconhecimento da marca e na experiência do usuário. Com esta ferramenta, você cria e baixa favicons em vários tamanhos sem software de design nem conhecimento técnico.
O gerador oferece três modos de criação: o modo Texto/Letra, para criar favicons a partir de um ou dois caracteres, com controle total de fonte, cor e estilo; o modo Emoji, para gerar rapidamente favicons a partir de qualquer emoji, com fundos e tamanhos ajustáveis; e o modo Upload, para criar arquivos de favicon quadrados a partir de imagens que o navegador consiga decodificar. A ferramenta renderiza localmente, sem enviar o arquivo selecionado; isso não garante que todos os outros scripts ou requisições da página sejam privados.
A ferramenta gera seis tamanhos quadrados de PNG: 16, 32, 48, 64, 128 e 256 px. Baixe os arquivos individuais, um ICO de 32 px com uma única imagem em PNG e as tags de link HTML correspondentes. Esses recursos não cobrem todos os requisitos de ícones de todas as plataformas.
Principais recursos
- Três modos de criação: Texto/Letra, Emoji e Upload de imagem
- Cor do texto, cor de fundo, família da fonte e peso da fonte personalizáveis
- Raio de borda ajustável, de quadrado a círculo
- Suporte a fundo transparente nos modos de texto e emoji
- Grade de seleção rápida de emojis populares, com 32 emojis de uso comum
- Gera seis tamanhos padrão de favicon: 16x16, 32x32, 48x48, 64x64, 128x128 e 256x256
- Prévia ao vivo com atualizações em tempo real conforme você ajusta as configurações
- Prévia em uma aba de navegador simulada, mostrando como seu favicon vai aparecer
- Download de tamanhos individuais como arquivos PNG
- Download de um contêiner favicon.ico com um PNG de 32 px gerado; a compatibilidade depende do cliente
- Cópia das tags de link HTML para a área de transferência, para integrar ao site com facilidade
- Todo o processamento acontece no navegador, sem nenhum envio a servidores
Como usar o Gerador de favicon
- Escolha um modo: Selecione Texto/Letra para criar um favicon a partir de caracteres, Emoji para usar um emoji ou Upload de imagem para converter uma imagem existente.
- Personalize o design: No modo Texto, digite 1-2 caracteres e ajuste tamanho da fonte, cores, raio de borda, família da fonte e peso. No modo Emoji, selecione ou digite um emoji e configure fundo e tamanho. No modo Upload, selecione um arquivo de imagem do seu dispositivo.
- Veja a prévia em tempo real: Acompanhe a prévia ao vivo de 256x256 se atualizar na hora conforme você muda as configurações. Confira a simulação da aba do navegador para ver como o favicon ficará em uma aba real.
- Gere os favicons: Clique no botão "Gerar favicons" para criar os seis tamanhos padrão a partir do seu design.
- Baixe seus favicons: Baixe os arquivos PNG individuais de cada tamanho, obtenha um arquivo favicon.ico ou copie as tags de link HTML para a seção head do seu site.
- Adicione ao seu site: Coloque os arquivos baixados no diretório raiz do seu site e cole as tags de link HTML no head do seu documento HTML.
Casos de uso
- Lançamento de um novo site: Crie rapidamente um favicon profissional para um novo site ou aplicação web sem precisar de um designer gráfico.
- Marca pessoal: Gere um favicon baseado em letras, com as suas iniciais, para um blog pessoal, portfólio ou site profissional.
- MVPs de startups: Crie um favicon provisório, mas bem-acabado, nas fases iniciais de desenvolvimento, quando a identidade visual completa ainda não está definida.
- Projetos paralelos e experimentos: Dê personalidade a projetos de hobby, participações em hackathons ou sites experimentais com favicons personalizados de emoji ou texto.
- Testes de desenvolvimento web: Gere favicons provisórios para ambientes de desenvolvimento, servidores de homologação ou protótipos de clientes.
- Gerenciamento de vários sites: Crie favicons distintos para sites, subdomínios ou aplicações web diferentes, para ajudar a distinguir várias abas abertas.
- Documentação e tutoriais: Gere arquivos de favicon para sites de demonstração, exemplos de código e materiais educacionais.
- Desenvolvimento de extensões de navegador: Crie ícones para extensões de navegador que precisam de ícones pequenos e reconhecíveis em vários tamanhos.
Perguntas frequentes
O que é um favicon?
Um favicon (abreviação de "favorites icon", ícone de favoritos) é um pequeno ícone associado a um site. Ele aparece nas abas do navegador, nas listas de favoritos, no histórico do navegador e nos resultados dos mecanismos de busca. Os favicons ajudam os usuários a identificar e localizar seu site rapidamente entre várias abas abertas e favoritos.
Quais tamanhos devo usar no meu favicon?
Esta ferramenta fornece arquivos PNG de 16, 32, 48, 64, 128 e 256 px e um ICO de 32 px. Escolha os tamanhos exigidos pelo cliente de destino; o Google Search recomenda atualmente ícones quadrados maiores que 48 px, e a inclusão não é garantida.
Qual é a diferença entre os formatos PNG e ICO?
PNG é um formato de imagem raster; ICO é um contêiner de ícones. Esta ferramenta exporta seis arquivos PNG e incorpora o PNG de 32 px gerado em uma única entrada de ICO. Verifique os requisitos do cliente de destino; nenhum dos formatos garante suporte universal.
Posso criar um favicon transparente?
Sim, nos modos Texto/Letra e Emoji você pode ativar a opção de fundo transparente. Isso cria um favicon com fundo transparente, útil para favicons que devem se misturar à cor de fundo da aba do navegador.
Minha imagem enviada é mandada para um servidor?
Esta ferramenta renderiza a imagem selecionada no navegador, sem enviá-la. Os arquivos são limitados a 10 MiB e os formatos dependem da decodificação do navegador. Esta declaração não cobre armazenamento, rastreamento nem requisições feitas por outros scripts do site.
Como adiciono o favicon ao meu site?
Coloque os arquivos de favicon baixados no diretório raiz do seu site (ou em um subdiretório de sua escolha) e depois adicione as tags de link HTML à seção head do seu HTML. Você pode copiar as tags de link prontas para uso desta ferramenta. Por exemplo: <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
Dicas e boas práticas
- Mantenha a simplicidade: Favicons são exibidos em tamanhos muito pequenos. Use formas simples e marcantes e cores de alto contraste, que continuem reconhecíveis em 16x16 pixels.
- Use no máximo 1-2 caracteres: Em favicons baseados em texto, um caractere funciona melhor. Dois caracteres podem funcionar, mas ficam menos legíveis em tamanhos pequenos.
- Escolha cores contrastantes: Garanta que o texto ou o emoji se destaque com clareza contra o fundo. O alto contraste assegura a visibilidade nas abas do navegador.
- Teste em tamanhos pequenos: Confira sempre como o favicon fica em 16x16 e 32x32 antes de finalizar. O que fica ótimo em 256x256 pode não ser legível em tamanhos menores.
- Considere o modo escuro: Muitos usuários navegam com temas escuros no navegador. Um favicon com fundo transparente e conteúdo escuro pode ficar invisível. Considere adicionar um fundo colorido ou usar conteúdo em cores claras.
- Use o raio de borda: Cantos arredondados (20-30%) dão aos favicons um visual moderno e refinado. O círculo completo (100%) funciona bem para letras isoladas ou emojis.
- Inclua vários tamanhos: Forneça arquivos adequados aos seus clientes de destino. Esta ferramenta gera os seis tamanhos de PNG listados e um ICO; ícones Apple touch e de manifesto de web app exigem arquivos separados, e a cobertura abrangente de dispositivos não é garantida.