Em web design, como você provavelmente sabe, cada detalhe importa. Uma pessoa que mudou para o seu recurso não vê cada um dos elementos separadamente, mas percebe a imagem inteira como um pacote que consiste em outros pequenos detalhes. Assim, se você perder alguma coisa no processo de desenvolvimento do seu recurso, esse detalhe pode depois estragar todo o complexo, toda a composição.
Tal ninharia pode ser, por exemplo, o fundo de um botão, uma fonte escolhida incorretamente de algum pequeno elemento e até mesmo um favicon. De fato, veja por si mesmo - sites grandes e conhecidos têm um ícone individual que o indica na seção "Favoritos" do navegador do usuário. Sem ele, os desenvolvedores do recurso não teriam sido capazes de criar a composição para a qual estavam se esforçando originalmente.
Portanto, ao criar um design para o seu site, você deve cuidar de um detalhe como o favicon. Neste artigo, falaremos sobre como combiná-lo com o estilo geral do recurso, bem como quais tamanhos essa imagem deve ter.
ícone do site
Primeiro, vamos definir o que é esse elemento. Agora, dê uma olhada no título da guia do seu navegador. Como você pode ver, há uma pequena imagem à esquerda dele, indicando uma versão simplificada do logotipo do recurso. A mesma imagem também está próxima ao nome do site exibido nos resultados da pesquisa. É por isso que o usuário é guiado quando vê o título.
Muitos webmasters entendem que essa imagem é necessária - mas poucas pessoas sabem qual tamanho de favicon para o site será mais apropriado. Portanto, neste artigo, não apenas forneceremos informações sobre como fazer esse ícone e como você pode instalá-lo em seu recurso, mas também falaremos sobre tamanhos de imagem.
O objetivo do favicon
Então, a imagem próxima ao cabeçalho do site é usada para identificação. Este é o seu propósito original: expressar o site cujo nome vemos e destacá-lo aos olhos dos demais. Isso é feito da forma mais simples possível através do uso de gráficos: intuitivamente percebemos informações em imagens muito mais rápido e fácil do que em formato de texto. Os favicons nos ajudam a fazer exatamente isso. Mas não esqueça que o tamanho do favicon é mínimo aos olhos do usuário. Este não é um logotipo no “cabeçalho” do site, que pode conter informações adicionais na forma de inscrições, alguns esclarecimentos ou informações de contato. Tudo o que pode ser exibido no ícone ao lado do nome deve caber o máximo possível no tamanho do favicon. E ele, como já indicado, é simplesmente miniatura (apenas 16 por 16 pixels).
Como escolherfavicon?
Então, como um webmaster pode criar um ícone para seu site? Deve-se notar que simplesmente compactar o logotipo do site, na maioria das vezes, não funcionará. Nos emblemas que são colocados na forma de um logotipo de um recurso específico, vários elementos são frequentemente visíveis, que nem sempre serão exibidos corretamente em forma de miniatura. É melhor abandonar imediatamente tal empreendimento.
Claro que o tamanho do favicon não permite falar em simplesmente inserir uma inscrição ali. Qualquer texto será simplesmente invisível nesta resolução. Precisamos desenvolver um novo ícone que transmita o estilo do site. Para encontrar soluções, voltemos aos maiores sites.
Muitas pessoas usam a primeira letra estilizada do nome do serviço como favicon. Este é o caminho, por exemplo, Bing, Yahoo, Yandex, Wikipedia, Google. Existe outra abordagem - se você tiver um nome de site curto, poderá defini-lo como plano de fundo do seu ícone. Para que o tamanho do favicon (em pixels atinge, repito, 16 por 16 pixels) exiba corretamente esta inscrição, não deve ter mais de 3 letras. É isso que, por exemplo, o serviço Aol faz.
Como criar um favicon?
Existem várias maneiras de fazer um ícone para o nome do site. Claro, o mais fácil é trabalhar com diferentes soluções prontas. Podemos falar sobre alguns serviços ou programas que permitem criar um ícone a partir de uma imagem completa, reduzindo-a. No entanto, eu recomendaria desenvolver esse logotipo por conta própria. Isso dará em primeiro lugara oportunidade de aprender alguma coisa; e em segundo lugar, fornecerá mais ferramentas. Tudo o que você precisa saber para isso é o que desenhar, e também saber o tamanho do favicon na versão final. Falaremos sobre o tamanho do ícone do site um pouco mais tarde, mas por enquanto vamos observar algumas sutilezas de trabalhar com essas imagens. Em particular, sem mencionar o tamanho do favicon do site, o formato dessa imagem deve ser esclarecido. Como designers experientes observam, a imagem deve ser salva como-p.webp
Você pode salvar a imagem, por exemplo, usando o Photoshop, onde o emblema será desenhado.
Dimensões do favicon
Então, agora vamos falar sobre o tamanho da imagem que vemos ao lado do nome do site nos resultados da pesquisa. Por padrão, como já mencionado, seu tamanho é de apenas 16 pixels (em cada lado). No entanto, se você tentar editar esta imagem no Photoshop, verá por si mesmo o quão inconveniente é. Portanto, recomendamos trabalhar com uma imagem ampliada, que no futuro pode simplesmente ser compactada nas bordas e salva no formato necessário.
Multiplataforma
No entanto, falando de quão grande o favicon deve ser em seu site, há mais uma coisa a ter em mente. Nem todas as plataformas exibem uma imagem de recurso da mesma maneira. Por exemplo, dispositivos com tela Retina “vêem” seu favicon em 32 por 32 pixels. E no Safari e na nova plataforma Windows, e em tudo, esses ícones atingem um tamanho de 64pixels.
Portanto, recomendamos que você salve diferentes versões do ícone e simplesmente providencie sua alteração dependendo da plataforma do usuário no futuro. Outro ponto interessante - você pode tentar carregar o ícone no formato maior, contando com o fato de que ele “encolherá” dependendo do navegador.
Editores externos
Claro que é bom se você for bom com o Photoshop e souber o tamanho do favicon e como alcançá-lo enquanto salva sua imagem. No entanto, existem muitos iniciantes que simplesmente não encontraram editores gráficos tão de perto antes, então eles não podem desenhar a imagem desejada com tanta facilidade. Para ajudar esses webmasters, existem vários serviços que permitem criar automaticamente o ícone de seu interesse. Muitos deles são até gratuitos, o que não exige nenhum investimento do usuário.
Às vezes você só precisa se registrar para trabalhar, mas, como você entende, isso é feito uma vez - afinal, as empresas não mudam seu favicon com tanta frequência. Dê uma olhada no Google, que muda o logotipo todos os dias, mas não toca no ícone.
Como instalar um favicon?
Em geral, configurar seu site de forma que ele exiba corretamente a imagem que você precisa é muito simples. Basta executar uma série de etapas simples que permitirão que os mecanismos de pesquisa, bem como os navegadores simples, leiam as informações.
Para fazer isso, a imagem resultante deve ser salva comchamado favicon.ico e colocado na raiz do seu recurso. Pronto, agora sua imagem será reconhecida automaticamente, e depois de algum tempo ela será vinculada ao seu site.
Além desta ligação, você pode adicionar mais uma linha que irá “sugerir” onde seu ícone está localizado. Fica assim:
Instale o código no cabeçalho do site.
Conclusões
Então, depois de ler nosso artigo, você descobriu o tamanho que um favicon deve ter para um site e o que é. Além disso, acho que você entendeu que encontrar o ícone certo para o seu recurso é uma necessidade, porque isso ajuda tanto em termos de reconhecimento crescente quanto em termos de destaque adicional entre seus concorrentes. Pelo menos os maiores sites fazem o mesmo, o que pode ser tomado como um excelente exemplo. Além disso, não faz muito esforço - tendo feito um favicon uma vez e instalado corretamente em seu site, você pode esquecê-lo nos próximos meses.
Portanto, sinta-se à vontade para experimentar, inventar algo novo, tentar - e tudo dará certo!
