O que é favicon e porque você precisa de um

Atualizado em: Março 2024

Ao criar um logo, muitas pessoas tendem a ignorar um toque final que, embora pequeno em tamanho, pode fazer uma grande diferença: o favicon. Com essa pequena adição, fica mais fácil gravar a identidade visual de sua marca na memória de seus visitantes. Portanto, sua importância não deve ser subestimada.

Agora, o que é favicon e o que o torna um elemento tão poderoso no design de sites? Neste artigo, vamos esclarecer sua importância e ensinar tudo o que você precisa saber para criar seu favicon.

Leitura bônus: como criar uma logomarca.

Um favicon é um pequeno ícone de 16x16 pixels que é usado nos navegadores para representar um site ou uma página. Os favicons, abreviação de “favorite icon” ou "ícone favorito", são comumente exibidos nas abas no topo de um navegador, mas também são encontrados na barra de favoritos do navegador, no histórico e nos resultados de busca, ao lado da URL da página.

Em alguns casos, como no Google Chrome, os favicons aparecem até mesmo na página inicial do navegador. Em outras palavras, quando você cria um favicon, ele serve como o ícone do seu site, ou um identificador visual para ajudar os usuários a localizar seus canais online.

Devido à prevalência desses ícones, é provável que até mesmo aqueles que não saibam exatamente o que é favicon já tenham se deparado com o conceito anteriormente, referindo-se a ele com outro nome. Os favicons também podem ser chamados de ícones de atalho, ícones de aba, ícones de URL ou ícones de favoritos.

A primeira versão do favicon foi introduzida pela Microsoft no Internet Explorer 5, lançado em 1999. Era um ícone de 16x16 pixels no formato ICO que podia ser adicionado ao diretório raiz de um site e automaticamente exibido no navegador.

Dito isso, a ideia de usar um pequeno ícone para representar um site remonta a antes de 1999. Nos primeiros dias da web, antes do uso generalizado de navegadores gráficos, os navegadores baseados em texto, como o Lynx, exibiam um pequeno símbolo ao lado do nome do site para indicar se ele era seguro.

O conceito de favicon foi posteriormente adotado por outros navegadores, incluindo Firefox e Chrome. Ao mesmo tempo, o formato evoluiu para suportar tamanhos maiores e vários formatos de imagem. Hoje, o favicon é uma parte integral de todas as nossas experiências na web. Esses ícones personalizados são usados para realçar e reforçar a identidade de marca de empresas grandes e pequenas.

Com o tempo, os favicons foram padronizados em termos de formato, tamanho e localização no site. Essa padronização veio como resposta à demanda por ícones compatíveis com diferentes navegadores e dispositivos.

Esse processo de padronização começou em 2005, quando o Consórcio World Wide Web (W3C) publicou uma recomendação para favicons, que dizia que o arquivo deveria ser nomeado "favicon.ico" e inserido no diretório raiz do site. Essa recomendação também especificava requisitos de tamanho e formato para o ícone.

Dessa forma, foi possível determinar com mais exatidão o que é o favicon em web design e como usá-los e criá-los. O W3C atualizou suas próprias recomendações novamente em 2011, quando adicionaram formatos de imagem e tamanhos adicionais para favicons, além de incluir diretrizes de suporte para múltiplos ícones em vários dispositivos.

A padronização do favicon teve vários benefícios. O principal deles é a compatibilidade e consistência visual entre diferentes navegadores e dispositivos.

Antes da padronização, a exibição dos ícones variava em termos de qualidade, sendo facilmente discerníveis em certos navegadores, mas não em outros, afetando a experiência do usuário. A padronização também simplificou o processo de criação de favicons, facilitando a vida de web designers e desenvolvedores.

Hoje já não é mais necessário criar ícones diferentes para cada situação ou formatá-los especificamente para diferentes navegadores e dispositivos. Um único design e formato é mais que suficiente. Isso também melhora e padroniza a experiência web para todos os usuários.

Apesar de seu tamanho minúsculo, os favicons são de grande importância para o efeito visual de seu site, melhorando a experiência do usuário, transmitindo profissionalismo e fortalecendo a marca.

