Padrões favicon 2026
As regras de ícones na web mudaram. Aqui está um guia claro para colocar tudo nos trilhos.
O que entra no stack
Cobertura completa com o pacote moderno de ícones — pensando em navegadores, iOS, Android e PWAs em 2026.
Favicon SVG
Formato principal: escala indefinida e modo claro/escuro por CSS dentro do arquivo.
ICO de reserva
Um arquivo legado 32×32 ou 48×48 para navegadores antigos e certas UIs desktop.
Apple Touch Icon
PNG 180×180 para tela inicial no iPhone, iPad e Safari.
Web Manifest
JSON da PWA que define comportamento e ícones maskable no Android.
Ícones auto-adaptáveis
No favicon SVG dá para usar media queries para o logo continuar legível em UI clara ou escura.
@media (prefers-color-scheme: dark) { path { fill: #ffffff; } }PWA e ícones maskable
PWAs pedem ícones maskable: o SO corta formatos diferentes mantendo sua marca dentro da área segura.
A Perfect Metadata aplica preenchimento de área segura ao montar o pacote — para nada ficar estranho no Android ou ChromeOS.
Implementação padrão
Cole este trecho no <head> do HTML para cobrir o que ferramentas e lojas esperam em 2026.
<!-- Implementação no <head> -->
<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#ffffff">Pronto para publicar?
Gere todos os arquivos em um só fluxo: grátis e focado nos padrões de 2026.