App Icon vs Favicon: Qual é a Diferença?
Eles parecem semelhantes, mas cumprem propósitos diferentes. Veja quando usar cada um e como eles trabalham juntos.
Comparação lado a lado
| Aspecto | Favicon | App icon |
|---|---|---|
| Uso principal | Abas do navegador, favoritos, resultados de busca | Tela inicial, alternador de apps, lojas de apps |
| Onde os usuários o veem | Navegadores de desktop, navegadores móveis | Tela inicial do iOS, launcher do Android |
| Tamanhos típicos | 16x16, 32x32, 96x96px | 180x180, 192x192, 512x512px |
| Formato de arquivo | ICO, PNG, SVG | PNG (muitas vezes maskable) |
| Definido em | Tags <link> do HTML | manifest.json |
| Obrigatório para | Todos os sites | PWAs, web apps instaláveis |
O que é cada um
Um favicon (abreviação de "favorite icon") é o pequeno ícone que aparece nas abas do navegador, nos favoritos, no histórico do navegador e nos resultados de mecanismos de busca. É o identificador visual do seu site no navegador.
Um app icon é o ícone maior que aparece na tela inicial do usuário quando ele instala seu web app como um Progressive Web App (PWA). Ele representa seu app como uma aplicação autônoma.
Onde cada um aparece
Favicon
Start hereTodo site precisa de um, PWA ou não
- Identificação na aba do navegador
- Reconhecimento visual em favoritos
- Identidade visual no resultado de busca
- Ícones no histórico do navegador
- Atalhos de desktop (Windows)
- Declarado no HTML: <link rel="icon" href="/favicon.ico">
App icon
Só aparece depois que alguém instala o app
- Launcher da tela inicial
- Alternador de apps / multitarefa
- Selos de notificação
- Listagens em lojas de apps
- Identidade visual na splash screen
- Declarado no manifest.json: "icons": [{"sizes": "192x192"}]
Tamanhos de favicon ao lado de tamanhos de app icon
1. Requisitos de tamanho
Favicons costumam ser pequenos (16x16 a 96x96px) porque aparecem em espaços compactos, como abas do navegador. Precisam ser reconhecíveis em tamanhos minúsculos.
App icons são bem maiores (180x180 a 512x512px) porque são exibidos com destaque nas telas iniciais. Podem incluir mais detalhes e costumam ser projetados com variantes maskable para diferentes formatos de dispositivo.
2. Contexto de uso
Favicons estão sempre visíveis durante a navegação: fazem parte da interface do navegador. Os usuários os veem constantemente ao alternar entre abas e sites.
App icons só aparecem após a instalação. Representam seu app como uma entidade autônoma, separada do navegador. Os usuários tocam neles para abrir seu app em modo tela cheia.
3. Implementação técnica
Favicons são declarados no HTML usando tags <link> no head do documento. Vários tamanhos podem ser especificados para diferentes contextos.
App icons são definidos no manifest.json, que é referenciado pelo HTML. O manifest também inclui outros metadados de PWA, como nome do app, cores de tema e modo de exibição.
Você precisa dos dois?
Sim, você deve ter os dois. Veja por quê.
Favicons são essenciais para todos os sites: eles melhoram o reconhecimento da marca nas abas do navegador e nos resultados de busca.
App icons são obrigatórios se você quer que os usuários instalem seu site como um PWA. Sem eles, os avisos de instalação não aparecem e a experiência na tela inicial fica ruim.
Eles podem compartilhar o mesmo design, mas devem ser otimizados para seus respectivos tamanhos e contextos.
Dicas de design de favicon
Mantenha os designs simples: detalhes se perdem em 16px.
Use alto contraste para melhor visibilidade.
Teste em múltiplos tamanhos (16x16, 32x32, 96x96).
Considere usar SVG para escala nítida.
Garanta que funcione tanto em fundos claros quanto escuros.
Dicas de design de app icon
Projete para no mínimo 192x192px (512x512px recomendado).
Crie variantes maskable para o Android.
Garanta que a zona segura (os 80% internos) contenha os elementos críticos.
Use identidade visual consistente com seu favicon.
Teste em dispositivos reais para melhores resultados.