Ir para conteúdo principal

Boas práticas para tamanho de favicons

Os favicons aparecem como um ícone do navegador e em outros locais. Leia este post para saber mais sobre as melhores práticas relacionadas ao dimensionamento de favicons.

Os favicons são uma parte dos ativos da internet que todo empresário deve aproveitar. Observe os sites que você usa. Há um ícone na guia ao lado do nome? Isso é um favicon e significa muito. Embora muitas empresas não tenham prestado atenção a isso, um favicon faz uma declaração sobre você e sua marca.

Para saber mais sobre favicons, incluindo por que eles são importantes e as melhores práticas de tamanho de favicon, continue lendo.

O que é um favicon?

Um favicon é um ícone do navegador que representa sua marca. A maioria das pessoas presta atenção aos ícones aparecem na guia ao lado do nome de uma empresa, mas também estão em páginas de resultados de busca, barras de ferramentas, listas de marcadores, barras de endereços e outras áreas na web. Eles se tornaram tão cruciais para a identidade da marca e SEO que também estão nos resultados da pesquisa móvel.

Os favicons são um ótimo elemento de design que teve um início muito interessante. Eles costumavam ser enterrados no diretório-raiz de um site quando ainda existia o Internet Explorer 5. Eles também costumavam rastrear o número de vezes que um visitante chegava a um site.

Se você tiver um site, deve ter um favicon para sua página de destino. Na verdade, páginas de destino independentes também precisam de favicons para aumentar a conscientização da marca. Ele aumenta o nível de profissionalismo que você está apresentando ao público e, quando as pessoas veem seu favicon, elas devem se lembrar disso.

Onde os favicons aparecem?

Aqui estão apenas alguns lugares onde você encontrará favicons:

  • Guias do navegador
  • Histórico do navegador
  • Barra de pesquisa
  • Aplicativos da barra de ferramentas
  • Menu suspenso do Histórico do navegador
  • Recomendações da barra de busca
  • Menu suspenso dos Favoritos

Onde quer que você tenha uma presença on-line, é importante ter um favicon nesse ponto de contato.

Embora um favicon seja apenas uma pequena representação da sua marca, ele é importante. Um dos principais objetivos de uma empresa e marca é ganhar confiança e lealdade do consumidor. Quanto mais chances eles conseguirem ver sua impressão, mais eles começarão a reconhecer e esperar vê-lo.

Todo criador de sites deve integrar um favicon ao design do site e, se você estiver usando um criador de sites de arrastar e soltar, ele deve ter um espaço onde você mesmo possa fazer upload de um favicon. Aqui estão motivos adicionais pelos quais os favicons são uma peça importante de ativos para a sua marca:

Fortalece a identidade da marca

Uma marca coesa trabalha maravilhas com o seu público-alvo. Os usuários do seu site ou loja on-line olham tudo. Um favicon funciona a seu favor falando com a voz da sua marca sem pronunciar uma palavra ou precisar de um anúncio. Por padrão, o favicon é uma extensão da sua marca.

Melhora a experiência do usuário

O favicon ajuda os usuários a encontrar seu site facilmente em um mar de outras guias ou aplicativos. Isso facilita que eles voltem várias vezes. Em um dispositivo móvel, o favicon tem um impacto definitivo e duradouro. Os favicons podem ajudar a melhorar o SEO de maneiras sutis. Quando você tem um favicon nas guias do seu navegador, nos arquivos de histórico e nos seus favoritos, os usuários se envolverão continuamente com o seu site. Isso aumenta as interações, o que pode melhorar seu SEO geral.

Seu SEO também é aprimorado porque o favicon oferece uma vantagem competitiva quando aparece em marcadores. Se o seu site não tiver um favicon, ele pode não ser marcado em um navegador como o Chrome porque ele extrai certos sinais de classificação de pesquisa de sites marcados na web.

Adiciona um elemento de credibilidade e profissionalismo

Já foi mencionado antes, mas o favicon mostra que você se preocupa com sua marca, como seu público vê sua marca e como o seu negócio é profissional. Isso dá aos usuários uma sensação de confiança de que eles estão com uma marca na qual podem confiar.

Inscreva‑se para obter mais dicas de marketing diretamente na sua caixa de entrada.

Qual é o melhor tamanho de favicon?

As dimensões do Favicon variam de acordo com onde serão usadas. O tamanho de favicon mais comum é de 16x16 pixels. No entanto, há lugares onde o tamanho do favicon precisa ser um pouco maior. Aqui está uma boa análise das dimensões do favicon e seus usos em pixels:

  • Favicons de navegador - 16x16
  • Ícones de atalho da barra de tarefas – 32x32
  • Ícones de atalho da área de trabalho – 96x96
  • Ícones Apple Touch – 180x180
  • Dimensionamento do WordPress – 512x512

Pode parecer estranho que tantos tamanhos diferentes de favicon sejam necessários, mas há muitas maneiras pelas quais o tamanho de um favicon pode mudar com base na plataforma e sua interface de usuário.

Uma das coisas mais importantes a se lembrar sobre a criação de um favicon é que ele deve ser visível e nítido. É importante usar uma versão de alta qualidade do seu logotipo. Também é importante considerar o tamanho de um favicon para ter a melhor representação da sua marca.

