Favicons saiba tudo, como criá-los e como usá-los em seu site

Favicons saiba tudo

Todos os dias nós vemos dezenas de pequenas imagens na barra de guias dos nossos navegadores web. No entanto, poucos sabem que estas pequenas imagens são os favicons. Este artigo analisa o que é um favicon, por que você precisa de um, como e onde criá-lo e como enviá-lo em seu site.

O que é um favicon e por que você precisa dele?

A palavra “favicon” foi composta pela junção das palavras do inglês “favorite” e “icon.” A primeira vez que um favicon apareceu foi no lançamento do Internet Explorer 5 em 1999. No começo, ele só era exibido na guia do IE e na barra de URL dos sites marcados como favoritos. É assim que um favicon se parece nos dias de hoje (no Chrome):

O favicon é uma imagem de 16 x 16 pixels no formato .ico. Quase todo site tem um favicon, independentemente da hospedagem ou da plataforma em que roda. As dimensões mais comuns de favicons são 16×16, 32×32 e 64×64 pixels. Aqui você pode ver quais tamanhos de favicon são usados por diferentes dispositivos.

Além do arquivo no formato .ico, os favicons podem ser gerados em outros formatos, incluindo PNG, GIF, JPG e SVG. Formatos estáticos como PNG e GIF são suportados em todos os navegadores modernos. O ICO costumava ser o formato de favicon mais comum. O que tornou os arquivos de ICO tão populares é que ele é capaz de armazenar o ícone em diferentes dimensões. Agora o ICO está sendo substituído pelo PNG devido as novas funcionalidades e possibilidades deste último.

Por que eu preciso de um favicon?

Um favicon tem o poder de diferenciar o seu site da concorrência e torná-lo ainda mais atraente para os seus visitantes. Um usuário que está em busca de informações provavelmente visitará o site que tenha um favicon atraente na barra de URL em vez do site que tenha uma imagem padrão (veja o exemplo abaixo). Ou seja, um favicon inteligente impulsiona o tráfego do seu site.

O favicon faz os seus visitantes economizarem tempo. Como isso acontece? Pelo fato de que muitos de nós abrimos múltiplas guias no navegador. Se o seu site não tem um favicon que o distingue de outras páginas da Web, o usuário pode simplesmente deixar de prestar atenção no seu site ou não o localizar. Ao criar o seu favicon exclusivo, certifique-se de que seja atraente e fácil de lembrar. A melhor maneira de fazer isso é reduzindo o tamanho do seu logotipo (ou sua parte mais distintiva) para que se adeque ao tamanho de um favicon. Alternativamente, você pode usar as iniciais do nome da sua empresa/site (pense no Facebook e Amazon).

Guias: Um favicon faz com que o usuário encontre de forma mais fácil o seu site na lista/barra de favoritos. Os Favicons são especialmente úteis em dispositivos móveis, como smartphones, tabelas e outros.

Branding: Hoje em dia, os favicons são cada vez mais utilizados como parte da marca corporativa. Se usado com sabedoria, um favicon deixará o seu site mais profissional e confiável.

Como é um favicon?

Senado uma parte importante da identidade de sua marca, o seu favicon deve estar de acordo com o seu site. Quanto mais os dois combinarem, melhor. Ao criar um favicon, use o mesmo esquema de cores e as mesmas formas exibidas em seu site ou logotipo.

Seu favicon deve ser legível e fácil de identificar. Não bagunce o seu ícone enchendo ele de coisas, a menos que você quer afastar o público. Um ou dois elementos reconhecíveis são mais do que suficientes.

Considere usar um pictograma relacionado ao seu site como favicon. Por exemplo, um smartphone, para uma loja online que vende telefones celulares. Certifique-se, porém, que o seu pictograma reflita plenamente o que o seu site tem para oferecer.

Como faço para criar um favicon?

Agora que já sabemos o que é um favicon e porque as empresas precisam dele, vamos descobrir como obter um. Aqui estão algumas opções:

faça o download de uma imagem pronta para usar;
desenhe um ícone em programas de edição de imagem (Photoshop, Inkscape);
use uma ferramenta online para criar um favicon.

Vamos conferir cada opção. Analisaremos uma lista dos melhores sites de galeria de imagens que oferecem ótimas opções de favicons para uso e inspiração.

1 – http://www.thefavicongallery.com/ — Esta pequena galeria apresenta cerca de 300 favicons para você escolher. Para baixar uma imagem para o seu computador, clique com o botão direito sobre ela e selecione “Salvar como”.

2 – http://www.iconj.com/ — Mais de 3.000 imagens para todos os gostos. Formatos gif e ico. Os códigos html também estão disponíveis. Favicons animados. O site exibe somente 30 imagens por página, então prepare-se para navegar por várias páginas até encontrar a opção certa.

3 – http://www.freshfavicon.com/ — Site de galeria de favicon para inspiração totalmente funcional. O site tem um sistema de classificação. Você pode até mesmo enviar o seu próprio favicon.

Se você tem a sorte de ter habilidade para desenho e experiência com softwares de edição, você pode desenhar um favicon no Photoshop.

Abra o Photoshop e crie um novo documento clicando em Arquivo > Criar. Em uma nova janela, defina o tamanho do seu futuro favicon – 16×16 (ou 32×32). Aqui eu optei por um fundo transparente. Você pode escolher qualquer cor de fundo. Clique em OK.

