Como Criar um Favicon a partir de um Logotipo (Todos os Tamanhos Explicados)

Para criar um favicon a partir de um logotipo, comece com um logotipo quadrado (SVG, ou um PNG em 512x512 ou maior). Exporte um favicon.ico, idealmente com versões de 16, 32 e 48px dentro dele, depois adicione um ícone Apple de 180x180 e PNGs de 192/512 para o manifesto, e vincule-os no seu HTML. São cinco arquivos (ICO, SVG, ícone Apple e dois PNGs do manifesto), não uma dúzia. Veja como fazer cada um deles e onde colocá-los.

A resposta curta: os arquivos de favicon que você precisa

O conjunto mínimo moderno é um ICO, um SVG, um ícone Apple touch e dois PNGs do manifesto. Arquivos PNG separados de 16/32/48 e imagens de tile da Microsoft são inúteis quando você tem um ICO multi-tamanho.

Muitos geradores entregam um ZIP com uma dúzia de arquivos, dos quais nenhum navegador solicita a maioria. Um mestre de 512x512 é de sobra, então você nunca precisará ir além disso.

Tamanhos de favicon explicados: para que serve cada um

favicon.ico (16, 32, 48)

ICO é um contêiner que guarda vários bitmaps em um único arquivo. O pacote de qualidade usual é 16, 32 e 48px; adicione 256 apenas se você se importar com ícones grandes do Windows.

Ainda vale a pena ter. Rastreadores, leitores de feed e bots de pré-visualização de links costumam buscar /favicon.ico na raiz do site por padrão. O Chromium se comporta de forma diferente: em um teste de solicitações publicado, ele buscava /favicon.ico apenas quando a página não declarava nenhum ícone. Com um SVG declarado, ele solicitava apenas o SVG e preferia o ICO ao PNG avulso.

Pule o PNG avulso de 32x32. Alguns guias o listam, mas esse teste mostrou que ele ficava sem uso quando um ICO estava presente. O teste cobriu apenas o Chromium, então o comportamento do Firefox e do Safari não foi testado.

favicon.svg

Favicons SVG funcionam no Chrome 80+, Firefox 41+ e Edge. O suporte do Safari é mais recente e irregular, e favicons SVG não funcionam no Safari no iOS. Trate o SVG como um suplemento, nunca como substituição do ICO.

apple-touch-icon (180x180)

180x180 é o tamanho do iPhone Retina (60pt a 3x). Um único arquivo de 180px é suficiente: o iOS o redimensiona para outros dispositivos, incluindo o iPad.

Ícones do manifesto (192 e 512)

O Android Chrome e os aplicativos web instalados leem ícones a partir do manifesto do aplicativo web. O arquivo de 192px é o ícone do launcher e o de 512px é o ícone de instalação/abertura (splash).

O que o Google Search precisa

O Google lê o ícone da sua página inicial. Qualquer formato de favicon válido funciona, incluindo ICO, PNG e SVG. Deve ser quadrado e ter pelo menos 8x8px. O Google recomenda algo maior que 48x48, em múltiplos de 48, e você obtém um ícone por hostname. Se o ícone for inadequado, o Google substitui por um globo genérico.

Prepare seu logotipo antes de exportar

Quadrado, grande e transparente

A melhor fonte é um SVG. Caso contrário, use um PNG quadrado em 512x512 ou maior. Apenas reduza o tamanho: ir de 1024px para 16px mantém os detalhes das bordas, ir de 32px para 16px não mantém, e aumentar o tamanho só cria borrão.

Se o seu logotipo não for quadrado, corte ou preencha-o primeiro com as ferramentas de corte e redimensionamento de imagem do Tool Cloud.

Mantenha o PNG transparente e em sRGB. Não o achatar nem adicionar um fundo "só por precaução".

Um favicon pode ser um JPG? Sim, mas PNG ou SVG é mais limpo. JPG não tem transparência, então uma conversão de JPG para ICO resulta em um quadrado preenchido, e artefatos de compressão aparecem em tamanhos minúsculos.

Simplifique para 16 pixels

Um logotipo completo com slogan vira uma massa ilegível na aba do navegador. O que funciona:

• Uma marca ousada com alto contraste
• Duas ou três cores sólidas
• No máximo um ou dois caracteres em negrito, sem wordmark

Teste no tamanho real. Se você não conseguir reconhecê-lo em meio segundo, simplifique mais.

Dica: use duas imagens para o melhor ICO

Para máxima qualidade, use arte simplificada para os tamanhos 16 e 32 e arte mais detalhada para 48 e 256. Crie dois ICOs, depois use o simplificado como favicon.ico e o detalhado para atalhos do Windows. É opcional, e um único logotipo bem simplificado é suficiente para a maioria dos sites.

Converta seu logotipo para ICO e o restante do pacote

Opção 1: gerar um pacote de favicon

Abra Gerador de Favicon do Tool Cloud, faça upload do seu logotipo quadrado e baixe o ZIP com os tamanhos padrão de favicon. Use os arquivos que correspondem à tabela acima e crie quaisquer faltantes (como o SVG ou os PNGs de 192/512) separadamente. Ignore quaisquer arquivos que seu HTML não referenciará.

Opção 2: converter um logotipo em um único ICO

Se você quiser apenas o favicon.ico, use o Conversor de Imagem para ICO. Faça upload do seu logotipo e converta, depois renomeie o resultado para favicon.ico. Verifique quais tamanhos o ICO contém; se faltar uma versão de 16 ou 32px, use o gerador acima em vez disso.