Então, o que é necessário para fazer um favicon? Pense em como você quer que seu favicon pareça. Muitas marcas têm um único logotipo que é usado para certas coisas. Criar um favicon especial que se alinhe com a sua marca é uma ótima ideia. Embora as pessoas possam achar que um favicon é apenas uma versão menor do seu logotipo principal, ele pode ser muito mais do que isso. Fazer disso parte dos esforços criativos da sua marca mantém as coisas coesas e causa impacto.

Tipos de arquivo de favicon

Uma das coisas mais importantes a considerar ao criar um favicon para seu site e usá-lo na web é o tamanho do favicon com o qual você deve trabalhar. Dependendo de onde seu favicon irá aparecer, o formato é importante. Esses tipos de arquivos são usados para criar favicons duradouros que são brilhantes e nítidos:

  • SVG: O SVG costumava ser uma opção secundária, mas tornou-se muito popular no espaço criativo. Ele não era amplamente suportado em navegadores, mas as coisas estão se movendo em uma direção positiva. Os navegadores também podem exibir GIFs como favicons, mas eles são difíceis de enxergar. Os arquivos SVG são conhecidos por fornecer imagens de alta qualidade sem comprometer a aparência, velocidade ou desempenho do site.
  • PNG: Os arquivos PNG são muito populares para criar favicons, pois esse é um formato de arquivo amplamente usado pelos criadores. Eles são leves e carregam rapidamente. Ao usar designs com fundos transparentes, este é o formato a ser usado.
  • JPG: Os arquivos JPG geralmente não são usados para favicons, pois não têm a mesma qualidade de alto nível que um PNG.
  • ICO do Windows: Este era o tipo de arquivo original e ainda é usado por designers. Esse tipo de arquivo pode ter várias profundidades e resoluções de bits.

Ao criar um favicon, há algumas regras que você deve seguir para obter os melhores resultados de seus esforços. Você também deve usar um gerador favicon. Essas ferramentas converterão sua imagem para o formato certo para download. Aqui estão alguns geradores de favicon populares a considerar:

  • Gerador de ícones pata Favicon.ico e para aplicativos: Um PNG ou JPG pode ser carregado para ser transformado em ICO ou PNG em vários tamanhos. Essa é uma maneira simples e fácil de gerar favicons para uma variedade de plataformas diferentes.
  • Favikon: Este gerador é muito fácil de usar. Faça upload da sua imagem, corte-a e baixe-a em formato PNG ou ICO para usar. Infelizmente, este gerador produz apenas tamanhos de 16x16 pixels. Se você precisar de algo maior, ele não funcionará.
  • Favicon.io: Essa ferramenta pode ajudar a criar um favicon totalmente novo do zero ou um emoji, logotipo ou imagem. Os usuários podem visualizar o favicon em três tamanhos diferentes para download.

Aqui estão dicas adicionais para se ter em mente ao determinar o design e o tamanho de um favicon:

Simplifique

Ao criar um favicon, é bom considerá-lo como uma espécie de extensão do seu logotipo. Ele deve espelhar a imagem da sua marca. Isso significa que você deve considerar o espaço. Você deve garantir que é brilhante e atraente. Se você tem um logotipo baseado em palavras para a sua marca e quer se manter totalmente autêntico, é melhor criar um favicon com a primeira letra da palavra. Também é importante manter os elementos centrais intactos para obter a mesma aparência, sensação e coesão.

Se você tiver um logotipo de marca, o espaçamento também é um problema. Essas são as melhores representações, pois você pode não ter que fazer muito. Um logotipo icônico tem uma imagem da marca e o texto da marca. Nesses casos, apenas a imagem da marca é geralmente usada para o favicon. A compatibilidade do navegador também é um fator, pois todos eles têm requisitos diferentes. Lembre-se sempre de ter em mente o tamanho do favicon.

Represente a sua marca

Esta é uma representação da sua marca e deve ser alinhada coesamente com as suas cores e estratégia. Esse visual deve continuar como parte do site usando a linguagem visual e de voz da sua marca. O esquema de cores deve se misturar, sem esforço, ao design. Seu favicon pode ser exibido em fundos diferentes que podem variar do que você está acostumado. É importante testar o favicon em fundos pretos, cinzas e brancos antes de finalizar o design. Isso evitará ter que fazer trabalho adicional.

Evite texto

Textos devem ser evitados a todo custo. Como o favicon é tão pequeno, será muito difícil ler o texto. Utilizar a primeira letra do nome da marca em um logotipo é inteligente e pode ser projetado para adicionar um toque adicional à marca. Se o texto precisar ser usado, ele deve ter apenas de um a três caracteres. Se você puder usar iniciais para obter o mesmo efeito, essa também é uma boa ideia. O objetivo é fortalecer, não diminuir, a marca.

Observações finais

Agora você já entendeu porque os favicons são uma parte tão importante da sua marca e como eles podem ajudar a posicionar sua marca para longevidade com uma aparência profissional. Preste atenção para os locais onde os favicons aparecem e como o tamanho pode afetar a sua aparência. O design geral do favicon deve considerar a simplicidade e a representação da marca.

Você pode criar um site, loja on-line e muito mais usando o estúdio de conteúdo da Mailchimp. Confira os muitos recursos oferecidos pela Mailchimp que trabalham juntos para melhorar sua marca e, ao mesmo tempo, projetar um visual coeso e profissional em todos os seus ativos da web.

Compartilhar este artigo