O guia definitivo de favicons

O que é um favicon?

No design de sites, favicons são geralmente miniaturas de logotipos de uma empresa ou organização usados para colaborar com o branding, ou gestão de marca. Os favicons aparecem no canto de uma guia do site e incluem o design do logotipo do site que você está visitando. Os favicons são pequenos e têm requisitos específicos. Por isso é essencial saber como criar um favicon para qualquer site que você possua ou gerencie.

Onde os favicons são usados?

Os favicons podem ser encontrados em muitos navegadores web. Os favicons podem estar localizados no lado direito ou esquerdo das guias do navegador, dos resultados do histórico, dos aplicativos na barra de ferramentas e nas barras de pesquisa. O local onde os favicons aparecem geralmente depende do navegador que você está usando. Por exemplo, no Google Chrome os favicons aparecem no lado direito da guia, da sua barra de favoritos, do histórico do navegador e da barra de pesquisa conforme você digita.

Os favicons são importantes?

Sim, os favicons são extremamente importantes, mesmo sendo tão pequenos. Um favicon é frequentemente um dos primeiros logotipos que um visitante verá ao acessar um site, especificamente enquanto o site ainda está em processo de carregamento. Se o seu favicon for colorido ou usar uma imagem exclusiva para transmitir uma mensagem, seus visitantes têm muito mais probabilidade de se lembrar do seu site e da marca que ele representa. Sem um favicon, seu site pode ser fácil de esquecer.

Algumas das vantagens mais evidentes do uso de favicons incluem:

Identidade de marca

Definir e configurar a identidade da sua marca é essencial, especialmente se você estiver entrando em um mercado altamente competitivo ou excessivamente saturado. Ter uma identidade de marca logo de saída com um favicon refinado pode ajudar a diferenciar seu site de sites semelhantes no mesmo setor. Se o reconhecimento da marca é essencial para o seu negócio, não perca a oportunidade de implementar seu próprio favicon.

Identificação de favoritos

Se um usuário adicionar seu site aos favoritos, quais são as chances de localizá-lo novamente com facilidade sem um favicon? O uso de um favicon pode tornar seu site mais reconhecível para quem quiser visitá-lo novamente no futuro.

Experiência de usuário aprimorada

A criação de um site bem-sucedido e uma presença online nos dias de hoje requer mais do que oferecer conteúdo e/ou produtos de qualidade. Proporcionar aos seus visitantes uma experiência de usuário integrada pode ajudar bastante quando se trata de construir e desenvolver uma nova marca comercial online. Um favicon passa uma imagem mais profissional e pode ajudar a solidificar sua marca com credibilidade e excelente reputação junto aos novos visitantes.

SEO (otimização de mecanismos de busca)

Em alguns casos, um favicon bem concebido pode ajudar a impulsionar o SEO de um site. Se o seu favicon for atraente e visualmente cativante, poderá receber mais cliques e atenção do que outros links ou sites concorrentes. Embora nem sempre seja definitivo que você melhore o SEO do seu site com um favicon bem projetado, é possível com o envolvimento suficiente do visitante.

Reputação e credibilidade

A primeira impressão é a que fica, especialmente se você estiver apresentando sua empresa ou marca aos clientes em potencial pela primeira vez. Usar um favicon é uma maneira de transmitir uma mensagem de profissionalismo e autenticidade, que pode ajudar a criar um relacionamento positivo entre você e seus visitantes. O uso de logotipos, esquemas de cores e favicons profissionais também pode transmitir uma mensagem de autenticidade e credibilidade, permitindo que você impulsione sua reputação.

Formatação de favicons

Um guia para favicons pode ajudá-lo na formatação do seu favicon e, ao mesmo tempo, informá-lo sobre os tipos de imagem adequados para esse elemento gráfico. Embora todos os usuários tenham sido obrigados no passado a usar arquivos ICO do Windows para carregar um favicon na tela, agora existem vários navegadores que permitem o uso de arquivos de imagem padrão, incluindo PNG, SVG e GIF.

Os seguintes tipos de arquivos são os mais comuns usados para formatar favicons hoje:

ICO do Windows

Os arquivos ICO do Windows (Ícone do Windows) são os tipos de arquivos mais comuns usados para salvar favicons. Ao procurar favicons gratuitos, em vez de desenhar ou desenvolver o seu próprio, você irá se deparar com bibliotecas de arquivos ICO do Windows. Você também pode encontrar conversores online que permitem fazer upload de seu próprio arquivo de imagem tradicional e convertê-lo em um ICO do Windows padrão para o uso de favicons. Os arquivos tipo ICO do Windows são úteis para ícones de 32 pixels.

PNG

Os arquivos PNG são um tipo de arquivo de imagem extremamente popular que também pode ser usado como favicon sem formatação ou programação adicionais. Um arquivo PNG é altamente recomendado para quem busca resultados de alta qualidade usando ilustrações e imagens tradicionais. Se você estiver interessado em criar um logotipo transparente, mas não quiser usar um arquivo ICO do Windows, o PNG costuma ser a melhor opção.

SVG