Criando os PNGs de 180, 192 e 512

Redimensione seu mestre quadrado para 180x180, 192x192 e 512x512 e nomeie-os como apple-touch-icon.png, icon-192.png e icon-512.png.

Para o ícone da Apple, use um fundo opaco com o logotipo centralizado e com margem. O iOS não respeita a transparência e arredonda os cantos por conta própria, então não os arredonde antecipadamente. Sempre forneça seu próprio fundo sólido em vez de confiar no preenchimento que o iOS faz.

Onde cada arquivo vai no seu HTML

O trecho de HTML

Faça upload de todos os arquivos na raiz do seu site, depois adicione isto ao <head>. Os atributos do sizes seguem uma análise sobre como o Chrome escolhe ícones:

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon.svg" type="image/svg+xml" sizes="any">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">
<meta name="theme-color" content="#ffffff">

Algumas observações:

• Use rel="icon". rel="shortcut icon" é legado; "shortcut" não é registrado e é redundante.
• Os navegadores escolhem pelo tipo, não pela posição, então a ordem não é crítica. O atributo type="image/svg+xml" permite que os navegadores que não suportam SVG o ignorem e usem o ICO.
• Dê ao ICO um tamanho concreto e ao SVG o sizes="any". Colocar any no ICO pode fazer o Chrome preferi-lo em vez do SVG.

O manifesto do aplicativo web

{
  "name": "Your Site",
  "short_name": "Site",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

Os critérios de instalação do Chrome exigem os ícones de 192px e 512px. Evite usar "purpose": "any maskable" em um único arquivo. Para um ícone adaptável, crie um arquivo separado com a arte dentro da zona segura central (cerca de 409x409 do canvas de 512).

Adicione um favicon no WordPress, Squarespace, Shopify e Wix

As plataformas renomeiam os menus, então verifique o que seu painel indica.

• WordPress: Aparência, Personalizar, Identidade do Site, Ícone do Site. Faça upload de um PNG 512x512.
• Squarespace: Design, Ícone do Navegador. Um PNG quadrado de 300x300 funciona (o ICO também é aceito).
• Shopify: Configurações do Tema, Favicon. Faça upload de um PNG quadrado de 512x512.
• Wix: Configurações, Configurações do site, Favicon (isso pode exigir um plano premium).

Por que seu favicon parece borrado ou não atualiza

Ícones borrados ou preenchidos

O borrão geralmente vem de ampliar uma imagem raster pequena ou de um logo muito detalhado em 16px. Corrija isso usando um SVG mais um tamanho de 32px ou maior no ICO, e nunca amplie um 16x16. Um quadrado sólido atrás do seu logo significa que a fonte original não tinha transparência, muitas vezes um JPG.

Ícone antigo ainda aparecendo

Os navegadores armazenam em cache os favicons por dias ou semanas. Tente estes passos nesta ordem:

1. Faça uma atualização forçada da página (Ctrl+F5).
2. Abra /favicon.ico diretamente e atualize a página.
3. Adicione uma string de consulta, como /favicon.ico?v=2.
4. Verifique em uma janela anônima.
5. Confirme se o arquivo retorna HTTP 200 e limpe o cache da sua CDN.

Os ícones da tela inicial do iOS são armazenados em cache por atalho, então os atalhos existentes não mudarão e os usuários precisarão adicionar o site novamente. Para uma nova identidade visual, use um novo nome de arquivo.

Google Search não mostrando

As atualizações levam de dias a semanas, e alterar a URL do ícone pode atrasá-las. Certifique-se de que sua página inicial referencie o ícone com rel="icon" e que ele atenda às regras de tamanho acima. Não há um limite rígido documentado em KB; as regras do Google são sobre dimensões.

Na prática

Comece com um modelo quadrado de 512px ou mais e simplifique-o para o tamanho da aba. Faça upload dos arquivos, depois cole o trecho HTML e o manifesto no seu site, e verifique novamente se o link do manifesto está presente. Por fim, observe o resultado em 16px: se a marca não estiver clara, simplifique-a novamente.

Perguntas frequentes

Eu ainda preciso de um favicon.ico em 2026?

Sim. Navegadores, leitores de feed e bots de pré-visualização de links solicitam /favicon.ico na raiz do site independentemente das suas tags HTML, então é um seguro barato. Agrupe as versões de 16, 32 e 48px em um único arquivo.

Um favicon pode ser um JPG?

Tecnicamente sim, mas PNG ou SVG oferece um resultado muito mais limpo. JPG não tem transparência e apresenta artefatos de compressão, além de que fotos carregam detalhes demais para 16x16 pixels.

Qual deve ser o tamanho de um favicon para o Google Search?

O Google precisa de uma imagem quadrada de pelo menos 8x8px e recomenda algo maior que 48x48px. SVG não é suportado lá, então mantenha um ICO ou PNG declarado com rel=icon na sua página inicial.

Preciso de arquivos PNG separados de 16x16, 32x32 e 48x48?

Geralmente não. Um ICO multi-tamanho cobre esses tamanhos, e um teste de solicitações do Chromium mostrou que PNGs standalone não eram usados quando um ICO estava presente. Firefox e Safari não foram testados.

Por que meu novo favicon não está aparecendo?

Os navegadores armazenam favicons em cache agressivamente por dias ou semanas. Tente uma atualização forçada (hard refresh), abra /favicon.ico diretamente, adicione uma string de consulta ?v=2 ou verifique em uma janela anônima.