Criar favicon.ico a partir de SVG ou PNG em várias resoluções
Empacote vários tamanhos para navegadores clássicos e atalhos do Windows — sem brigar com receitas antigas do ImageMagick.
Mais utilitários que combinam com este guia:
Por que isso importa
Navegadores ainda pedem /favicon.ico mesmo quando o manifest declara tiles PNG/WebP modernos. Windows fixa sites com recursos .ico multi-tamanho para atalhos nítidos em barras HiDPI. Indie hackers em sites estáticos precisam de um passo rápido entre export Figma e pasta public/ — idealmente sem enviar arte com muita PI.
Três cenários reais
Gere ICO combinado com entradas 16–256 px a partir de um glifo SVG nítido.
Menos 404 em bots legados
Forneça ICO junto com PNG para portais compatíveis com IE ainda exigidos pela TI.
Atalhos de desktop consistentes
Substitua conjuntos PNG multi-arquivo por um ICO na hospedagem de docs (GitHub Pages).
Um único artefato commitado
Passo a passo
Abra SVG para ICO.
Prepare um master quadrado
Ícones leem melhor 1:1 — recorte padding extra primeiro com corte de imagem se precisar.
Envie SVG (ou raster compatível)
Fontes vetoriais escalam bem para densidades ICO — converta traços em contornos se traços finos sumirem.
Selecione tamanhos embutidos
Bundles típicos incluem 16, 32, 48 e 256 px — adicione 24/64 se diretrizes de tile Windows exigirem.
Pré-visualize cada camada
Teste glifos monocromáticos em 16 px — simplifique geometria se detalhes virarem borrão.
Baixe `favicon.ico`
Coloque na raiz do site e referencie com
<link rel="icon" href="/favicon.ico" sizes="any">para ampla compatibilidade.
Dicas avançadas
- Associe PNG/WebP com
<link rel="icon" type="image/png">para navegadores modernos mantendo ICO como rede de segurança. - Gere tamanhos PNG de fallback via SVG para PNG para arrays
iconsdo manifest. - Quebre cache após redesign (
favicon.ico?v=20260502) quando TTL da CDN teimar.
Armadilhas comuns
Erro comum
Arte hiperdetalhada
Entradas ICO abaixo de 32 px punem gradientes intrincados — favoreça silhuetas marcadas.
Erro comum
Quirks de transparência
Alguns contextos Windows achatam ICO transparente em preto — teste pinagem em temas escuros.
Erro comum
MIME errado na CDN
Garanta image/x-icon ou image/vnd.microsoft.icon — respostas mal rotuladas confundem crawlers.
Quando esta não é a ferramenta certa
- Pipelines PWA completos: geradores
@vite-pwaou orquestradores de ícones Android maskable. - Favicons animados: suporte ICO animado é legado — modere truques modernos e meça CPU.
.icnsmacOS: fluxos de export separados fora do escopo ICO.
FAQ
Meus assets de marca são enviados?
Sem ida ao servidor — geração fica na sessão do navegador como outras utilidades de imagem MoreKits.
Tamanhos máximos recomendados?
Empacotar camadas demais aumenta peso — prefira conjuntos enxutos cobrindo desktop + menu Iniciar.
Posso partir de PNG em vez de SVG?
Sim se masters PNG já existirem — SVG segue ideal por escalabilidade antes de rasterizar cada camada ICO.
Próximos passos
- Comprima PNGs de marketing após export com o compressor de imagens.
- Audite cores com o seletor de cores.
- Documente deploy do favicon na checklist de hospedagem estática junto com
robots.txt.