1001Ferramentas
🌐 Geradores

Gerador de Pacote Completo de Favicon

A partir de uma imagem, gere zip completo com ICO, favicon-16/32, apple-touch, Android Chrome 192/512 e site.webmanifest para PWA.

O zip contém: favicon.ico, favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png (180x180), android-chrome-192x192.png, android-chrome-512x512.png e site.webmanifest.

O pacote completo de favicon: todo formato, todo dispositivo

Um site moderno não tem um favicon — tem um pacote. Cada navegador, sistema operacional e cenário PWA pede um arquivo um pouco diferente: Chrome prefere SVG, Safari precisa do apple-touch-icon, os tiles do Microsoft Edge leem browserconfig.xml e o ícone da tela inicial do Android vem do Web App Manifest. Servir apenas um favicon.ico 16x16 significa miniatura borrada em Retina, ícone feio na tela inicial do iPhone e o quadradinho cinza no menu Iniciar do Windows.

O que vai no pacote completo

  • favicon.ico — ICO multi-resolução com 16, 32 e 48 px, ainda exigido por Edge antigo e favoritos do Safari desktop
  • favicon.svg — vetorial, escala infinita, suporta dark mode via prefers-color-scheme
  • favicon-16x16.png e favicon-32x32.png — fallbacks raster explícitos
  • apple-touch-icon.png — 180x180, usado quando o usuário do iOS toca em Compartilhar → Adicionar à Tela de Início
  • android-chrome-192x192.png e android-chrome-512x512.png — referenciados pelo Web App Manifest para instalar como PWA
  • mstile-150x150.png — tile da Microsoft fixado no menu Iniciar do Windows 10/11
  • safari-pinned-tab.svg — SVG monocromático para abas fixadas no Safari (macOS legado)
  • site.webmanifest — manifesto PWA com icons[], theme_color, background_color
  • browserconfig.xml — configuração dos tiles da Microsoft

Markup HTML para colar no <head>

<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">

A ordem importa pouco — o navegador escolhe o melhor match para o tamanho pedido. O SVG ganha onde for suportado; os PNGs e o ICO cobrem o resto. Sirva tudo com Cache-Control: max-age=31536000, immutable via CDN.

Ferramentas e integrações

  • RealFaviconGenerator (Philippe Bernard) — referência de facto, inclui validador
  • Favicon.io — mais simples, ideal para favicons de texto ou emoji
  • Favic-o-Matic — antigo mas entrega todas as variantes de uma vez
  • favicon-webpack-plugin / vite-plugin-favicon — geram o pacote no build a partir de uma única fonte
  • WordPress — add_theme_support('custom-logo') mais colocar o pacote na raiz do tema

Dark mode, marca e erros comuns

Só o SVG reage ao dark mode — embuta <style>@media (prefers-color-scheme: dark){...}</style> dentro do SVG. ICO não consegue, então um logo escuro sobre fundo claro perde contraste na aba escura do Chrome. O favicon deve parecer uma miniatura do logo, não um símbolo diferente — consistência de marca é o erro mais comum. Outros recorrentes: esquecer o apple-touch-icon.png (resulta em screenshot borrado de baixa resolução na tela inicial do iOS), enviar logo quadrado sem padding (Apple corta uma margem segura de 12%) e esquecer de atualizar o theme_color do manifesto quando a paleta muda.

Perguntas frequentes

O ICO legado ainda é necessário em 2026? Sim — favoritos do Safari no macOS desktop e a cauda longa de navegadores corporativos derivados do IE ainda pedem /favicon.ico por padrão. É também o único arquivo que a maioria dos crawlers procura na raiz.

Quantos tamanhos de PNG eu realmente preciso? Mínimo de quatro a seis: 16, 32, 180 (apple-touch), 192 e 512 (Android/PWA). Pular 192/512 quebra o banner de instalar como PWA.

Como valido a instalação? Cole a URL publicada no validador do realfavicongenerator.net — ele lista o veredito por plataforma em 30 segundos.

SVG sozinho não basta, já que os navegadores suportam? Não. Slack, WhatsApp, Discord e muitos crawlers só leem ICO ou PNG no link preview. Envie os dois.

Ferramentas Relacionadas

✒️

Gerador de Manuscrito

Converte texto digitado em uma imagem com aparência de letra manuscrita. Útil para tornar trabalhos digitais mais pessoais.
📋

Gerador de Currículo

Preenche um currículo simples (CV) imprimível em A4 a partir de formulário com dados pessoais, formação e experiência.
🔖

Gerador de Favicon

Gera favicon a partir de texto/emoji em todos os tamanhos comuns (16, 32, 48, 64, 192, 512). Download como PNG.