Favicon: o que é, como criar e características

O que é um favicon? 

Os favicons são muito comuns no design de sites, já que são pequenas imagens reduzidas, normalmente de 16x16 pixels, que acompanham a URL nos navegadores. Este ícone ou símbolo gráfico aparece no canto da guia de uma página e costuma ser o próprio logotipo da empresa do site que você está visitando. Eles têm um tamanho diminuto e devem cumprir alguns requisitos específicos, por isso é indispensável saber como criar este ícone para qualquer site sob sua responsabilidade.

Sua função principal é identificar visualmente um site e melhorar a usabilidade do mesmo perante o usuário. Quando ele está com diferentes abas abertas em seu navegador, o favicon permite diferenciá-las rápida e facilmente para que o usuário possa acessar, sem pensar muito, o site que precisa naquele momento.

A origem do vocábulo provém da combinação de dois termos: “favorite” e “icon”, favorito e ícone em português, respectivamente. Eles inicialmente foram utilizados para salvar sites como favoritos ou como marcadores nos navegadores. No entanto, hoje têm um uso diferente.

Exemplos de favicon

Importância de um favicon para a marca e a navegação na internet

Sua importância é enorme, pois um favicon será a primeira logo que um usuário visitante verá ao acessar um site, inclusive quando ele ainda estiver em processo de carregamento. Se o seu ícone tem muitas cores ou utiliza uma imagem diferente e única para transmitir uma mensagem, é muito mais provável que quem visite seu site lembre-se dele e identifique a marca rapidamente. Alguns dos aspectos importantes de um favicon para a marca e a navegação na internet são os seguintes:

• Identidade de marca. Uma identidade de marca bem definida é essencial para se estabelecer em um mercado muito saturado. Por isso, dispor de uma desde o início com um favicon próprio e elegante pode favorecer que seu site se diferencie de outros similares.
• Melhora da UX. Proporcionar aos visitantes do seu site uma experiência de usuário completa, sem falhas e rápida é fundamental se você quer solidificar a presença online do seu negócio com sucesso. Um favicon profissional ajuda a conseguir isso, além de ajudar a estabelecer uma boa reputação e credibilidade para novos visitantes.
• Posicionamento SEO. Em algumas ocasiões, um favicon bem desenhado pode ajudar a impulsionar o SEO de seu site incrementando sua interação e aumentando a atenção dos visitantes à sua URL mais do que a outros links.
• Reputação e credibilidade. Usar favicons é uma maneira de criar uma boa primeira impressão, já que eles podem transmitir uma mensagem de profissionalismo e autenticidade que permita construir uma relação positiva com seus visitantes.
• Identificação nos favoritos. Um favicon permite que os usuários identifiquem facilmente seu site se eles o salvarem como favorito. Além disso, torna o site mais reconhecível e incita que voltem a querer visitá-lo. 

Assim sendo, os favicon são elementos indispensáveis para um site, visto que agregam muitas vantagens no momento de reconhecer sua marca e facilitar a navegação na internet.

Características de um favicon efetivo

Para desenhar um favicon corretamente e cumprir os requisitos específicos necessários para transformá-lo em um gráfico adequado, você deve conhecer quais formatos e tamanhos são os mais apropriados, assim como a importância do design e da estética. A seguir, mostraremos as características de um favicon efetivo.

1. Formato e tamanho

Apesar de sempre se ter utilizado os arquivos ICO do Windows para esse tipo de gráfico, atualmente existem navegadores que permitem utilizar arquivos de imagem padrão para dar formato a estes favicons. Estes são os mais utilizados hoje em dia:

• Arquivos ICO do Windows. Estes são os mais utilizados para os favicons, já que existem bibliotecas de arquivos ICO do Windows com grande variedade de favicons gratuitos já desenhados. Este tipo de arquivo é útil para um ícone de 32 pixels. Uma de suas principais vantagens é que todos os navegadores o suportam e ele pode incluir imagens de diferentes tamanhos dentro de um mesmo arquivo. Também é possível dimensionar e escalar sua imagem sem depender do navegador. Os navegadores tendem a seguir optando mostrar versão ICO, embora sejam armazenados outros tipos de arquivos também.
• PNG. Este é um tipo de arquivo muito popular que também pode ser utilizado como favicon sem necessidade de programação adicional ou formatação. É muito recomendável para quem busca resultados de alta qualidade utilizando imagens tradicionais e gráficos. É a melhor opção se você quiser que seu favicon seja transparente e não quiser utilizar um ICO do Windows. É um formato fácil de criar; são leves e, portanto, carregam rapidamente.
• SVG. Estes são arquivos de imagem poderosos para criar e mostrar favicons e se caracterizam, principalmente, pela leveza. Entre seus grandes benefícios, destaca-se a capacidade para oferecer imagens de alta qualidade sem retardar o rendimento ou a velocidade da página. Além de sua compatibilidade com uma ampla variedade de navegadores: desde Microsoft Edge e Mozilla Firefox até o Opera.

Estes são os formatos mais comuns com suas respectivas vantagens. Mas e sobre os tamanhos recomendados para diferentes dispositivos?

Antes de criar um favicon, você deve conhecer os tamanhos adequados. Estes ícones são versões mais condensadas dos logotipos, que começam na faixa de 16x16 pixels. No entanto, existem convenções para o tamanho dos favicons segundo os dispositivos nos quais eles serão visualizados:

• 16 x 16 pixels. Este é o tamanho mais utilizado, já que, apesar de ser extremamente pequeno, é de grande utilidade para ser mostrado em todas as barras de pesquisa, nas guias e no histórico do navegador.

• 32 x 32 pixels. Este tamanho é o mais adequado para quem quer promover o conteúdo dentro de uma barra de tarefas ou em seu site. Além disso, é o que melhor carrega no Mac iOS e no Safari, pois é o tamanho padrão da seção “Lista de Leitura” deste navegador.
• 72 x 72 pixels. Embora o tamanho tradicional dos favicons seja de 16x16 pixels, é certo que, com as tecnologias mais recentes como iPads e celulares, os usuários requerem um tamanho maior para uma melhor visualização deste ícone. Assim, nestes dispositivos, é imprescindível que o favicon da sua marca seja de 72x72 pixels.

• 96 × 96 pixels.  Se você quer atrair os usuários do Google TV, o tamanho do favicon deve ser maior, chegando a 96x96 pixels, para evitar o estiramento da imagem e a perda de qualidade ao carregar este gráfico em uma resolução mais alta.
  

• 114 × 114 pixels. Neste caso, o tamanho do favicon é otimizado para as pessoas que utilizam a última versão do iPhone da Apple. Os ícones dos aplicativos são maiores e a tela retina duplicou de tamanho; portanto, para evitar que o favicon saia borrado ou perca qualidade, o tamanho deve ser maior. É fundamental adaptar-se às necessidades dos dispositivos aos quais você quer se dirigir.
• 128 × 128 pixels. Se você está interessado em promover sua página ou sua presença online através do Google Chrome Web Store, este tamanho maior de favicon é o ideal para fazê-lo.
• 195 × 195 pixels. Embora seja menos frequente, este tamanho é o mais adequado para os usuários que utilizam o navegador Opera ou a configuração Opera Speed Dial. De modo que, se você quiser que seu site alcance este público, um favicon de 195x195 pixels é o que você deve utilizar.

Agora você já conhece os diferentes tamanhos de favicon existentes e mais utilizados, o que pode ajudar a identificar qual é o mais adequado para o seu caso. Uma vez familiarizado com esta informação, é muito mais provável que você apresente a sua marca corretamente.

2. Design e estética

Um favicon pode ser um elemento muito complicado de desenhar devido à sua precisão. No entanto, existem alguns princípios básicos e dicas que devem ser levadas em conta para criar um favicon reconhecível e alinhado com a sua marca:

