Como criar um favicon
Criar um favicon é um trabalho de dois minutos com a ferramenta certa. Comece com uma imagem de origem quadrada - pelo menos 512 × 512 pixels - execute-a no favicon generator e obtenha um pacote completo: .ico de vários tamanhos, SVG, apple-touch-icon e manifesto PNGs. Este guia percorre todas as etapas, desde a preparação da fonte até a verificação do navegador. Para obter uma referência aprofundada, consulte também o full tutorial.
Um favicon é o pequeno ícone que um navegador exibe na barra de guias, barra de endereço e lista de favoritos. No celular, ele se torna o ícone da tela inicial quando um usuário salva seu site. No Windows ele aparece nos pinos da barra de tarefas e nos atalhos da área de trabalho. Acertar o favicon é um pequeno esforço com grande impacto na marca - cada visualização de página começa com seu ícone na guia do usuário.
A configuração moderna do favicon não é um arquivo único – é um conjunto coordenado. Um .ico de vários tamanhos lida com o substituto universal do navegador. Um SVG oferece renderização nítida e escalonável em navegadores modernos, incluindo suporte ao modo escuro. Um 180×180 PNG (apple-touch-icon) é o que iOS usa para instalações na tela inicial. Um 192×192 e um 512×512 PNG alimentam o prompt de instalação do Android PWA. Uma imagem de origem bem preparada gera tudo isso de uma vez.
A preparação da imagem fonte é a etapa mais negligenciada. Seu logotipo deve ser quadrado – um corte assimétrico sempre produz um resultado alongado. Projete uma versão simplificada da sua marca que seja legível em tamanhos pequenos: reduza linhas finas, remova textos minúsculos e aumente o contraste. O que parece elegante em 512×512 pode se tornar uma bolha ilegível em 16×16 se você pular esta etapa de simplificação.
SVG é o formato de origem ideal porque é independente da resolução. Um gráfico vetorial é rasterizado para qualquer densidade de pixels sem perda de qualidade. Se você tiver apenas um raster PNG ou JPG, certifique-se de que ele tenha pelo menos 512×512 antes de gerar – a redução de qualquer tamanho menor introduz um desfoque que se acumula em cada etapa de redimensionamento e resulta em um ícone de guia confuso.
O formato .ico é um contêiner, não uma única imagem. Ele contém vários quadros raster – normalmente 16×16, 32×32, 48×48 e 64×64 – em um único arquivo. O navegador analisa o diretório ICO e renderiza apenas o quadro que melhor corresponde à densidade de exibição necessária. Essa abordagem de arquivo único significa que você não precisa de tags de link separadas para cada resolução — uma tag cobre todos os tamanhos de abas.
Carregue sua imagem de origem para o favicon generator. A ferramenta processa tudo localmente no seu navegador – sua imagem nunca sai do seu dispositivo. Em segundos, ele produz um pacote de download contendo favicon.ico, favicon.svg, apple-touch-icon.png (180×180), android-chrome-192x192.png, android-chrome-512x512.png e site.webmanifest, além de tags de link HTML prontas para colar.
Colocar os arquivos é simples. Coloque todos os arquivos gerados no diretório raiz público do seu site – a mesma pasta que atende seu index.html. Para projetos Vite e Create React App, esta é a pasta /public. Para projetos Next.js App Router, coloque favicon.ico dentro de /app e os arquivos PNG em /public. Para sites estáticos, coloque tudo junto com seus arquivos HTML.
As tags de link HTML informam aos navegadores qual arquivo usar para cada contexto. O mínimo é uma linha: `<link rel='icon' href='/favicon.ico'>`. O conjunto completo recomendado adiciona mais três linhas: uma para a variante SVG, uma para apple-touch-icon e uma para o manifesto da web. Cole o snippet gerado dentro do elemento `<head>`. A ordem das tags não importa, desde que precedam `</head>`.
O cache do navegador é a principal causa de confusão quando um favicon parece não ser atualizado. Os navegadores armazenam em cache /favicon.ico por origem e podem não respeitar os cabeçalhos de controle de cache padrão da mesma forma que fazem para outros ativos. Se o seu ícone antigo persistir, abra uma nova janela anônima ou anexe uma string de consulta destruidora de cache, como `?v=2`, ao href em sua tag de link para forçar os navegadores a buscar o arquivo atualizado.
Erros comuns incluem o upload de uma imagem não quadrada (produz ícones esticados), o uso de uma fonte com menos de 256 × 256 pixels (desfoque em tamanhos de exibição maiores) e a omissão do apple-touch-icon (as instalações do iOS na tela inicial mostram uma captura de tela da página). Todos os três são resolvidos começando com uma fonte quadrada 512×512 PNG ou SVG e deixando o gerador lidar com cada tamanho de saída.
Vale a pena incorporar o suporte ao modo escuro desde o início. Muitos navegadores renderizam a barra de guias em um cromo escuro quando o sistema do usuário está no modo escuro. Se o seu ícone for uma marca escura em um fundo transparente, ele poderá desaparecer em uma guia escura. Envie um favicon SVG com um bloco de estilo `@media (prefers-color-scheme: dark)` incorporado que muda a cor de preenchimento - nenhuma tag HTML extra é necessária, apenas um arquivo SVG atualizado.
Verifique seu favicon usando live favicon tester após a implantação. O testador simula contextos de guias do navegador, favoritos e prompt de instalação e mostra como seu ícone é renderizado em 16, 32, 48, 128 e 512 pixels lado a lado. Verifique também manualmente uma guia fixada em Chrome e Safari e use 'Adicionar à tela inicial' em iOS para confirmar apple-touch-icon.
Para orientações específicas da plataforma, consulte favicon for WordPress, favicon for Shopify, favicon for React e favicon for Next.js. O conjunto de arquivos gerado é idêntico em todas as plataformas — o que varia é onde você carrega os arquivos e como a plataforma injeta ou substitui as tags de link HTML.
Revisite seu favicon sempre que mudar a marca. Os favicons armazenados em cache persistem nos favoritos e nas telas iniciais dos dispositivos móveis muito depois de uma reformulação do site entrar no ar. A atualização da string de versão em sua tag de link href força os navegadores a buscar o novo arquivo na próxima visita, substituindo gradualmente o ícone antigo em todos os locais em cache. Consulte o guia best favicon format para obter uma análise formato por formato do tamanho do arquivo e das compensações de compatibilidade.
Como funciona
- 1
Prepare uma imagem de origem quadrada
Exporte seu logotipo ou ícone como PNG 512×512 com fundo transparente ou como SVG com viewBox quadrado (por exemplo, `viewBox='0 0 512 512'`). Simplifique detalhes finos que ficarão invisíveis em 16×16.
- 2
Gere seu pacote favicon
Carregue a fonte para o [favicon generator](tool:favicon-generator). A ferramenta produz favicon.ico (tamanho múltiplo 16/32/48/64), favicon.svg, apple-touch-icon.png (180×180), android-chrome-192x192.png, android-chrome-512x512.png e site.webmanifest – tudo em uma passagem.
- 3
Copie todos os arquivos para a raiz do seu site
Coloque todos os arquivos do zip de download na raiz pública do seu projeto – o diretório que atende index.html. Para Next.js App Router, favicon.ico entra em /app; os PNGs vão em /public.
- 4
Cole as tags do link HTML em <head>
Copie o snippet HTML gerado e adicione-o dentro do elemento `<head>`. O conjunto completo cobre o substituto .ico, variante SVG, apple-touch-icon e link de manifesto – seis linhas no total.
- 5
Verifique em navegadores e dispositivos
Abra seu site em Chrome, Safari, Firefox e Edge. Inspecione a guia, a barra de favoritos e a barra de endereço. No iOS, toque na planilha Compartilhar e em 'Adicionar à tela inicial' para testar o apple-touch-icon. Use o [favicon tester](utility:favicon-tester) para uma simulação rápida.
- 6
Quebra de cache ao atualizar um favicon existente
Se estiver substituindo um favicon ativo, aumente a string de versão em sua tag de link href (`?v=2`, `?v=3`, etc.). Isso força todos os navegadores a buscar o arquivo atualizado no próximo carregamento da página, em vez de exibir a versão em cache.
Experimente agora
Crie seu favicon agora
Gerador de FaviconPerguntas frequentes
Qual é a maneira mais fácil de criar um favicon?+
Carregue um PNG ou SVG quadrado de 512×512 para o gerador FetchFavicon. Ele produz todos os arquivos necessários – .ico, SVG, apple-touch-icon, manifesto PNGs – além de HTML pronto para colar em menos de um segundo, sem inscrição e sem upload de servidor.
Qual deve ser o tamanho da minha imagem de origem?+
Pelo menos 512×512 pixels, de preferência como SVG. Diminuir o risco de desfoque visível no tamanho 256×256 usado pelo Windows e no tamanho 512×512 necessário para os prompts de instalação do PWA. Aumentar a escala de uma imagem pequena aumenta a perda de qualidade em cada etapa de redimensionamento.
Eu preciso de um apple-touch-icon?+
Sim, se algum visitante usar um iPhone ou iPad. Sem ele, as instalações do iOS na tela inicial mostram uma miniatura de captura de tela de baixa qualidade da sua página em vez da marca da sua marca. Um PNG 180×180 vinculado a `<link rel='apple-touch-icon' tamanhos='180x180' href='/apple-touch-icon.png'>` é tudo que você precisa.
Por que meu favicon não aparece na aba do navegador?+
Na maioria das vezes é um problema de cache. Abra uma janela privada/anônima e navegue até seu site. Se ainda assim não aparecer, verifique se favicon.ico é veiculado na raiz do seu domínio e se o caminho href da tag do link é resolvido corretamente – verifique se há erros de digitação e barras iniciais ausentes.
Preciso de .ico e SVG?+
Sim, para cobertura total. O .ico lida com navegadores legados, atalhos Windows e ferramentas de terceiros que buscam /favicon.ico diretamente. O SVG lida com renderização nítida em Chrome, Firefox, Edge e Safari 15+ e suporta alternância de cores no modo escuro. O tamanho do arquivo combinado normalmente é inferior a 30 KB.
Quanto tempo leva para uma alteração no favicon ser propagada?+
De segundos a vários dias, dependendo da agressividade com que o navegador armazenou em cache o original. A solução mais rápida é anexar uma nova string de consulta (`?v=2`) ao seu favicon href. Isso faz com que os navegadores o tratem como um novo URL e busquem uma nova cópia imediatamente.
Posso usar um JPEG como fonte de favicon?+
Você pode fazer upload de um JPEG para o gerador, mas os JPEGs não suportam transparência. Se o seu ícone precisar de um fundo transparente - que fica melhor nas guias do navegador - comece com PNG-32 ou SVG. O gerador converterá para .ico e PNG corretamente.