Experiência do usuário: favicons atuam como elementos visuais memoráveis para o seu site, aprimorando a experiência do usuário. Ao se familiarizarem com o favicon, os usuários serão capazes de identificar seu site de forma rápida e fácil em diferentes plataformas e aplicações, o que remove obstáculos para o acesso e possibilita visitas recorrentes. Favicons também podem ter um impacto positivo na experiência do usuário mobile. O design web para dispositivos móveis deve ser impactante, intuitivo e compacto, e nada faz isso melhor que um ótimo favicon.

Marca: para fomentar uma identidade de marca verdadeiramente coesa, até os menores detalhes importam. Os favicons contribuem para o branding da marca e a visibilidade do seu site, estendendo a linguagem da sua marca para fora do site e marcando-a no navegador web. Favicons também agregam credibilidade e profissionalismo ao seu site, fazendo com que pareça mais completo e confiável.

Credibilidade: embora os favicons não tenham impacto sobre a segurança do seu site, é comum que os usuários sintam que podem confiar mais em sites com favicons. Isso ocorre porque os ícones sinalizam aos usuários que eles realmente estão em seu site oficial, independentemente de como chegaram ali.

Usuários recorrentes: favicons são uma ferramenta poderosa para o reconhecimento da marca, permitindo que seu site se destaque mesmo em contextos onde não há muito espaço, seja nas páginas de resultado de busca ou no histórico do navegador do usuário. Por isso, um favicon reconhecível ajuda os usuários a retornar ao seu site com mais frequência. Além disso, quando usuários adicionam seu site aos favoritos, um favicon permite encontrá-lo com mais facilidade em meio à lista de links salvos.

Os favicons não têm um impacto direto no SEO de um site. No entanto, uma vez que facilitam a identificação do site em navegadores e melhoram a experiência geral do usuário, os favicons podem melhorar organicamente o ranqueamento de seu site nos resultados de busca de várias maneiras:

Favicons podem ajudar o Google e outros mecanismos de busca a identificar seu site. Quando o Google rastreia seu site, ele procura pelo arquivo do favicon. Caso o favicon exista, ele será usado para identificar seu site nos resultados de busca.

Favicons podem ajudar os usuários a lembrar do seu site. O favicon pode ajudar o usuário a lembrar do seu site ao visualizar o ícone na aba do navegador, favoritos ou resultados de busca, aumentando as chances de clicarem no seu site nos resultados de busca.

Favicons podem ajudar a melhorar a experiência do usuário. Um favicon bem projetado pode fazer seu site parecer mais profissional e sofisticado, levando a uma melhor experiência do usuário.

Por mais que não sejam os elementos mais difíceis de administrar em um site, alguns fatores ainda devem ser levados em consideração ao se criar favicons:

- Espaço limitado para design: transformar o logo da sua marca e reduzi-lo a um tamanho compatível para favicons pode ser um desafio, especialmente se quiser transmitir a verdadeira mensagem da sua marca.

- Segurança: favicons podem ser usados em uma série de possíveis ataques de cibersegurança, incluindo injeção de códigos maliciosos, malware, ataques de spoofing e phishing.

- Tempo de carregamento e velocidade do site: como todas as imagens web, os favicons devem ser otimizados para o desempenho do site. Se essa otimização não for feita, eles podem impactar negativamente a velocidade de carregamento do site.

- Acessibilidade: como são imagens pequenas, os favicons podem ser problemáticos em termos de acessibilidade, pois são pequenos demais para incluir textos explicativos ou outros sinais.

- Problemas de compatibilidade: mesmo com a padronização de arquivos e formatos para favicons, ainda podem existir problemas de exibição em diferentes navegadores e dispositivos.

Em primeiro lugar, um favicon deve ser geralmente uma adaptação simplificada do logo da sua marca. Por ser uma extensão dos seus esforços de marca, ele deve fortalecer, e não atrapalhar, a identidade de marca que você já construiu.

Para fazer isso, você pode considerar contratar um web designer freelancer, mas também pode fazer um favicon por conta própria usando um programa de design de sua escolha ou várias ferramentas online. Uma ferramenta recomendada é o criador de logo Wix, que permite criar um favicon profissional e personalizado para refletir melhor o seu estilo e as necessidades de seu negócio. Você também pode usar os ícones gratuitos do Wix ou a ferramenta de ilustração vetorial Vector Art encontrada no seu Editor.

Vamos abordar mais a fundo algumas dicas de design de favicon na seção abaixo, mas, antes disso, reunimos alguns fatores importantes para manter em mente:

Para garantir uma visualização coesa, recomenda-se que o tamanho do seu favicon seja um múltiplo de 48 pixels quadrados. Por exemplo: 48x48 pixels, 96x96 pixels, 144x144 pixels, e assim por diante. Arquivos SVG não possuem restrições de tamanho específicas, proporcionando flexibilidade. Quanto ao formato, qualquer tipo de favicon reconhecido é aceitável. Também é fundamental que a URL do favicon seja estável, evitando mudanças frequentes que possam interferir na experiência do usuário.

Estes são alguns exemplos de tamanhos padrão de favicon e quando usar cada um:

Favicon para navegador: 16x16

Favicon para atalho da barra de tarefas: 32x32

Favicon para atalho da área de trabalho: 96x96

Favicon para Apple touch: 180x180

Leitura bônus: qual o tamanho de logo ideal para a sua marca?

Anteriormente, o formato original para favicons era o ICO. Hoje, os tipos de arquivos ou formatos de arte vetorial mais usados são PNG ou JPEG. 

Mais recentemente, no entanto, o SVG está se tornando cada vez mais popular, considerando que mais e mais navegadores passaram a aceitar esse formato. Os navegadores também são capazes de exibir favicons criados em formato GIF, mas o pequeno tamanho dos GIFs torna os favicons mais difíceis de serem vistos.

ICO: desenvolvido pela Microsoft, foi o formato de arquivo original para favicons. É compatível com todos os navegadores e pode incluir várias imagens de tamanhos diferentes em um único arquivo. Isso permite que você redimensione e mude a escala de sua imagem sem depender do navegador. Em muitos casos, mesmo que um favicon seja salvo como um ICO e mais um tipo de arquivo, o navegador ainda escolherá exibir a versão em ICO.

PNG: é um formato de arquivo popular para favicons, já que é um formato com o qual os criadores de sites estão muito familiarizados. É um formato fácil de criar e geralmente entrega imagens e favicons de alta qualidade. Os arquivos PNG também têm a vantagem adicional de serem leves, o que significa que carregam rapidamente.

SVG: esses arquivos são conhecidos por serem leves. O maior benefício desse tipo de formato de arquivo para favicons é sua capacidade de entregar imagens de alta qualidade que não diminuem a velocidade da página ou o desempenho do site. No passado, o uso de SVG para favicons era limitado devido à falta de compatibilidade dos navegadores, mas isso está mudando.

Transparência: caso seu design tenha um fundo transparente, certifique-se de salvar seu arquivo como PNG com a configuração de transparência ativada.

Considerar o formato de arquivo usado também ajudará a diferenciar o que é favicon, logo ou ícone para navegar mais facilmente entre seus arquivos.

O design de algo tão pequeno pode parecer simples, mas, na verdade, demanda uma abordagem meticulosa.

Por isso, agora que você já sabe o que é favicon, reunimos algumas dicas sobre como criar um favicon que melhor se adapte à sua marca e site:

O tamanho reduzido dos favicons exige que seu design seja mais preciso e impactante. Evite detalhes em excesso e elementos como linhas pequenas, texturas ou sombreamento. Em vez disso, use um ícone ousado, direto e simples que seja instantaneamente reconhecível.

Se estiver buscando inspiração, a designer de joias e usuária do Wix Ilaria Bonardi tem um ótimo favicon que exemplifica o princípio de simplicidade no design. Nós também amamos a abordagem peculiar e divertida do favicon da Py Salles — o emoji de envelope com um coração representa tudo o que torna a sua identidade e site tão únicos.

Inspire-se com nosso artigo sobre formas para logotipo.

Um favicon deve encapsular o espírito do seu site e marca, mantendo a mesma linguagem visual e esquema de cores do restante do seu site. Para o site do designer gráfico Bhroovi’s, também criado com o Wix, o favicon colorido como um arco-íris é uma continuação da linguagem visual presente no resto do site. Já o favicon da Bruna Bali na cor rosa, remete ao movimento tão presente em suas aulas.

Se você quiser incluir texto em seu favicon, limite-se a três caracteres, no máximo. Iniciais ou abreviações são muitas vezes boas soluções para encurtar elementos textuais, como o nome da sua marca.