Talvez você precise aumentar a camada um pouco usando a ferramenta Redimensionar. Desenhe a imagem que deseja usar no seu favicon. O desenho pode ficar um pouco borrado, mas não se preocupe. Ficará ótimo quando reduzido. Lute contra a tentação de criar imagens complexas e detalhadas. Caso contrário, corre o risco de terminar com um favicon irreconhecível.

É praticamente isso! Seu favicon está pronto. Salve-o clicando em Arquivo > Salvar como > selecione o formato ico.

Os geradores online são a maneira mais rápida e fácil de criar um ícone limpo e efetivo. Nós selecionamos os melhores geradores para ajudá-lo a explorar o processo de criação de favicon.

Logaster

Além de favicons, o Logaster permite que os usuários criem logotipos e outros elementos de identidade corporativa. Isso é extremamente útil, pois a identidade visual da sua marca deve ser coerente e estar claramente definida. Ao contrário de outros serviços, aqui você não precisa desenhar um favicon por conta própria ou fazer upload de uma imagem.

No site do Logaster, clique em “Criar Favicon“. Digite o nome da sua empresa e selecione o ramo de atuação dela na lista suspensa. O Logaster irá oferecer dezenas de opções incríveis.

Adquira a opção que mais lhe convém a e baixe-a em vários tamanhos de arquivos no formato ICO e PNG. Os ícones para Apple Touch também estão disponíveis.

Favicon.cc

Com este gerador online fácil de usar, você pode desenhar o seu favicon pixel por pixel. Acesso o Favicon.cc. Cada quadrado na tela representa 1 pixel. Pinte os quadrados para construir a sua imagem futura. Além disso, a plataforma pode gerar um favicon baseado em uma imagem enviada por você. Após finalizar, faça o download do ícone no formato ico.

Real Favicon Generator

Esta ferramenta online cria favicons que ficam ótimos em todos os navegadores e dispositivos. Tudo o que você precisa fazer é enviar uma imagem. A plataforma salvará o seu ícone no formato compatível com seu navegador ou dispositivo selecionado. Além disso, você obterá o código html do seu favicon para adicioná-lo ao seu site.

Favicon.io

Este site é outra ótima maneira de criar um ícone minimalista e efetivo em apenas alguns passos. Tudo o que você precisa fazer é escolher o texto, a fonte, a forma e a cor. Quando o ícone estiver pronto, baixe-o em .ico ou .png. Alternativamente, você pode simplesmente converter a sua imagem existente em .ico. O site oferece uma grande variedade de emojis. Salve qualquer emoji para colocá-lo em seu favicon!

Como adiciono um favicon ao meu site?

Os favicons geralmente são colocados na pasta raiz do site.

1. Como adicionar o código html

Este é um método para instalar o favicon que serve para qualquer site, seja uma página de destino ou uma loja online.

Você precisa fazer o upload do arquivo com o seu ícone para o seu servidor de hospedagem. Para fazer isso, você precisa fazer upload do arquivo do seu ícone à pasta raiz (www ou public_html) do seu site. Você pode fazer isso através do painel de administração ou usando um programa de FTP como o Total Commander.

Depois abra o arquivo index.html (se você tiver uma página de destino ou de assinatura) ou header.php (se seu site usar qualquer plataforma de CMS popular). Coloque o código abaixo entre as tags <head>:

<head>

</head>

Se o seu ícone tiver um formato diferente do .ico, é necessário alterar o formato para .gif ou .png ou outro, dependendo do seu formato, e também, o atributo “type” para “image/png” ou “image/gif”.

<head>

</head>

Agora o seu favicon deve aparecer na aba do seu navegador. Se ainda não aparecer, tente limpar o cache do seu navegador pressionando CTRL + R.

2. Como adicionar facilmente um favicon ao site WordPress

Em seu painel do WordPress, selecione ‘Aparência > Personalizar’. Isso abrirá o personalizador do seu site. Uma vez aberta a página para personalizar, selecione ‘Identidade do site’. Você encontrará a opção para adicionar um ícone do site. Em ‘Ícone do site’, clique em ‘Selecionar imagem’. Agora a biblioteca de mídia será aberta. Isso permite que você escolha uma imagem dela ou envie uma nova. Depois de escolher uma imagem, você pode recortar a imagem para deixa-la no tamanho correto, se necessário. Agora, o seu favicon aparecerá em ‘Ícone do site’ no personalizador. Lembre-se de clicar sempre em ‘Salvar e Publicar’ na parte superior do personalizador para que o seu favicon seja salvo e exibido. O navegador agora deve exibir o favicon do seu site.

Para considerar

O papel de um bom favicon no sucesso do seu site não deve ser subestimado. Isto é especialmente verdadeiro no espaço web competitivo de hoje, onde milhares de sites estão competindo pela atenção do usuário. Seja bastante dedicado ao criar um favicon exclusivo e reconhecível para o seu site. Assim como um logotipo inteligente, um favicon de qualidade promove o seu site e o torna mais atraente aos olhos de usuários exigentes. Não perca a chance de tornar o seu site ainda melhor!

Matéria completa:
www.saiadolugar.com.br/favicon/
O conteúdo publicado aqui é espelhado de um conteúdo original que pode ser visualizado no link acima.