As imagens formatadas SVG são arquivos de imagem poderosos que também podem ser usados para criar e mostrar favicons. Embora não sejam carregados tão rapidamente quanto os arquivos JPG e GIF tradicionais, os arquivos SVG são mais universalmente compatíveis com uma ampla gama de navegadores web, desde o Microsoft Edge e o Mozilla Firefox até o Opera.

GIF

Usar um arquivo GIF é possível se você estiver criando um favicon para o seu site. Se estiver pensando em usar um GIF transparente ou animado para o seu favicon, você poderá fazê-lo, dependendo de como optar por fazer upload e apresentar seu favicon.

APNG

Outro formato que pode ser usado ao criar um favicon inclui o APNG. O APNG é semelhante aos arquivos PNG, mas permite mobilidade e diversos movimentos, como um GIF. Os arquivos APNG também são compatíveis com navegadores como o Opera e o Mozilla Firefox.

JPG

Você provavelmente já ouviu falar dos arquivos JPG, mesmo que esteja apenas começando a criar ou desenvolver sites. O JPG é um dos formatos mais comuns usados hoje em dia para salvar fotos e ilustrações por qualquer motivo. No entanto, são raramente usados para criar favicons, já que os JPGs geralmente perdem qualidade ao serem editados e redimensionados. Editar repetidamente um JPG nem sempre resulta no resultado profissional que você pode estar imaginando para o seu logotipo ou favicon.

Diretrizes de tamanho para favicons

Antes de fazer o upload de um favicon que você criou ou tentar usar uma imagem tradicional para ele, é importante saber qual o melhor formato para dimensionar e salvar favicons. Os favicons são de modo geral versões menores ou mais condensadas de logotipos. E quando dizemos pequeno, queremos dizer realmente pequeno. Embora um logotipo clássico possa variar de 50 pixels a mais de 300 a 500 pixels, o tamanho de um favicon começa em 16x16 pixels.

Aqui estão as diretrizes mais comuns usadas para o dimensionamento de favicons.

• 16x16 pixels: Ao desenvolver um favicon, lembre-se de que 16x16 pixels é o tamanho mais comumente usado. Embora 16x16 pixels seja um tamanho de arquivo extremamente pequeno, é útil para exibir logotipos e favicons na internet em barras de pesquisa, guias e no histórico do navegador.
• 32x32 pixels: Os favicons de 32x32 pixels são ideais para quem tem interesse em promover seu site ou conteúdo dentro de uma barra de tarefas. Além disso, esse tamanho carregará melhor para quem usa Mac iOS e navega com o Safari, pois trata-se do tamanho padrão para a seção "Ler mais tarde" do navegador.
• 72x72 pixels: Embora os favicons tradicionais de 16x16 pixels já tenham sido considerados universais, o advento de várias tecnologias e novos dispositivos abriu espaço para mais opções de dimensionamento. Se você estiver visando usuários de celular ou que navegam em iPads, certificar-se de utilizar um favicon de 72x72 pixels é essencial.
• 96x96 pixels: Para quem deseja atrair usuários do Google TV, é altamente recomendável um favicon de 96x96 pixels para evitar esticamento e perda de qualidade ao carregar uma imagem de resolução mais alta.
• 114x114 pixels: Um favicon de 114x114-pixels é ideal para quem usa a versão mais recente do iPhone da Apple, já que os ícones dos aplicativos são maiores e a tela Retina é duas vezes maior. Para impedir que seu favicon seja de baixa qualidade e fique desfocado, use o tamanho apropriado para os canais que você pretende atingir.
• 128x128 pixels: Se você pretende promover seu site ou presença online por meio da Chrome Web Store, poderá fazê-lo com um favicon de 128x128 pixels.
• 195x195 pixels: Embora seja raro, esse tamanho pode ser adequado para quem usa o navegador Opera ou as configurações de Discagem Rápida do Opera para salvar sites preferidos ou favoritos.

Entender os vários tamanhos de favicon mais comumente usados atualmente pode ajudá-lo a determinar qual é o tamanho ideal para o seu favicon. Se estiver ciente das expectativas de formato do seu favicon nos diferentes navegadores web, lojas de aplicativos e dispositivos, você pode minimizar o risco de apresentar sua empresa ou marca com baixa qualidade.

Por que o tamanho do meu favicon é importante?

Criar favicons usando tamanhos diferentes pode ajudar a evitar a perda de qualidade ou resolução quando o ícone carrega para os usuários, estejam navegando no seu site ou tentando acessar seu aplicativo na Chrome Web Store oficial. Se seu favicon for muito pequeno ou de tamanho incorreto, você corre o risco de:

• Atrair atenção negativa para sua marca. Causar uma primeira impressão ruim pode evitar que os usuários deem uma chance ao seu site ou marca, especialmente se uma empresa concorrente causar uma impressão positiva com ilustrações e favicons criados por profissionais.
• Afastar clientes em potencial. Se seu favicon parecer desatualizado, desfocado ou pixelado, os usuários podem não acreditar que você é profissional ou pode ser levado a sério, o que pode resultar em perda de tráfego web, de vendas e, em última instância, de receita de modo geral.

