Índice
Explorando os detalhes do favicon
Os principais recursos do favicon são:
- Imagem quadrada pequena: Geralmente 16 × 16 ou 32 × 32 pixels, mas às vezes, eles serão diferentes. Os favicons são sempre quadrados e devem caber em qualquer lugar onde você os colocar.
- Imagens: Os favicons são normalmente iniciais, um logotipo da empresa ou uma imagem que o público pode reconhecer como associada à marca.
- Identificação: Os favicons são projetados para que os usuários identifiquem um site, especialmente se eles tiverem várias guias ou favoritos abertos.
- Identidade: Use favicons para identidade da marca.
As aplicações na vida real incluem:
- Corporações e organizações: O ícone de maçã associado à Apple, o G colorido do Google e o quadrado azul com "in" do LinkedIn são exemplos de favicons.
- eCommerce: Lojas online normalmente usam seu logotipo como favicon.
Para que serve um favicon?
As marcas usam favicons para branding e experiência do usuário.
- Reconhecimento da marca: Como visto nos exemplos reais anteriores, os favicons são uma dica visual para os usuários identificarem seu website.
- Usabilidade: Os favicons são particularmente visíveis quando um usuário tem várias guias abertas e pode navegar de volta para o seu site.
- Profissionalismo: Os usuários notarão se você tiver um ícone padrão; adicione um favicon para um toque profissional rápido.
Onde os favicons aparecem?
Você verá favicons nestes locais online:
- Guias do navegador: Os favicons nas guias do navegador são projetados para que os usuários possam clicar de volta no seu website quando estiverem navegando com várias guias e sites abertos.
- Barra de favoritos: Os favicons aparecem quando os usuários adicionam um site aos favoritos; eles verão o ícone em sua lista.
- Histórico: Quando os usuários verificam seu histórico de pesquisa, os favicons normalmente aparecem.
- Resultados da pesquisa: Alguns mecanismos de busca, como o Google, exibem favicons ao lado dos títulos do site e dos artigos.
Orientações práticas sobre favicons
Considere o seguinte ao criar e usar favicons:
- Mantenha a simplicidade: Evite designs complexos, pois os ícones serão pequenos; a simplicidade melhorará o reconhecimento da marca.
- Escolha elementos reconhecíveis: Escolha um logotipo, suas iniciais ou uma imagem associada à sua marca.
- Use alto contraste: Teste para ver se o favicon está visível no Modo Claro, Modo Escuro e em outros cenários.
- Crie vários tamanhos: Altere os tamanhos e resoluções para diferentes plataformas.
- Use o formato .ico: Este é o formato de favicon mais comum.
Quais são os formatos de arquivo comuns para favicon?
ICO é o principal formato de arquivo de favicon, mas você pode usar outros, se desejar.
- PNG: Usado com navegadores modernos como uma alternativa ao ICO.
- SVG: Sigla para Scalable Vector Graphics. Os SVGs são usados em diferentes tamanhos.
- GIF: Usado para favicons animados; alguns navegadores os suportam. No entanto, eles aparecem como imagens estáticas em outros.
Por que os favicons são importantes?
Considere usar favicons pelos seguintes motivos:
- Branding: Os favicons podem reforçar identidade de marca; é fácil para os usuários esquecerem seu site se você tiver um logotipo CMS padrão.
- Experiência do usuário: Visitantes do site usam favicons para navegação.
- Profissionalismo: Ter um favicon sugere atenção aos detalhes e que você se importa com as pequenas coisas, enquanto ignorar isso pode diminuir a credibilidade.
Os favicons são importantes para SEO?
Os favicons não afetam diretamente o SEO, mas isso não significa que você deva ignorá-los completamente. Os usuários podem clicar no seu site se notarem um favicon nos resultados da pesquisa, o que pode levar a classificações mais altas nos mecanismos de pesquisa; é fácil ignorar ou esquecer um site sem um favicon.
Um favicon pode ser animado?
Os Favicons às vezes podem ser animados via GIF. Alguns navegadores suportam Favicons GIF e outros não, por isso, vale a pena verificar as regras de cada um que você usa.
Quais tamanhos são necessários para um favicon em cada navegador?
Abaixo está uma tabela com os tamanhos de favicon com base na plataforma em que são usados.
| Tamanho (Pixels) | Caso(s) de Uso |
|---|---|
| 16×16 | Guias e favoritos do navegador |
| 32×32 | Guias (às vezes) e outros monitores de alta resolução |
| 48×48 | Ícones da área de trabalho em computadores Windows |
| 64×64 | iOS e outras plataformas |
| 128×128 | Chrome Web Store e outras lojas online |
Conclusão
Favicons podem ajudar identidade de marca e profissionalismo, mas você deve otimizar seus tamanhos para obter os melhores resultados. Os navegadores normalmente usam 32×32, mas tamanhos maiores são necessários para lojas online e outras mídias. Ao criar um favicon, mantenha-o simples e escolha cores que estejam associadas à sua marca. Pense se você deseja usar logotipos, imagens ou ícones.
