Como criar um favicon
Um favicon moderno é mais do que uma imagem 16×16. Este guia aborda a preparação da fonte, a geração de vários tamanhos, a configuração do HTML, exemplos do mundo real e soluções para os problemas que atrapalham a maioria das equipes.
O que é um favicon?
Um favicon é o pequeno ícone que os navegadores exibem em guias, barras de favoritos, listas de histórico e barras de endereço. Nos telefones, ele se torna o ícone da tela inicial quando alguém salva seu site. No Windows, ele aparece nos pinos da barra de tarefas e nos atalhos da área de trabalho. Use nosso [gerador favicon] (ferramenta: gerador favicon), [conversor PNG para ICO] (ferramenta: png-to-ico), [conversor SVG para ICO] (ferramenta: svg-to-ico) e [testador favicon ao vivo] (utilitário: favicon-tester) para construir e verificar seu conjunto de ícones e ler o companion guide para um passo a passo condensado.
A palavra vem do ícone de favoritos, mas o trabalho cresceu muito além de um único GIF 16×16. O favicon de hoje é uma pequena família de ativos: um favicon.ico de nível raiz, variantes opcionais SVG e PNG, um ícone de toque de maçã para iOS e ícones de manifesto para PWAs instaláveis.
Os usuários raramente comentam sobre um favicon bom, mas percebem instantaneamente um que está faltando ou borrado. Um ícone nítido sinaliza polimento e torna sua guia identificável entre vinte páginas abertas.
Use our favicon generator, PNG to ICO converter, SVG to ICO converter, and live favicon tester to build and verify your icon set, and read the companion guide for a condensed walkthrough.
Prepare sua imagem de origem
Comece com uma imagem quadrada de pelo menos 512×512 pixels. SVG com um viewBox quadrado é ideal porque é dimensionado de forma limpa para cada tamanho de raster que você exportará.
Evite traços finos, tipografia fina e gradientes complexos. Em 16×16, os detalhes da linha do cabelo se fundem em uma pasta cinza. Simplifique a marca: menos formas, maior contraste, mais preenchimento ao redor do glifo.
Se o seu logotipo for horizontal, crie um corte quadrado que centralize o símbolo sem a marca nominativa. Formas de letras abaixo de 8px de altura raramente sobrevivem à redução de escala.
Exporte PNG-32 com transparência quando raster for sua única opção. Um fundo branco incorporado parecerá errado em navegadores cromados escuros e em inicializadores móveis coloridos.
Gere um .ico de vários tamanhos
Agrupe quadros de 16, 32, 48, 64, 128 e 256 pixels dentro de um arquivo favicon.ico. Os navegadores e Windows leem o cabeçalho do diretório e decodificam apenas o tamanho necessário.
Coloque favicon.ico na raiz do seu site (/favicon.ico). Mesmo se você declarar tags <link> modernas, os rastreadores e clientes mais antigos ainda investigam esse caminho por convenção.
Nosso gerador favicon rasteriza clientes de todos os tamanhos em menos de um segundo. Sua imagem de origem nunca sai do navegador, o que é importante quando a marca é um logotipo de produto não lançado.
Adicione as tags HTML
Coloque essas tags em <head> para uma configuração completa de 2026:
<link rel="icon" href="/favicon.ico" tamanhos="qualquer">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
A linha SVG fornece guias nítidas em Chromium e Firefox. A linha .ico cobre substitutos Safari, atalhos Windows e leitores RSS que ignoram SVG.
Exemplos do mundo real
Site de marketing estático: carregue um PNG de 512×512 de sua logomarca, gere favicon.ico mais um ícone de toque de maçã de 180×180, adicione quatro linhas <link>, implante em /public ou na raiz da web. Tempo total: menos de cinco minutos.
Aplicativo React / Vite: coloque ícones em /public, referencie-os com caminhos relativos à raiz em index.html. Vite copia /public inalterado no momento da construção, portanto /favicon.ico é resolvido corretamente na produção.
WordPress: pule o manual HTML - use Aparência → Personalizar → Identidade do site → Site Icon. Carregue uma fonte de 512×512; WordPress emite as tags corretas automaticamente. Consulte nosso tutorial WordPress para dicas sobre como bloquear cache.
Marca de modo escuro: exporte um SVG cujo preenchimento muda dentro de @media (prefers-color-scheme: escuro). Combine-o com um substituto .ico neutro para clientes que nunca carregam o SVG.
Verifique em todos os navegadores
Recarregamento forçado (Ctrl+Shift+R ou Cmd+Shift+R) em Chrome, Safari, Firefox e Edge. As recargas normais geralmente mantêm um favicon em cache por dias.
Verifique quatro superfícies: guia do navegador, barra de favoritos, Adicionar à tela inicial em iOS e um ícone fixado na barra de tarefas Windows. Cada superfície pode solicitar uma resolução diferente do seu pacote.
Abra DevTools → Rede, filtre por ico ou png, recarregue e confirme 200 respostas para cada URL de ícone que você declarou. Um único 404 em apple-touch-icon.png é um erro comum.
Perguntas frequentes
Ainda preciso de favicon.ico se tiver SVG? Sim. Mantenha .ico como substituto universal. SVG é um aprimoramento, não uma substituição.
Qual é o favicon mínimo viável? Um favicon.ico de vários tamanhos em /favicon.ico. Todo o resto melhora a clareza em telas de alto DPI e telas iniciais de dispositivos móveis.
Posso usar um JPG? Você pode, mas perde transparência. PNG ou SVG é quase sempre melhor para ícones de interface.
Com que frequência devo atualizar o favicon? Sempre que a marca da sua marca muda. Faça uma consulta ?v=2 nas tags <link> uma vez para derrotar caches agressivos do navegador.
Solução de problemas
O ícone não é atualizado após a implantação: os navegadores armazenam em cache favicons independentemente de HTML. Atualize, limpe os dados do site ou anexe ?v=2 aos URLs dos ícones temporariamente.
Ícone da guia desfocado: sua fonte era muito pequena ou não quadrada. Regenerar de 512×512 ou SVG; verifique se o .ico realmente contém um quadro 32×32.
Caixa branca ao redor do logotipo: a fonte tinha fundo opaco. Exporte novamente com transparência e gere novamente .ico com entradas compactadas PNG.
Funciona localmente, mas não em produção: confirme se os arquivos estão na raiz pública da web, não apenas em src/. Verifique caches CDN e caminhos que diferenciam maiúsculas de minúsculas em servidores Linux.
Lista de verificação passo a passo
Exporte ou localize um quadrado mestre de 512×512 ou maior. Confirme a transparência, o perfil de cores sRGB e nenhuma camada de fundo oculta em seu arquivo de design.
Execute o mestre por meio de um gerador favicon do lado do cliente. Baixe favicon.ico, favicon.svg se aplicável, apple-touch-icon.png e manifeste PNGs em uma única passagem.
Faça upload de todos os arquivos para sua raiz pública da web. Em hosts estáticos, isso significa a mesma pasta que index.html; em estruturas, use o diretório /public ou /static que mapeia para /.
Cole o bloco <link> recomendado em <head> antes de qualquer script de bloqueio de renderização. O posicionamento antecipado ajuda os navegadores a descobrir ícones na primeira pintura.
Valide com recarregamento forçado em Chrome, Safari e Firefox. Fixe uma guia, adicione a página aos favoritos e teste Adicionar à tela inicial em um iPhone real se o tráfego iOS for importante para você.
Documente o ícone definido em seu README ou sistema de design para que a próxima reformulação da marca não comece com um único 32×32 PNG que alguém encontrou no e-mail.
Erros comuns a evitar
Usando um logotipo totalmente horizontal dimensionado em um slot de 16×16 – o texto se torna um ruído ilegível. Corte para o símbolo.
Enviando apenas um PNG 16×16 renomeado para .ico sem um diretório adequado de vários tamanhos – Windows e guias Retina aumentam e desfocam.
Esquecendo o ícone de toque da maçã enquanto fica obcecado pelas guias da área de trabalho – os usuários do iOS representam uma grande parcela do tráfego da web móvel.
Apontando <link href> para um caminho CDN que difere entre preparação e produção sem compilações com reconhecimento de ambiente.
Presumir que WordPress, Shopify ou Webflow corrigirá magicamente um upload de origem de baixa resolução. Lixo entra, lixo sai em todos os tamanhos.