Gerador de Favicon, Ícones e Manifesto PWA
Gere ficheiros binários favicon.ico (16x16, 32x32, 48x48), ícones iOS Apple Touch, ícones Android PWA com zona de segurança de 80% e site.webmanifest.
Ferramentas OnlineZona de Segurança de Ícone Mascarável PWA & Geometria
20%+ mantém o seu logótipo dentro do Círculo da Zona de Segurança de 80% no Android
Painel de Pré-visualização Multiplataforma em Tempo Real
Simulação simultânea para Resultados Google Search (SERP), Separadores do Navegador, Ecrã Principal iOS e Máscaras Android
Veja em tempo real como o Google Search apresenta o seu favicon circular de 48×48 px ao lado do endereço do domínio.
Veja em tempo real como o Google Search apresenta o seu favicon circular de 48×48 px ao lado do endereço do domínio.
A transparência é automaticamente preenchida com a sua cor sólida para que o iOS nunca converta o canal alfa em preto opaco.
Metadados do Manifesto de Aplicação Web (site.webmanifest)
<!-- Standard Favicon & Google Search (48x48 multiple) -->
<link rel="icon" href="/favicon.ico" sizes="48x48" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png" />
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png" />
<!-- Apple iOS Home Screen -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<!-- Android & PWA Web App Manifest -->
<link rel="manifest" href="/site.webmanifest" />
<meta name="theme-color" content="#4f46e5" />Tabela Oficial de Referência de Tamanhos de Favicon, Apple Touch Icon e Manifesto PWA
Especificação técnica completa conforme Google Search Central, Apple iOS Human Interface Guidelines e W3C Web App Manifest
| Nome do Ficheiro | Resolução (px) | Padrão de Codificação | Plataforma de Destino e Contexto | Regra Técnica de Conformidade |
|---|---|---|---|---|
| favicon.ico | 16×16, 32×32, 48×48 | Contentor Binário Microsoft ICONDIR | Navegadores Clássicos e Indexador Google Search | Deve incorporar obrigatoriamente uma camada binária real de 48×48 px; nunca renomeie um simples PNG para .ico. |
| favicon-16x16.png | 16×16 px | PNG RGBA de 32 bits | Separadores de Navegador Desktop Padrão (1x) e Favoritos | Silhueta de elevado contraste essencial para leitura clara em 16 píxeis. |
| favicon-32x32.png | 32×32 px | PNG RGBA de 32 bits | Separadores de Navegador em Ecrãs Retina (2x HiDPI) | Ícone principal de separador em monitores modernos de alta densidade. |
| favicon-48x48.png | 48×48 px | PNG RGBA de 32 bits | Resultados de Pesquisa Google (SERP) Mobile e Desktop | Limiar mínimo exigido pela Google Search Central (múltiplo exato de 48 px: 48×48, 96×96, 144×144). |
| favicon-96x96.png | 96×96 px | PNG RGBA de 32 bits | Apresentação Google SERP de Alta Densidade e Atalhos Desktop | Múltiplo 2x de 48 px recomendado para um recorte circular nítido nos resultados de pesquisa. |
| apple-touch-icon.png | 180×180 px | PNG Opaco de 24 bits | Ecrã Principal de Apple iPhone e iPad (Web Clips) | Exige fundo sólido opaco; o iOS converte qualquer píxel transparente em preto puro (#000000). |
| android-chrome-192x192.png | 192×192 px | PNG 32 bits (purpose: any) | Ecrã Principal e Gaveta de Aplicações Android | Critério obrigatório nas auditorias Google Lighthouse para instalação de aplicações PWA. |
| android-chrome-512x512.png | 512×512 px | PNG 32 bits (purpose: any) | Ecrã de Arranque (Splash Screen) Android PWA e WebAPK | Gráfico mestre de alta resolução obrigatório para gerar o ecrã de boas-vindas. |
| maskable-icon-512x512.png | 512×512 px | PNG Opaco (purpose: maskable) | Formas Adaptativas de Android (Círculo, Squircle, Gota) | Os elementos visuais principais devem ficar dentro do círculo central seguro de 80% (mínimo 20% de margem interna). |
Deve incorporar obrigatoriamente uma camada binária real de 48×48 px; nunca renomeie um simples PNG para .ico.
Silhueta de elevado contraste essencial para leitura clara em 16 píxeis.
Ícone principal de separador em monitores modernos de alta densidade.
Limiar mínimo exigido pela Google Search Central (múltiplo exato de 48 px: 48×48, 96×96, 144×144).
Múltiplo 2x de 48 px recomendado para um recorte circular nítido nos resultados de pesquisa.
Exige fundo sólido opaco; o iOS converte qualquer píxel transparente em preto puro (#000000).
Critério obrigatório nas auditorias Google Lighthouse para instalação de aplicações PWA.
Gráfico mestre de alta resolução obrigatório para gerar o ecrã de boas-vindas.
Os elementos visuais principais devem ficar dentro do círculo central seguro de 80% (mínimo 20% de margem interna).
Como Gerar e Instalar Favicons, Ícones iOS e Manifesto PWA
Fluxo de trabalho em 5 passos para conformidade total com a Google Search Central e dispositivos móveis
Escolha a Fonte Gráfica no Estúdio 3 em 1
Carregue um logótipo SVG ou PNG existente, escreva um monograma de 1 a 3 letras com tipografia personalizada ou selecione um emoji vetorial.
Verifique o Contraste no Modo Escuro e a Zona de Segurança
Observe o detetor automático de invisibilidade em separadores escuros e ajuste o controlo de margem interna (20%+ para Android Maskable) dentro do círculo de 80%.
Inspecione as 4 Pré-visualizações Multiplataforma ao Vivo
Analise em tempo real como o ícone surge nos resultados Google Search (mobile e desktop), separadores claros e escuros, squircle iOS 180×180 e máscaras Android.
Configure o Manifesto Web e Transfira o Pacote ZIP
Defina o nome da aplicação e as cores de tema e clique em Transferir Pacote Completo de Ícones (.ZIP) para obter todos os 10 ficheiros prontos para produção.
Extraia os Ficheiros na Raiz Pública e Cole o Código
Coloque os ficheiros na pasta public/ do seu servidor e copie com um clique as tags HTML5 <head> ou o objeto Metadata nativo para Next.js App Router.
Codificação Binária 100% no Navegador e Privacidade Total da Marca
Todo o redimensionamento em HTML5 Canvas, a construção binária dos cabeçalhos ICONDIR, a análise de luminância de píxeis e o empacotamento ZIP são processados exclusivamente na memória RAM local do seu dispositivo. Os seus logótipos nunca são enviados para servidores externos.
Perguntas Frequentes (Padrões Favicon, Apple Touch Icon e PWA)
Respostas técnicas sobre indexação no Google Search, contentores binários .ICO e ícones mascaráveis
Q:Qual é a vantagem de incluir simultaneamente favicon-48x48.png e favicon-96x96.png no código de instalação?
A Google Search Central utiliza a resolução de 48×48 píxeis como exigência mínima obrigatória para indexar o ícone nos resultados de pesquisa, mas prefere o ficheiro de 96×96 píxeis (exatamente 2x) para o apresentar com nitidez máxima em telemóveis modernos com ecrãs OLED e Retina.
Q:Porque é que o Google Lighthouse reprova uma aplicação PWA se faltar o ícone de 192×192 ou 512×512 píxeis?
O motor de instalação do Chrome no Android utiliza o ficheiro de 192×192 px para criar o atalho no ecrã inicial e na gaveta de aplicações, enquanto o ficheiro de 512×512 px é indispensável para desenhar automaticamente o ecrã de arranque (Splash Screen) enquanto a aplicação carrega.
Q:Para que serve o campo Caminho do Diretório de Ícones na configuração do manifesto?
Por padrão, os ficheiros ficam na raiz pública do site (/), mas muitas equipas preferem organizá-los numa subpasta dedicada como /icons/ ou /assets/favicons/. Ao alterar esse campo, o nosso gerador atualiza instantaneamente todos os caminhos dentro do site.webmanifest, do HTML5 <head> e do código Next.js.
Q:Porque é que o ficheiro clássico favicon.ico continua a ser indispensável no desenvolvimento web atual?
Muitos leitores de feeds RSS, gestores de favoritos corporativos, ferramentas de monitorização e versões antigas de navegadores fazem um pedido direto a /favicon.ico sem sequer lerem o código HTML da página. Entregar um contentor binário real garante compatibilidade universal sem erros 404 nos registos do servidor.
Q:O botão Reflexo de Vidro Ambiental na pré-visualização iOS altera o ficheiro apple-touch-icon.png exportado?
Não. Esse botão serve apenas para simular no painel de pré-visualização como a iluminação do sistema iOS interage visualmente com as cores do seu ícone. O ficheiro apple-touch-icon.png (180×180 px) incluído no pacote ZIP é exportado limpo, sem reflexos artificiais, cumprindo as diretrizes oficiais da Apple.
O que é Gerador de Favicon, Ícones e Manifesto PWA?
Quem desenvolve para a web sabe que os pequenos detalhes visuais definem a confiança do utilizador logo no primeiro segundo. Quando um site apresenta um ícone desfocado no separador do navegador, um globo cinzento genérico nos resultados do Google ou um quadrado preto ao ser guardado no ecrã do iPhone, toda a credibilidade técnica da plataforma sofre. Isto acontece porque os sistemas operativos modernos exigem ativos gráficos distintos: a Google Search Central requer múltiplos exatos de 48×48 píxeis, os ecrãs Retina de computador utilizam camadas de 32×32 e 96×96 px, o iOS exige um ícone opaco de 180×180 px sem transparência alfa, e o Android aplica máscaras adaptativas que cortam até 20% das bordas nas aplicações PWA. O Gerador de Favicon, Ícones e Manifesto PWA resolve todo este fluxo de engenharia 100% no seu navegador através das APIs nativas HTML5 <canvas>, ArrayBuffer e DataView.
Caso Prático: Modernização de uma Plataforma SaaS de Logística e Gestão de Frotas
Uma equipa de engenharia responsável por um painel web de gestão logística utilizado tanto em monitores de escritório como em tablets Android identificou três falhas visuais: o emblema cinzento-carvão transparente (luminância relativa de apenas 10,2%) desaparecia nos separadores em Modo Escuro; o antigo ficheiro favicon.ico continha apenas 16×16 píxeis (sendo ignorado pelo Googlebot); e o atalho instalado nos tablets Android cortava as letras laterais do logótipo. Ao carregar o vetor original no estúdio acima, aplicar um fundo sólido Azul Celeste (#0284C7) e configurar 21% de margem interna na zona de segurança, a equipa gerou um pacote ZIP de 10 ficheiros com apenas 19,7 KB, passando imediatamente na auditoria PWA do Google Lighthouse.
Matriz de Conformidade Técnica e Desempenho por Dispositivo (Benchmark 19,7 KB)
| Ficheiro Gerado | Resolução & Peso | Estrutura Binária e Alfa | Problema Técnico Resolvido |
|---|---|---|---|
| favicon.ico | 16, 32, 48 px (4,5 KB) | Cabeçalho ICONDIR 54 bytes + 3 vistas | Indexação imediata na pesquisa Google e zero erros 404 |
| favicon-48x48.png & 96x96.png | 48² & 96² px (3,3 KB) | PNG RGBA 32 bits (múltiplos 1x e 2x) | Recorte circular nítido nos resultados móveis da Google |
| apple-touch-icon.png | 180×180 px (4,9 KB) | PNG opaco 24 bits com fundo sólido | Impede que o iOS converta áreas transparentes em preto puro |
| maskable-icon-512x512.png | 512×512 px (7,0 KB) | Círculo seguro 80% + 21% margem | Evita cortes em máscaras de círculo, gota ou squircle no Android |
Vantagens da Codificação Binária Local no Navegador
- Contentor Binário
ICONDIRGenuíno: Em vez de renomear um PNG, o nosso motor escreve o cabeçalho Microsoft de 6 bytes e indexa internamente as resoluções de 16×16, 32×32 e 48×48 píxeis num verdadeiro ficheirofavicon.ico. - Auditoria Automática de Contraste (Modo Escuro e Claro): Analisa a luminância relativa ITU-R BT.709 dos píxeis visíveis e alerta-o caso o logótipo corra o risco de desaparecer nos separadores do navegador.
- Privacidade Total sem Uploads: Todo o processamento gráfico e empacotamento ZIP ocorre exclusivamente na memória RAM local do seu dispositivo.
História e Origem
A história do favicon começou em março de 1999, quando a Microsoft lançou o Internet Explorer 5 com uma funcionalidade discreta que procurava um ficheiro chamado favicon.ico na raiz do servidor sempre que um utilizador adicionava uma página aos «Favoritos». Como o navegador só descarregava o ícone no momento em que o site era guardado nos favoritos, os administradores de sistemas rapidamente perceberam que podiam contar quantas pessoas tinham guardado o seu site apenas analisando os registos do servidor! Em 2007, o lançamento do primeiro Apple iPhone elevou o padrão visual ao introduzir o ficheiro apple-touch-icon.png, permitindo fixar atalhos web no ecrã principal com a nitidez de uma aplicação nativa. Mais tarde, o consórcio W3C oficializou o Manifesto de Aplicação Web (site.webmanifest) e a zona de segurança de 80% para ícones mascaráveis no Android, consolidando o padrão multiplataforma atual.