Criar favicon grátis leva 5 minutos usando uma ferramenta online, sem instalar nenhum programa e sem saber design. As 4 melhores opções em 2026 são: Favicon.io (mais rápido, aceita texto/imagem/SVG/emoji), RealFaviconGenerator (mais técnico, cobre PWA e todos dispositivos), Canva (para quem quer criar do zero com design personalizado) e GerarOnline (opção brasileira com biblioteca de símbolos prontos). Todas geram um pacote com os tamanhos necessários e o código HTML pronto para colar no site.
Comparativo direto das 4 ferramentas:
| Ferramenta | Melhor para | Tamanhos gerados | Formato | Grátis? |
|---|---|---|---|---|
| Favicon.io | Uso rápido, começar do zero | 16, 32, 180, 192, 512 | ICO, PNG | Sim, sem cadastro |
| RealFaviconGenerator | Cobertura técnica completa (PWA, Apple, Android) | Todos padrões | ICO, PNG, SVG, WebP | Sim, sem cadastro |
| Canva | Criar design personalizado do zero | Personalizado | PNG, SVG | Sim (versão grátis) |
| GerarOnline | Brasileiro com símbolos prontos | 16 a 512 | ICO, PNG, SVG | Sim, sem cadastro |
Se você tem uma logo pronta em PNG/SVG e só quer transformar em favicon rápido, use o Favicon.io. Se quer o pacote completo com suporte a PWA e todas as plataformas modernas, use o RealFaviconGenerator. Se precisa desenhar o ícone do zero, comece pelo Canva e depois passa pelo Favicon.io para gerar os tamanhos.
O que é favicon e por que você precisa de um
Favicon (contração de “favorite icon”) é o pequeno ícone que aparece na aba do navegador ao lado do título da página, nos favoritos, no histórico e no atalho quando o usuário salva o site na tela inicial do celular. Foi criado pela Microsoft em 1999 no Internet Explorer 5 e virou padrão web pouco depois.
Sem favicon, o navegador mostra um ícone genérico (folha em branco no Chrome, ícone quadrado no Safari), o que sinaliza site amador ou abandonado. Sites profissionais têm favicon em 100% dos casos porque:
- Identidade visual: o usuário reconhece seu site entre 20 abas abertas só pelo ícone
- Confiança: ausência de favicon é sinal de site inacabado ou baixa credibilidade
- PWA e app icon: favicon moderno alimenta o ícone do site quando salvo como app no celular
- Google SERP: Google mostra o favicon ao lado do resultado da busca em dispositivos móveis desde 2020
Para adicionar depois de criado, o processo é diferente conforme o CMS. No HTML puro, tem código específico no <head> (veja em como colocar favicon no HTML). No WordPress, o caminho é pelo Personalizador do tema (veja em como colocar favicon no WordPress).
Quais tamanhos de favicon criar em 2026
O padrão moderno pede múltiplos tamanhos porque cada dispositivo e sistema operacional usa uma resolução diferente. Se você criar só o 16×16 tradicional, ficará pixelado no iPhone e nos favoritos do Windows moderno.
Os 6 tamanhos essenciais para cobrir 100% dos cenários em 2026:
| Tamanho | Onde é usado |
|---|---|
| 16×16 px | Aba do navegador desktop (padrão histórico) |
| 32×32 px | Aba em telas Retina/HiDPI e barra de favoritos |
| 48×48 px | Atalho do Windows na área de trabalho |
| 180×180 px | Apple Touch Icon (iPhone e iPad ao salvar na tela inicial) |
| 192×192 px | Android Chrome (ícone PWA e atalho na tela inicial) |
| 512×512 px | Android Chrome (splash screen do PWA) |
Bônus (opcional mas recomendado para 2026):
- Versão SVG mestre: navegadores modernos suportam favicon SVG (escala infinita, arquivo mínimo)
- Versão dark mode: SVG com
media="(prefers-color-scheme: dark)"mostra ícone diferente quando o usuário está no modo escuro
Ferramentas modernas como o RealFaviconGenerator geram todos esses tamanhos automaticamente a partir de 1 imagem mestre de 512×512 px. Basta fornecer o arquivo maior e ele reduz proporcionalmente para as outras versões.
Ferramenta 1: Favicon.io (a mais rápida)
O Favicon.io é a ferramenta mais popular do mundo para gerar favicon rápido, com 3 modos de entrada diferentes: converter texto (você digita 1-2 letras e escolhe fonte/cor), converter imagem (upload de PNG/JPG) ou converter emoji (escolhe qualquer emoji do sistema). Também aceita SVG.
Como usar em 4 passos:
- Acessa favicon.io
- Escolhe o modo (Text, Image, Emoji ou SVG) conforme sua fonte
- Ajusta as configurações (fonte, cor de fundo, cor do texto se aplicável)
- Clica em Download e recebe um ZIP com
favicon.ico,favicon-16x16.png,favicon-32x32.png,apple-touch-icon.png,android-chrome-192x192.png,android-chrome-512x512.pnge osite.webmanifestpronto
Melhor para: quem precisa de favicon simples baseado em texto (iniciais da marca) ou já tem logo em PNG e só quer converter rápido. Não pede cadastro nem email.
Ferramenta 2: RealFaviconGenerator (a mais técnica)
O RealFaviconGenerator é o mais completo do mercado. Gera todos os tamanhos necessários para 2026 (Android Chrome, iPhone/iPad, Windows Metro, macOS Safari pinned tab, PWA) e ainda mostra uma pré-visualização real de como o favicon fica em cada plataforma antes de baixar.
Como usar:
- Acessa realfavicongenerator.net
- Faz upload da imagem mestre (idealmente 260×260 px ou maior, quadrada)
- Configura cada plataforma na pré-visualização (iOS: fundo transparente ou colorido; Android: tema PWA; macOS: cor do pinned tab)
- Clica em Generate your Favicons and HTML code
- Baixa o ZIP e copia o HTML personalizado gerado
Melhor para: projeto sério, PWA, sites que precisam funcionar bem em todos os dispositivos. O código HTML gerado já vem otimizado com mask-icon para Safari, theme-color para Chrome mobile e link para o browserconfig.xml do Windows.
Ferramenta 3: Canva (para desenhar do zero)
O Canva não é gerador de favicon nativo, mas é a melhor opção quando você quer desenhar o ícone do zero antes de converter. Tem biblioteca gigante de formas, ícones e cores prontas, template grátis de “Logo” que serve como base e exportação em PNG de alta qualidade.
Fluxo recomendado:
- Acessa canva.com e cria conta grátis
- Cria um design personalizado de 512×512 px (quadrado)
- Desenha ou monta o ícone usando formas, ícones da biblioteca e sua paleta de cores
- Exporta em PNG transparente
- Leva o PNG exportado para o Favicon.io ou RealFaviconGenerator gerar os tamanhos
Melhor para: quem não tem logo pronta e precisa criar visual da marca do zero. Cuidado: Canva sozinho não gera favicon nos múltiplos tamanhos, sempre passa por gerador depois.
Ferramenta 4: GerarOnline (opção brasileira)
O GerarOnline é uma ferramenta brasileira gratuita que gera favicon em todos os tamanhos (16×16 até 512×512) nos formatos PNG, ICO e SVG. Diferencial: tem uma biblioteca de centenas de símbolos prontos organizados por categoria (finanças, saúde, tecnologia, alimentação), útil quando você não tem logo e precisa de ícone genérico do nicho.
Como usar:
- Acessa geraronline.com
- Faz upload da imagem OU escolhe um símbolo da biblioteca
- Ajusta a cor de fundo
- Baixa o pacote completo em ZIP
Melhor para: quem prefere interface em português e não tem logo (usa símbolo genérico como ponto de partida).
Formatos de favicon: ICO, PNG, SVG e WebP
Cada formato tem função específica e o pacote moderno costuma incluir os 3 primeiros para máxima compatibilidade.
ICO (Icon) Formato tradicional criado pela Microsoft em 1985 para ícones do Windows. Pode conter múltiplos tamanhos em 1 único arquivo. É o único formato universalmente reconhecido como favicon padrão desde os anos 2000. Continua sendo o favicon.ico na raiz do site (fallback obrigatório).
PNG (Portable Network Graphics) Formato moderno, suporta transparência real e compressão sem perda. Ideal para os tamanhos maiores (180, 192, 512) que precisam de mais detalhe. Não pode ter múltiplos tamanhos num arquivo só, então cada tamanho vira um PNG separado.
SVG (Scalable Vector Graphics) Formato vetorial, escala para qualquer tamanho sem perder qualidade e o arquivo é minúsculo (1-5 KB). Suportado como favicon por Chrome, Firefox, Edge e Safari desde 2020. O ideal em 2026: 1 SVG mestre + 1 ICO de fallback + PNGs para plataformas específicas (iOS/Android que não aceitam SVG como app icon).
WebP Formato do Google, ainda não tem suporte universal como favicon (Safari não aceita em 2026). Melhor evitar por enquanto e usar PNG para os tamanhos raster.
Código HTML para adicionar o favicon no site (2026)
Depois de baixar o pacote da ferramenta escolhida, você precisa subir os arquivos para a raiz do servidor (mesma pasta do index.html ou raiz do site WordPress) e adicionar 4-6 linhas no <head> do HTML. Padrão moderno 2026:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#ffffff">
Cada linha faz uma coisa específica:
- Linha 1:
favicon.icona raiz é o fallback obrigatório que todo navegador procura primeiro - Linha 2:
favicon.svgmoderno usado quando o navegador suporta (Chrome, Firefox, Edge, Safari novos) - Linha 3:
apple-touch-iconde 180×180 usado quando o iPhone salva o site na tela inicial - Linha 4:
site.webmanifesté o arquivo que descreve o app quando instalado como PWA - Linha 5:
theme-colordefine a cor da barra do navegador no Chrome mobile (opcional mas recomendado)
O site.webmanifest gerado pelas ferramentas contém:
{
"name": "Nome do seu site",
"short_name": "Site",
"icons": [
{ "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}
Se você usa WordPress, todo esse código HTML é gerado automaticamente pelo tema quando você define o “Ícone do site” no Personalizador. Não precisa editar o <head> manualmente.
Como testar se o favicon está funcionando
Depois de instalar, o teste em 3 níveis:
- Teste rápido no navegador: abre uma aba anônima e digita a URL do seu site. Se o favicon aparecer na aba, funcionou. Modo anônimo evita cache antigo.
- Teste com ferramenta especializada: o RealFaviconGenerator Favicon Checker analisa a URL do seu site e valida se todos os tamanhos estão configurados corretamente, com relatório visual por plataforma.
- Teste em cada dispositivo real: abre o site no iPhone e salva na tela inicial (o ícone precisa ficar bonito, sem quadrado preto de fundo). Faz o mesmo no Android. Adiciona nos favoritos do desktop. Se em algum lugar o ícone estiver genérico ou pixelado, algum tamanho está faltando.
O Google Search Console também mostra o favicon que aparece no SERP em “Aparência da pesquisa > Favicon”. Se o Google não estiver mostrando seu favicon nos resultados de busca mobile, provavelmente é porque a imagem tem menos de 48×48 px ou está bloqueada por robots.txt.
5 erros comuns e por que o favicon não aparece
Erro 1: cache do navegador segurando versão antiga Motivo mais comum de “instalei mas não aparece”. O navegador guarda o favicon em cache agressivo, às vezes por semanas. Solução: força atualização com Ctrl+F5 (Windows) ou Cmd+Shift+R (Mac) e testa em aba anônima.
Erro 2: caminho errado no HTML Se você usa href="favicon.ico" mas o arquivo está em /images/favicon.ico, o navegador não encontra. Sempre use caminho absoluto começando com / (href="/favicon.ico") ou coloca o arquivo na raiz do site.
Erro 3: arquivo com nome ou extensão errada Se o arquivo está salvo como Favicon.ICO (maiúscula) e o HTML pede favicon.ico (minúscula), em servidor Linux (case-sensitive) o navegador retorna 404. Padroniza tudo em minúsculas e extensão minúscula.
Erro 4: tamanho abaixo do mínimo do Google Google exige favicon de pelo menos 48×48 px para mostrar no SERP mobile. Se você só tem 16×16, o Google ignora e mostra o ícone genérico. Sempre inclua tamanhos maiores no pacote.
Erro 5: bloqueio por robots.txt ou tema WordPress Alguns temas WordPress bloqueiam acesso direto à pasta /uploads/ que é onde eles salvam o favicon. Também pode ter regra no robots.txt bloqueando /*.ico. Testa acessar diretamente o URL do favicon no navegador; se retornar erro 403 ou 404, tem bloqueio de acesso.
Para saber onde salvar o favicon no WordPress e trocar depois de gerado, o guia de como alterar favicon WordPress cobre o passo a passo pelo Personalizador do tema.
Vídeo passo a passo mostrando o processo real de criar favicon grátis do zero usando Canva e converter para os tamanhos necessários:
Perguntas frequentes
Como criar favicon grátis para site?
Use uma ferramenta online gratuita como Favicon.io (para conversão rápida de texto, imagem ou emoji) ou RealFaviconGenerator (para pacote completo com PWA). Faz upload da imagem, baixa o ZIP com todos os tamanhos gerados e adiciona 4-6 linhas de HTML no <head> do site.
Qual o tamanho ideal de um favicon em 2026?
O padrão moderno pede múltiplos tamanhos: 16×16 (aba), 32×32 (Retina), 48×48 (Windows), 180×180 (iPhone), 192×192 (Android) e 512×512 (PWA). Ferramentas como o RealFaviconGenerator geram todos automaticamente a partir de 1 imagem mestre de 512×512 px.
Qual o melhor formato: ICO, PNG ou SVG?
O ideal em 2026 é o pacote combinado: 1 ICO na raiz (fallback compatível), 1 SVG (moderno, vetorial, escala infinita) e PNGs específicos para iPhone (180×180) e Android (192×192 e 512×512). WebP ainda não é recomendado para favicon.
Posso usar uma foto como favicon?
Pode, mas não é ideal. Fotos ficam ruins nos tamanhos pequenos (16×16 e 32×32) porque perdem detalhes e viram borrão. Prefira logos simples, letras estilizadas ou ícones geométricos que se leem bem em qualquer tamanho.
Por que meu favicon não aparece depois de instalar?
As 3 causas mais comuns são: cache do navegador (força Ctrl+F5 e testa em aba anônima), caminho errado no HTML (sempre use /favicon.ico absoluto) ou arquivo salvo com nome/extensão em maiúsculas em servidor Linux. Também vale checar se o arquivo carrega direto no navegador digitando o URL completo.
Favicon precisa ter fundo transparente?
Depende do dispositivo. Para navegador desktop e Android, transparência funciona bem. Para iPhone (apple-touch-icon), fundo transparente aparece preto na tela inicial, então prefira fundo colorido sólido para o arquivo de 180×180. O RealFaviconGenerator permite configurar cada plataforma separadamente.
Preciso pagar para criar favicon?
Não. Todas as ferramentas úteis do mercado têm versão gratuita completa, sem marca d’água nem limite de downloads. Favicon.io, RealFaviconGenerator, GerarOnline e Canva (nas funções básicas) funcionam 100% grátis para gerar favicon.
O Google usa o favicon no ranking?
Não diretamente. Favicon não é sinal de ranking oficial. Mas Google exibe o favicon ao lado do título no SERP mobile desde 2020, o que aumenta o reconhecimento visual da marca e a taxa de clique (CTR). Um favicon bonito e nítido no SERP ajuda a atrair cliques mesmo estando em posições mais baixas.