Como criar um favicon

Criar um favicon é fácil, especialmente com a tecnologia atual. Antes de criar um favicon, você precisa ter acesso à internet e a um software de design gráfico que possa redimensionar seu ícone para o tamanho apropriado.

Para começar, siga as diretrizes de criação de favicons abaixo:

1. Pense na imagem que você pretende usar para o seu favicon. Você usará o logotipo padrão da sua marca ou criará uma versão especial do logotipo?
2. Pergunte a si mesmo onde seu favicon será exibido. Por exemplo, se sua loja virtual não tiver um aplicativo, você não precisará se preocupar em dimensionar seu favicon para aplicativos móveis em celulares ou tablets.
3. Escolha o tipo de arquivo que você deseja usar para o seu favicon. Os tipos de arquivos mais comuns para favicons atualmente incluem arquivos ICO do Windows e arquivos SVG, PNG e GIF. Pode ser necessário consultar seu provedor de hospedagem para determinar se existem restrições implementadas com relação ao seu tipo de arquivo preferido.
4. Localize o script para upload de favicons do seu provedor de hospedagem para carregar a imagem que você deseja converter e usar como favicon do seu site. Você também pode optar por usar um terceiro para fazer o upload e gerar um arquivo de favicon que pode ser salvo e carregado no seu servidor web.
5. Faça o upload do seu favicon usando o método apropriado com base nas preferências de favicon e hospedagem do seu site ou aplicativo.

Boas práticas de favicons

Quer esteja apenas começando como desenvolvedor de sites ou simplesmente tentando incorporar um favicon profissional para fins de reputação, temos algumas boas práticas para você ter em mente ao trabalhar com os favicons, tais como:

• Certifique-se de que seja reconhecível. Ao conceber seu favicon, certifique-se de que seja reconhecível, mesmo à distância. Como seu favicon será significativamente menor do que a maioria dos logotipos tradicionais, é melhor usar uma versão condensada e simplificada do seu logotipo, se este for originalmente complexo e muito colorido.
• Opte pela simplicidade. Evite usar um texto complexo ou um fundo intrincado ao criar um favicon, especialmente se for precisar do menor tamanho de favicon.
• Concentre-se no branding. Ao criar seu favicon, pense em como ele será visto e interpretado por seus seguidores existentes e usuários que visitam seu site pela primeira vez. Para isso, certifique-se de que o favicon esteja alinhado às suas diretrizes de estilo de marca atuais.
• Use um fundo transparente. O uso de um logotipo transparente para criar o arquivo do seu favicon é altamente recomendado, já que favicons com cores de fundo podem parecer datados ou muito confusos para alguns. Os favicons transparentes também são muito mais universais e podem ser carregados e compartilhados em qualquer lugar sem interferir nas cores de fundo de um site, navegador ou dispositivo.

Você deve usar um favicon?

O uso de um favicon é altamente recomendado se você estiver construindo um site pessoal, um blog no WordPress, um site para sua empresa local ou mesmo uma presença online para uma marca internacional. Todo mundo que tem um site hoje em dia deve usar um favicon, já que ele pode ajudá-lo a obter:

• Fidelidade à sua marca. Se um de seus objetivos for construir fidelidade à marca, usar um favicon é uma ótima ideia. Os favicons ajudam a transmitir uma mensagem de autenticidade, credibilidade e profissionalismo em qualquer setor e qualquer mercado. Além disso, a cada vez que acessar seu site um visitante verá seu favicon, o que pode ajudá-los a lembrar sua marca ao longo do tempo.
• Sugestões de busca. Sempre que um usuário procura informações que fazem com que o URL do seu site apareça em um navegador da web, seu favicon também aparecerá ao lado do título do seu site. Isso pode direcionar ainda mais tráfego para o site.
• Resultados de buscas. Se seu site aparecer nos resultados de busca de uma página depois que um usuário digitar sua consulta, seu favicon também irá carregar e aparecer. Um logotipo e um favicon visualmente atraentes podem motivar os usuários a saber mais sobre seu site.
• Histórico do navegador. Ao usar um favicon, ele aparecerá no histórico do navegador do seu usuário, facilitando de forma significativa a localização do seu site para quem quiser acessá-lo novamente. Trata-se também de uma ferramenta útil para fins de um branding de longo prazo.

Uso de favicons para construir sua presença online

Seu uso não é novidade, mas os favicons são extremamente úteis em todos os setores quando se trata de construir uma presença online. Não importa se você está criando um portfólio pessoal, lançando uma startup local ou procurando atrair visitantes de todo o mundo para o seu site: usar um favicon pode ser uma ótima providência para estabelecer a identidade da sua marca e divulgar o que você tem a oferecer.

Se estiver procurando uma maneira simples de incorporar favicons em seu próprio site, newsletters por e-mail e campanhas de marketing, não deixe de usar o Mailchimp. O Mailchimp oferece uma solução completa e acessível para gerenciar sua presença online e os favicons que você usa para representar seus e-mails informativos, campanhas de marketing e sites oficiais com facilidade.