• Respeite a simplicidade. Neste caso, evitar muitos detalhes, como texturas,é importante para que seu favicon seja simples e claro, o que lhe permitirá ser muito mais instantaneamente reconhecível para os visitantes. 
• Siga a identidade de marca. É importante que o favicon respeite a linguagem visual da marca, assim como a paleta de cores utilizada em seu site. De modo que, quando você criar seu favicon, este deve representar o espírito e a identidade visual da sua marca.
• Não utilize texto. As palavras não são necessárias em um favicon, mas se você quiser usar, deve se limitar a algo entre um e três caracteres (quando muito, as iniciais da sua marca).
• Adapte o design da sua logo. Quando você utiliza o logotipo da marca para o seu favicon, deve se assegurar de ajustá-lo, omitindo a tag ou simplesmente utilizando uma inicial. Alguma forma que mantenha a sua logo funcional neste tamanho, pois sem modificá-lo, os logos só ficam legíveis após a conversão.
• Preste atenção na cor. As cores são essenciais na identidade de marca, por isso levar em conta a gama cromática é fundamental. Além disso, você deve considerar os fundos sobre os quais o seu favicon vai ser visto, segundo o navegador ou o contexto, portanto é importante fazer testes sobre fundos brancos, cinzentos ou pretos antes de finalizar o design.

Assim, fica clara a importância que têm tanto a simplicidade quanto o contraste na hora de desenhar um favicon para sua marca. Quanto menos elementos e detalhes que possam distrair o usuário, melhor, já que um elemento simples, leve, que siga a identidade visual do seu negócio e que contraste o suficiente para se sobressair sobre qualquer fundo, fará deste o favicon perfeito e mais efetivo.

Como os favicons melhoram a UX e o SEO

Os favicons, além de serem muito relevantes para a marca e para sua identidade, também são importantes para melhorar a experiência de usuário (UX) e o posicionamento em navegadores (SEO).

Melhorias na experiência de usuário (UX)

A experiência de usuário (UX) é uma parte fundamental do sucesso de uma marca em sua presença online, pois ela influencia diretamente no comportamento e na sua capacidade de navegar pelo seu site. Assim sendo, estas são algumas melhorias que um bom favicon pode incorporar na UX da sua página:

• Reconhecimento instantâneo. O favicon é um ícone que deve identificar muito bem a sua marca, e por isso deve contar com um bom design, um tamanho adequado e uma representação correta da identidade visual da sua marca; isso é fundamental. Estes cuidados vão facilitar o reconhecimento instantâneo da marca por parte dos usuários com um simples ícone gráfico bem desenhado, fazendo com que eles o identifiquem imediatamente quando o vejam onde quer que seja, e pode chamar-lhes a atenção para acessar seu site novamente.
• Profissionalismo e credibilidade. Dispor de uma identidade visual clara transmite uma sensação de profissionalismo e credibilidade, já que os usuários podem interpretar que todos os aspectos da marca, incluindo um favicon forte e bem desenhado, estão alinhados corretamente com a mensagem que sua marca quer transmitir.
• Melhoria da navegação em dispositivos móveis. Quando um usuário navega em seu dispositivo móvel, o que ele quer é que sua busca seja rápida, fácil e direta, por isso o uso de um favicon para sua marca é indispensável. Não somente porque é facilmente reconhecível, mas porque além disso ele ajuda a melhorar a usabilidade do site, porque os usuários podem identificar seu site nos buscadores mais rápido com um pequeno ícone enquanto fazem uma varredura nos resultados. Além de oferecer a possibilidade a qualquer visitante de salvar e manter um marcador do seu site na barra do navegador, pois com um favicon essa referência de busca não se perde, diferente de quando não se tem um.

Impacto no SEO

Quanto ao impacto no SEO, ambos os aspectos estão relacionados, por isso um bom posicionamento pode também significar melhorias na UX e vice-versa. Estes são os elementos SEO nos quais o favicon impacta mais:

• Taxa de Cliques (CTR). Um favicon visualmente atraente e chamativo, bem como representativo da identidade de sua marca, pode chamar mais a atenção dos usuários enquanto eles realizam sua busca. Portanto, se eles decidem clicar no seu site ao invés do da concorrência, ele receberá mais cliques, e, portanto, aumentará o CTR. Mais cliques significam mais interação, e, por consequência, mais visitantes.