O site da organização sem fins lucrativos Arte usa a inicial A de seu logotipo como um favicon junto a um fundo verde neon para chamar a atenção. Seguindo a mesma linha, o favicon no site da Malu Alves, videomaker que já trabalhou com Anitta, Negra Li, Jão e Pedro Sampaio, também utiliza sua inicial para representar sua marca pessoal.

Leia também: Fontes para logo: 30 fontes para um logo inesquecível

Mesmo os melhores logos podem parecer ilegíveis quando reduzidos. Se você quiser usar seu logotipo como um favicon, provavelmente precisará fazer alguns ajustes. Omitir o slogan ou usar apenas uma inicial são algumas das maneiras de adaptar logotipos aos tamanhos exigidos por favicons.

Note como o favicon do Google é ligeiramente diferente de seu logo, embora incorpore os mesmos valores de design. O favicon mostra apenas a inicial G, incorporando todas as quatro cores da marca nessa única letra. Uma abordagem semelhante foi tomada pela loja de roupas femininas Wasabi, que parte de seu logotipo como seu favicon.

Lembre-se de que o favicon do seu site será exibido em fundos de cores diferentes, dependendo do contexto e do navegador usado. Portanto, certifique-se de testar seu favicon em fundos cinzas, brancos e pretos antes de finalizar o design.

Leia também: Catálogo de cores para logos.

Se você criou seu site com um criador de sites, não é necessário adicionar seu favicon em HTML. Esse passo só se aplica a sites criados por desenvolvedores.

Nesse caso, sua imagem de favicon precisa ser inserida no cabeçalho do código para que ela apareça em seu site, como mostramos abaixo:

<link rel="icon" type="image/png" href="Favicon.png"/>

Está criando seu site com o Wix? A seguir, mostraremos como personalizar e adicionar facilmente o seu favicon a um site.

Os sites do Wix já incluem um favicon padrão por default, mas você pode personalizá-lo ao fazer upgrade para um Plano Premium e comprar um domínio de site.

Você pode facilmente mudar seu favicon no seu site Wix:
 

Uma vez que tenha inserido seu favicon, recomendamos verificar como ele aparece em todos os lugares onde será exibido. Para fizer isso, abra uma guia anônima para evitar problemas de cache.

Em seguida, verifique seu favicon em todos os lugares que um usuário do seu site o veria — no navegador, aba de favoritos, histórico do navegador e, se possível, também nos resultados de busca. Ainda não aparece para nenhuma palavra-chave orgânica? Se seu site está indexado, você deve conseguir encontrá-lo na busca procurando pelo nome da sua empresa ou marca. Assim que encontrar seu favicon, terá a confirmação de que ele foi implementado corretamente.

Esse também é um bom momento para pensar sobre a aparência de seu favicon. O design visual final consegue capturar a essência da sua marca? Se sim, seu favicon está pronto para ser compartilhado com o mundo.

Um favicon, abreviação de “favorite icon” ou "ícone favorito", é um pequeno ícone que representa um site. É exibido na aba do navegador, na lista de favoritos e na barra de endereços quando um site está aberto. Favicons são usados para ajudar os usuários a identificar sites de forma rápida e fácil e também podem melhorar o reconhecimento da marca. Em suma, o que é favicon? O ícone da marca para navegadores.

Um favicon não é o mesmo que um logo. Um logo é um ícone maior e mais detalhado que representa uma marca como um todo. Um favicon é uma versão menor e mais simples de um logo que é especificamente desenvolvida para ser exibida em uma aba de navegador.

Existem muitas maneiras de criar um favicon. Você pode usar um gerador de favicon online ou pode criar um por conta própria usando um programa de edição de imagens. Uma ferramenta recomendada é o Criador de Logos Wix, que permite criar um favicon profissional e personalizado que reflete seu estilo e necessidades de uma maneira melhor. Você também pode usar os ícones gratuitos do Wix ou as ferramentas de arte vetorial do Wix encontradas no seu Editor.

Um favicon é um tipo de ícone, mas nem todos os ícones são favicons. Para entender realmente o que é favicon, é preciso diferenciá-lo do conceito mais amplo de “ícones”.  Um ícone é uma pequena imagem que representa um objeto ou conceito particular. Um favicon é um tipo específico de ícone usado para representar um site.

Aqui está um resumo da diferença entre favicons e ícones:

Favicons

Ícones

Por Hanna Kimelblat

Blogger & Growth Marketing Expert - Português