Os favicons são um componente importante do marketing digital. Eles ajudam a identificar visualmente sua empresa no amplo espaço da Internet. A experiência do usuário em seu site pode ser aprimorada e o reconhecimento da marca pode ser aumentado por esses elementos minúsculos, mas potentes. Neste post, você aprenderá mais sobre o que é um ícone de imagem favicon, incluindo seu tamanho, como criar um para o seu site usando um gerador, como eles afetam o SEO e como adicionar um usando HTML.
O que é um Favicon?
Um favicon é um pequeno ícone de imagem de 16 × 16 pixels que serve como marca para o seu site. Seu maior objetivo é tornar mais simples para os usuários encontrarem sua página quando estiverem com várias abas abertas.
Um favicon funciona melhor como uma imagem simples ou de um a três caracteres de texto devido ao seu tamanho pequeno. Às vezes, favicons e logotipos são iguais, mas não devem ser confundidos. O favicon pode precisar ser ainda menor ou uma parte do logotipo original de uma empresa devido ao seu tamanho pequeno e baixa resolução.
Onde você pode ver o ícone de imagem Favicon?
O favicon do seu site pode estar localizado ao lado de qualquer elemento de identificação. Isso inclui barras de pesquisa, resultados do histórico, aplicativos da barra de ferramentas, favoritos e guias.
Os favicons podem ser encontrados em:
- A barra de pesquisa.
- Histórico de busca.
- Aplicativos da barra de ferramentas.
- Favoritos.
- Recomendações para sua barra de pesquisa.
- O menu suspenso de seus favoritos.
Ao usar um, você pode garantir que as pessoas reconheçam seu site rapidamente. Esses favicons podem ajudar os visitantes on-line a identificar imediatamente as páginas que visitaram.
Por que o ícone Favicon é importante?
Uma etapa simples, mas crucial, na criação de um site da empresa é criar um ícone de favicon. Isso dá mais autoridade ao seu site e aumenta sua reputação na Internet e a confiança de clientes em potencial.
Eles servem como uma sugestão visual inicial para o site, permitindo uma identificação rápida e fácil para os usuários da web e reunindo todos os diferentes elementos do navegador para criar uma experiência de navegação unificada e de boa marca.
Criar Favicon
Ao criar e projetar um ícone de favicon para o seu site, há vários fatores a serem considerados. Embora pequeno e simples, pode (e deve) ter um impacto significativo. Como os visitantes associarão sua marca ao seu favicon, é crucial criar a melhor versão dessa imagem. Para criar seu ícone de imagem favicon, tenha em mente o seguinte:
#1. Use o espaço com sabedoria
Às vezes, um favicon não pode ser apenas uma réplica reduzida do logotipo da sua empresa. Todo o tamanho do seu favicon deve ser levado em consideração. Você deve manter 16px, pois todos os navegadores permitem isso.
# 2. Simplicidade
Mesmo que o favicon de sua marca sirva como logotipo, você deve tentar manter seu design o mais direto possível. Os favicons mais simples funcionam melhor. Devido ao tamanho minúsculo do favicon e ao uso de designs simples, as cores são essenciais para chamar a atenção de potenciais clientes e se destacar. O favicon só aparecerá confuso e desorganizado se houver muitos detalhes.
#3. Identidade da marca
Seu favicon deve transmitir visualmente aos usuários o que sua empresa representa, pois é a representação visual de sua marca. Isso explica imediatamente a eles o que é sua marca e o que ela realiza.
Tente ser criativo, mesmo que seja difícil fazer isso com um design tão pequeno e simples.
#4. Abreviando
Encontrar a imagem ideal pode não ser viável para o que sua empresa faz. Usar a primeira letra do nome da sua empresa ou acrônimos é uma correção típica para isso. Você também pode decidir encurtar o nome da sua empresa. Experimente algumas variações diferentes e escolha aquela que melhor se adapta às suas necessidades.
#5. coordenação de cores
A escolha das cores também deve ser considerada. As cores contrastantes tornam simples para os olhos distinguir entre as formas e a principal característica do seu favicon. Como os favicons são tão poucos, você deve representar sua empresa para o usuário, e a escolha da cor pode ser importante. Lembre-se de que cada navegador difere ligeiramente um do outro. Alguns, por exemplo, têm um pano de fundo cinza, preto ou branco que será coberto pelo seu favicon.
Favicon Generator
Os principais geradores de favicon na internet estão listados abaixo. Você acabou de carregar sua imagem de favicon usando os recursos disponíveis para o gerador de favicon. A imagem é então convertida pelo software gerador nos formatos de favicon apropriados e disponibilizada para download. Não vai demorar muito para este processo.
ICO e PNG são os formatos de arquivo aceitos para favicons.
- Todos os navegadores, incluindo o Internet Explorer, são compatíveis com ICO.
- Outro formato popular é o PNG. A principal desvantagem é que um arquivo PNG não será suportado pelo Internet Explorer.
Idealmente, você deve conseguir obter seu favicon em ambos os formatos do gerador selecionado.
#1. Favikon
É simples fazer um favicon no Favikon. Para criar um ícone, basta carregar uma imagem, recortá-la e obtê-la no formato ICO ou PNG. O Favikon permite apenas um tamanho, que é 16 × 16 pixels, o que é uma desvantagem.
#2. favicon.io
Você pode criar um favicon com Favicon.io do zero, uma imagem, um logotipo ou um emoji. Antes de fazer o download, você pode visualizá-lo em três tamanhos diferentes. O resultado está disponível para download nos formatos ICO e PNG em vários tamanhos.
#3. Favicon.ico e gerador de ícones de aplicativos
Você pode fazer upload de uma imagem PNG ou JPG e usar este aplicativo gratuito para convertê-la em formatos ICO e PNG em vários tamanhos. Você salvará seu favicon no diretório raiz do seu site depois de gerá-lo no formato desejado. O favicon pode então ser adicionado ao seu site criando um link HTML apontando para o arquivo.
Isso se aplica aos proprietários de sites, quer eles usem uma estrutura de desenvolvimento como Bootstrap CSS ou desenvolvam seu site do zero, é crucial observar. O procedimento será significativamente diferente se você utilizou um construtor de sites ou CMS como WordPress ou alternativas ao WordPress.
Tamanho do Favicon
Um favicon deve ter 16 × 16 pixels de tamanho. Eles aparecem dessa forma em barras de endereços, listas de favoritos e guias do navegador. Crie seu favicon em mais de um tamanho, de preferência. Em telas maiores, você verá versões dimensionadas adequadamente, em vez da versão 16 × 16 estendida.
Os tamanhos de favicon mais populares e seus usos especiais são mostrados abaixo.
- 16×16: O tamanho dos favoritos do navegador.
- 32×32: O tamanho dos ícones de atalho da barra de tarefas.
- 96×96: O tamanho dos ícones de atalho na área de trabalho.
- 180×180: O tamanho dos ícones de toque da Apple.
- 300×300: O tamanho exigido pelo Squarespace.
- 512×512: O tamanho exigido pelo WordPress.
Favicons são importantes para SEO?
Embora os favicons não sejam diretamente responsáveis pelo seu SEO, eles são indiretamente responsáveis e uma técnica crucial para aumentar a posição do seu mecanismo de pesquisa. Aqui estão alguns exemplos de como usar um favicon pode melhorar seu SEO:
#1. Sites amigáveis levam ao aumento do uso
A usabilidade do seu site aumenta indiretamente sua classificação nos mecanismos de pesquisa. Ao tornar seu site fácil de identificar e navegar, um favicon nas guias do navegador, favoritos, arquivos históricos e outros locais economiza tempo dos usuários e aumenta a possibilidade de interação com o site.
Como resultado, mais pessoas visitarão seu site por períodos mais longos, o que aumentará o tráfego e impulsionará seu SEO.
#2. Favoritos
Você tem uma vantagem sobre sites sem favicons. Para sites que foram marcados online, o navegador Google Chrome leva em consideração certos fatores de classificação de pesquisa. Sem um favicon, seu site pode não ter a possibilidade de ser marcado no navegador Chrome, o que seria um dos muitos sinais indiretos usados para determinar a classificação de pesquisa.
Além disso, ter seu site marcado e se destacar visualmente nessa lista de favoritos graças ao seu favicon aumenta a probabilidade de os usuários retornarem a ele. Tudo isso melhora o SEO e os visitantes do seu site.
#3. Marca e visibilidade
Os usuários associarão sua marca ao seu favicon porque é uma representação visual do seu site e empresa. SEO tem tudo a ver com marketing e branding, e quanto mais visitantes puderem ver seu site e lembrar de você, mais provável será que cliquem nele.
Como adicionar um Favicon em HTML
Uma vez que seu favicon foi produzido, você deve instruir os navegadores e outros aplicativos baseados na web onde encontrá-lo. Você deve conseguir isso incluindo uma linha de código no área relevante do seu arquivo HTML.
Por exemplo, suponha que você salvou seu arquivo PNG como “favicon.ico”. Em seguida, insira o seguinte trecho de código entre cada um de seus r </head> etiquetas:
Observe que, embora seja normal, seu favicon não precisa estar localizado no diretório raiz do site. Apenas certifique-se de que a propriedade href esteja correta se você a salvou em outro lugar. Você digitaria se você o salvou na subpasta "imagens".
Vamos imaginar que você produziu vários tamanhos de favicon. Ao incluir uma linha de código para cada tamanho no área relevante do seu arquivo HTML, você pode carregar todos eles em seu site.
Por exemplo, você adicionaria a seguinte linha de código para criar uma versão 16×16, 32×32, 48×48 e 180×180:
Quais formatos eu uso para um favicon?
Agora existem algumas outras opções de formatação, ao contrário da anterior, quando um favicon tinha que estar no formato Windows ICO. Aqui está um olhar mais atento sobre cada um deles:
- Windows ICO: O ICO é de longe o tipo de arquivo mais comumente suportado. A vantagem do ICO é que ele pode suportar várias profundidades de bits e resoluções, o que funciona de forma excelente e é especialmente útil para o Windows. Além disso, o ICO fornece um ícone de 32 pixels para a barra de tarefas do Windows 7 que funciona com o Internet Explorer. Além disso, é o único formato que ignora o elemento.
- PNG: Existem vários usos para o formato PNG. Um arquivo PNG pode ser criado sem nenhum software extra, tornando-o incrivelmente fácil de usar. O menor tamanho de arquivo é fornecido e a transparência alfa é suportada. No entanto, uma desvantagem significativa desse design é que o Internet Explorer suporta apenas arquivos ICO e não abre arquivos PNG.
- SVG: Este formato pode ser usado e é suportado pelos navegadores Opera.
- GIF: Além da compatibilidade com navegadores mais antigos, esse formato não tem vantagens. Embora eles tornem os usuários mais perceptíveis, eles também têm a propensão a incomodar, e a crença dominante é que eles não são nada vantajosos.
- JPG: Embora JPG possa ser utilizado, é menos popular e não oferece o mesmo nível de qualidade de resolução que o PNG. O JPEG também perde todas as suas vantagens devido ao tamanho modesto do favicon.
- APNG: Esta é uma variante animada do PNG e, embora o Firefox e o Opera possam suportá-lo, ele tem as mesmas desvantagens do GIF animado em termos de desviar os espectadores de sua interface.
Como obtenho um favicon?
Para adicionar um favicon ao seu site, salve a imagem no diretório raiz do seu servidor web ou em uma nova pasta chamada pictures que você criou no diretório raiz. “favicon.ico” é um nome típico para uma imagem de favicon.
Para que serve um Favicon?
Melhorando a experiência do usuário. A principal função de um favicon é tornar mais fácil para os usuários reconhecer instantaneamente uma página quando houver várias guias abertas na mesma janela do navegador. Os usuários podem reconhecer e acessar rapidamente seu site se você criar um com um favicon.
Um favicon é o mesmo que um logotipo?
Comparados aos logotipos, os favicons são substancialmente pequenos. Como favicons, algumas empresas usam uma versão reduzida de seu logotipo, no entanto, isso nem sempre é eficaz. A maioria dos logotipos usa imagens e texto, mas os favicons são pequenos demais para acomodá-los.
O que é um exemplo de um favicon?
Nosso favicon é o elegante P que pode ser visto na guia à esquerda da barra de URL no site do ProCreator.
Posso usar meu logo como favicon?
Sim. Como favicons, a maioria dos sites costuma usar seu logotipo. Você pode facilmente criar um logotipo para o seu site com o criador de logotipo gratuito, se ainda não tiver um.
Quais são as regras para o favicon?
Diretrizes para fazer Favicons fantásticos:
- Garanta a simplicidade.
- Mantenha a familiaridade.
- Use o mínimo de texto ou letras possível.
- Considere a cor.
Conclusão
Apesar de seu tamanho pequeno, os favicons têm um grande impacto. Os favicons são cruciais para o sucesso da sua empresa no mundo digital acelerado de hoje, pois fornecem ao seu site uma identidade visual online e ajudam a criar a melhor experiência de usuário possível. A parte boa é que criar favicons é simples.
Artigos Relacionados
- COMO MARCAR: Maneiras rápidas e simples de marcar qualquer página
- 2 maneiras rápidas de atualizar seus arquivos PDF antigos
- PUBLICIDADE EM BANNER: Como funciona com exemplos
- LOGOTIPO DO LINKEDIN: Significado, História, Fonte e Influências do Design
Referências
