Melhores Práticas
Aprenda como criar favicons eficazes que funcionam bem em todas as plataformas e navegadores
Diretrizes de Design
Comprimento do Texto
Caracteres únicos funcionam melhor. Os favicons são exibidos em tamanhos muito pequenos (16×16 a 32×32 pixels), então um ou dois caracteres são mais legíveis. Textos mais longos ficam ilegíveis e confusos.
Seleção de Fonte
Escolha fontes que permaneçam claras em tamanhos pequenos:
- Fontes sans-serif em negrito têm melhor desempenho do que fontes finas ou decorativas
- Fontes geométricas (como Bebas Neue, Oswald) mantêm clareza quando reduzidas - você pode carregá-las do Google Fonts
- Evite fontes script ou manuscritas, a menos que use caracteres únicos muito grandes
- Fontes personalizadas do Google Fonts são totalmente suportadas e funcionam em todos os formatos de exportação
Contraste de Cores
Alto contraste é essencial. Certifique-se de que a cor do texto se destaque claramente contra o fundo. Texto claro em fundos escuros (ou vice-versa) funciona melhor. Evite tons semelhantes que se misturam em tamanhos pequenos.
Simplicidade
Mantenha simples. Designs complexos, gradientes ou detalhes finos são perdidos em tamanhos de favicon. Concentre-se em um símbolo ou letra claro e reconhecível que represente sua marca.
Recomendações Técnicas
Seleção de Formato
SVG (Scalable Vector Graphics): SVG (Gráficos Vetoriais Escaláveis): Use para navegadores modernos. O SVG escala perfeitamente em qualquer tamanho sem perda de qualidade. Melhor escolha para displays de alta resolução e aplicativos web progressivos.
PNG: PNG: Use como fallback para navegadores antigos ou quando precisar de uma imagem raster de tamanho fixo. O PNG 256×256 funciona bem para a maioria dos casos de uso.
ICO: ICO: Formato legado, mas ainda necessário para alguns navegadores antigos e atalhos do Windows. Inclua para máxima compatibilidade.
Requisitos de Tamanho
Diferentes plataformas requerem tamanhos diferentes:
- 16×16, 32×32, 48×48: Ícones padrão de abas do navegador
- 96×96: Atalhos de desktop e favoritos
- 180×180: Ícone de toque Apple (tela inicial iOS)
- 192×192, 512×512: Ícones de Aplicativo Web Progressivo (PWA)
O pacote "Baixar Tudo" inclui todos os tamanhos necessários para compatibilidade completa.
Compatibilidade do Navegador
Abordagem moderna: Use SVG como formato principal com fallbacks PNG/ICO. A maioria dos navegadores modernos (Chrome, Firefox, Safari, Edge) suporta favicons SVG. Para máxima compatibilidade, inclua os formatos SVG e ICO no seu HTML.
Testes
Sempre teste seu favicon em diferentes navegadores e dispositivos. Verifique como ele aparece em abas do navegador, favoritos, telas iniciais móveis e atalhos de desktop. Certifique-se de que permanece reconhecível nos tamanhos menores.
Erros Comuns a Evitar
- Usar muito texto que fica ilegível em tamanhos pequenos
- Escolher combinações de cores de baixo contraste que se misturam
- Usar designs excessivamente complexos com detalhes finos
- Esquecer de incluir múltiplos tamanhos para diferentes plataformas
- Não testar em diferentes navegadores e dispositivos
- Usar fontes ou conteúdo protegidos por direitos autorais sem licenciamento adequado