• Experiência de Usuário como Fator de Ranking. Dado que os favicons facilitam a identificação do site por parte dos navegadores e, portanto, isso melhora a experiência do usuário, as qualidades deste elemento gráfico podem melhorar direta e organicamente sua posição nos resultados de busca dos navegadores. Isto pode fazer com que subam no ranking de posicionamento SEO graças à existência de um favicon. 

• Redução da Taxa de Rejeição. Quando os visitantes não conseguem identificar qual página estão acessando a partir do buscador, isso pode confundir o usuário, pois não saberão se é o que realmente estão buscando. Por isso, quando entram em um site e se dão conta de que não é a página que satisfaz sua busca, os usuários saem imediatamente, aumentando a taxa de rejeição. Se você dispõe de um favicon identificador da sua marca, os visitantes já sabem que seu site é o que eles buscam (ou não), e portanto, a taxa de rejeição cai. Os visitantes que ficam no site são o público específico que representa a sua marca.

Pode-se dizer, portanto, que os favicons são essenciais e muito importantes para melhorar tanto o seu posicionamento SEO quanto a experiência do usuário (UX) para que seu público navegue pelo seu site rapidamente e com facilidade.

Como criar um favicon: guia passo a passo

Para criar um favicon efetivo, que realmente possa influenciar positivamente na melhoria do seu site e da sua presença online, você deve seguir alguns passos muito concretos:

1. Planejamento do design

Planejar o design do seu favicon é o primeiro passo para criar um ícone gráfico com excelência para a sua marca. Assim, neste momento você deve ter em conta dois aspectos fundamentais para firmar bases:

• Defina a identidade visual da sua marca: ao pensar em criar um favicon, o primeiro que deve vir à sua mente é que ele define a identidade visual da sua marca. Respeitar a imagem, os valores e a mensagem do seu negócio é fundamental e deve ser transmitido da mesma forma ao ícone gráfico que vai acompanhar a sua URL. É importantíssimo que o favicon que os visitantes vejam represente exatamente o mesmo que o seu site e, em geral, a sua marca, representam.

• Considere a simplicidade e a legibilidade: no caso da criação de favicons, menos é mais, por isso desenhar um ícone evitando muitos detalhes e sem texto, mantendo-o simples e legível, é o principal. Um favicon simples, com design chamativo, seguindo a paleta de cores definidora da sua marca, a adaptação correta do seu logo ou a criação de uma versão especial do mesmo e que se destaque frente ao resto dos concorrentes é o que compõe um bom design.

2. Ferramentas para a criação de favicons

Para criar o seu favicon, existem várias maneiras de fazê-lo. Neste caso, vamos falar dos geradores de favicons online, a ferramenta de design e criação de favicons mais simples e rápida. Estes são três dos aplicativos mais populares que você deve conhecer:

• Genfavicon. Esta ferramenta gratuita permite criar seus favicons em vários tamanhos (16×16, 32×32, 48×48, 64×64 e 128×128) e, além disso, aceita diferentes formatos como jpeg, png e gif. Com este aplicativo, você pode ir verificando em tempo real como fica sua imagem e, em menos de 5 minutos, dispor do seu ícone para exportar em .ico ou .jpg. Está disponível em vários idiomas.

• Favicon generator. Um dos aplicativos mais populares para criar favicons, disponível somente em inglês. Você pode baixar favicons já desenhados por outros usuários disponíveis na galera ou então criar um por conta própria. Ele admite imagens em formato gif, png e jpeg e as converte em arquivo .ico para iOS, Microsoft, Android e web.
• Favicon.cc. Este gerador é um dos mais completos, já que com ele você pode não apenas importar imagens em mais formatos (jpeg, jpg, gif, png, bmp, ico e cur), mas também incorporar um editor gráfico com ferramentas básicas para desenhar seu próprio ícone, estático ou animado, segundo suas necessidades. Ele também dispõe de uma galera com mais de 200 mil ícones de página que você pode baixar ou vincular com código HTML ao seu site.

Apesar desta ser a ferramenta de criação de favicons mais comum por sua rapidez e facilidade de uso, você também pode, se quiser, utilizar editores gráficos como Photoshop para desenhar seu favicon do zero, da maneira que preferir e seguindo um procedimento muito claro.

3. Conversão e formatos

Como já comentamos, quando se trata de favicons, existem dois aspectos muito importantes que você deve cumprir para garantir a visualização otimizada do seu ícone nos diferentes dispositivos e resoluções de tela do seu público. Assim, você deve considerar a escolha dos formatos adequados e compatíveis com os navegadores.

Além disso, também é recomendável criar diferentes versões de um mesmo favicon para assegurar uma aparência otimizada em diferentes dispositivos e resoluções de tela. Você deve desenhar seu favicon em diferentes tamanhos, como por exemplo, 16x16, 32x32, 64x64 e 128x128 pixels.

Para isto, você pode utilizar ferramentas online ou um software de design gráfico que lhe permita criar estas diferentes versões do seu favicon, para depois implementá-las no seu site com o código HTML adequado na seção <head> dos seus sites.

4. Implementação no site

Se você não sabe como implementar seu favicon recém-criado na sua página na internet, é importante anotar e seguir os seguintes passos:

1. Faça upload do Favicon no seu site. Carregue os arquivos de favicon na raiz do seu site ou em um diretório específico. Assegure-se de que o arquivo esteja acessível publicamente.
2. Atualize o código HTML. Para implementar o favicon, você deve atualizar o código HTML do seu site. Adicione o seguinte link na seção <head> da sua página HTML.

<link rel="icon" type="image/png" sizes="32x32" href="/path/to/favicon-32x32.png">

<link rel="icon" type="image/png" sizes="16x16" href="/path/to/favicon-16x16.png">

<!-- Añade más enlaces para otros tamaños según sea necesario -->

Se você estiver usando SVG:

<link rel="icon" href="/path/to/favicon.svg" type="image/svg+xml">

• Verifique a implementação. Depois de fazer upload do favicon e atualizar seu site, utilize ferramentas como RealFaviconGenerator para verificar que o seu favicon está sendo mostrado corretamente em diferentes navegadores e dispositivos.

É fundamental que você siga estes passos ao pé da letra para implementar um favicon corretamente no seu site.

Erros comuns ao criar favicons e como evitá-los

Neste ponto, conhecer também os erros mais comuns ao criar favicons é fundamental para aprender como evitá-los no momento em que você estiver desenhando o seu. Isto é o que não deve fazer:

1. Desenhar sem considerar o tamanho

Desenhar seu favicon sem levar em conta o tamanho é um dos erros mais importantes que você deve saber corrigir. Criar um favicon cheio de detalhes ou excessivamente completo, que não seja visualizado claramente em tamanhos pequenos é um erro colossal, já que os visitantes poderão se confundir e não entender qual mensagem se quer transmitir. Nestes casos, o melhor a fazer para solucionar o problema é desenhar um favicon simples, mas claro, sem detalhes que possam se perder ao sofrer uma redução e que seja reconhecível em qualquer tamanho, incluindo 16x16 pixels.

2. Uso incorreto de cores

Escolher bem as cores que serão utilizadas é essencial. Se você optar por cores que não se destaquem bem em diferentes fundos ou que sejam difíceis de distinguir em tamanhos pequenos, pode ser que deixem de ser tão reconhecíveis ao olhar dos visitantes e pode afetar a sua experiência como usuários. As cores devem ter contraste suficiente entre si para que o favicon seja facilmente reconhecível, por isso você deve utilizar cores contrastantes e que se destaquem em fundos tanto claros como escuros. Além de testar seu favicon em diferentes fundos, para garantir que realmente são legíveis em variadas condições.

3. Não testar em diferentes navegadores e plataformas

Não verificar como seu favicon aparece nos diferentes navegadores e dispositivos é um erro tremendo. Você deve se assegurar de que seu favicon seja visto corretamente em uma ampla variedade de navegadores, incluindo Safari, Chrome e Firefox, que são os mais comuns; e em dispositivos móveis, tablets e computadores. Fazendo estas comprovações você terá certeza de que seu design tem uma boa resolução e se vê bem em todas as plataformas que lhe interessem.

4. Ignorar os formatos de arquivo

Não utilizar os formatos de arquivo adequados e otimizados para favicons pode afetar o rendimento e a qualidade do ícone. Portanto, utilizar PNG, ICO ou SVG, segundo suas necessidades ou a compatibilidade do navegador, é indispensável. Assegure-se de criar múltiplas versões em diferentes formatos e tamanhos para uma visualização otimizada em várias plataformas. 

5.Falta de consistência de marca

Se o favicon que você desenhar para sua marca não refletir a identidade visual dela, há um problema. Você deve criar um favicon coerente com sua marca, que esteja alinhado aos seus valores e identidade, utilizando cores, fontes e elementos de design consistentes com o logotipo e outros elementos de marca. Isto ajudará a reforçar a identidade da marca e melhorar a coerência visual em todo o site.

Evitar estes erros comuns ao criar favicons assegurará que seu ícone seja visualmente atraente, legível em diferentes tamanhos e plataformas, e coerente com a identidade da sua marca.

Casos de sucesso: favicons icônicos e o que aprender com eles

Sem dúvida nenhuma há muitos favicons icônicos que têm deixado uma impressão duradoura e têm contribuído positivamente para a identidade visual das marcas em sua presença online. Estes são os 4 casos de sucesso que você precisa conhecer:

Google - Simplificação e reconhecimento instantâneo

O favicon do Google, um simples “G” multicolorido, reflete seu logotipo e é instantaneamente reconhecível. Esta abordagem simplificada demonstra a efetividade de usar elementos de marca centrais, inclusive em espaços reduzidos. O segredo está na simplicidade e no uso de cores distintivas da marca. Mesmo em tamanhos minúsculos, é crucial que o favicon seja imediatamente associado com a marca.

Facebook - Uso consistente da cor da marca

O Facebook utiliza o “f” branco sobre um fundo azul, coerente com seu esquema de cores de marca. Este favicon é claro, simples e aproveita o contraste de cores para se destacar. O uso consistente da cor da marca ajuda a manter a coerência em todas as plataformas digitais. Um bom contraste melhora a visibilidade e o reconhecimento do favicon.

Amazon - Incorporação de elementos de marca específicos

O favicon da Amazon apresenta sua icônica flecha sorridente que vai do A até o Z, refletindo seu logotipo e salientando a ideia de que oferecem tudo de A a Z. Apesar das limitações de tamanho, este elemento é reconhecível. Incorporar elementos únicos da sua marca pode comunicar sua proposta de valor mesmo em um espaço pequeno. A criatividade desempenha um papel importante na maneira com que sua marca é percebida através do favicon.

Apple - Branding minimalista

O favicon da Apple é simplesmente seu logotipo da maçã mordida, um ícone globalmente reconhecido. Esta abordagem minimalista e elegante reflete a estética de seus produtos e do seu marketing. Um favicon que reflete a estética geral da marca e os seus valores pode reforçar a identidade da marca e a lealdade do cliente de maneira significativa.

Conclusões sobre o favicon

Por fim, o favicon é uma peça indispensável em qualquer estratégia online que você queira realizar. Você deve assegurar que sua marca disponha de um favicon claro, simples e atrativo, que seja reconhecível à primeira vista e que deixe uma impressão digital da sua marca.

Agora você já sabe quais elementos são fundamentais na hora de desenhar um favicon, quais erros evitar, a importância de criar várias versões e os passos a seguir para implementá-lo no seu site. Não espere mais e dê o primeiro passo para criar o favicon perfeito para sua marca! Se você já tem um, conte-nos como foi o seu processo de criação na seção de comentários!

Publicado em 19 de junho de 2024.

Revisado e validado por Jalusa Lopes, Country Manager da InboundCycle Brasil.