1. Como criar um favicon
2. Como fazer um favicon no Photoshop
3. Como salvar um favicon
4. Como inserir o site favicon
5. Como substituir o favicon
6. Como criar favicons mais complexos

É difícil adivinhar o que é um favicon quando você ouve essa palavra pela primeira vez. Este é um ícone em miniatura que é exibido nas guias dos navegadores, nas linhas de endereço e em outras áreas, dependendo do sistema operacional que você está usando e do navegador da Internet. Ele pode ser chamado com segurança de um dos elementos mais complexos e caprichosos do design do site.

Criar um bom favicon é bem difícil, já que o ícone é pequeno, deve ficar claro e exibir algo relacionado ao seu site. Criar um favicon compatível com todos os navegadores populares também pode ser uma tarefa assustadora. Neste artigo, vamos lidar com todos os aspectos complexos de sua criação. Se você também precisa de um logotipo, então nós temos um artigo como fazer isso.

Como criar um favicon

Vamos começar com o design do favicon. Um bom design, apesar de seu tamanho compacto, deve refletir a essência do seu site e ser uma parte orgânica da identidade corporativa. Normalmente, o ícone é um sinal gráfico (ícone) de uma empresa e não um logotipo completo (ícone, texto e slogan).

Como favicon, esses sites usam seus ícones (ou imagens próximas a eles).

O texto no favicon não deve ser usado, pois este texto ficará ilegível devido ao pequeno tamanho da imagem. As únicas exceções a essa regra são os caracteres de texto mundialmente famosos associados automaticamente a uma marca específica. Por exemplo, o recurso online Wikipedia deixou no favicon sua letra maiúscula "W" e Facebook - a letra "F".

Nestes favicons há letras que são fortemente associadas a uma determinada marca. Por exemplo, o Facebook usa seu sinal gráfico. Observe também que os pixels são visíveis na imagem da Disney. Isso ocorre porque a captura de tela foi feita em uma tela Retina, que é compatível com ícones 16 × 16, enquanto os sites usam ícones 32 × 32.

Como os favicons são imagens pequenas, cada pixel desempenha um papel importante. Às vezes, após a redução do logotipo, os pixels individuais ficam visíveis, e a imagem fica “borrada”. Para obter clareza, você precisa editar o ícone no nível de pixel.

Para evitar isso, você precisa redimensionar o logotipo usando editores especiais, como o Photoshop ou o GIMP. Primeiro você precisa reduzir o tamanho da imagem para 64x64 pixels (este é o maior tamanho de favicon). Então você precisa editar cada pixel usando a ferramenta Lápis até que a imagem esteja clara. Este é um processo trabalhoso, mas o resultado vale a pena. Quando o favicon 64x64 está pronto, você precisa fazer o mesmo trabalho com a imagem de 16 × 16, 24 × 24 e 32 × 32 pixels. Tantos tamanhos que você precisa exibir corretamente em todos os navegadores e gadgets:

• 64x64 - favoritos do navegador Safari;
• 32x32 - monitores de alta resolução (Retina);
• 24x24 - marcadores do Internet Explorer e MicroSoft Edge;
• 16x16 - Google Chrome e outros navegadores.

Como fazer um favicon no Photoshop

Primeiro você precisa criar algumas telas com as dimensões acima.

Então você precisa adicionar um ícone, uma carta ou outra imagem à tela.

Como salvar um favicon

Tendo criado ícones de tamanhos diferentes, salve cada um como um arquivo PNG transparente (24 bits). No Photoshop, você pode usar o recurso Salvar para a Web disponível no menu Arquivo. Então você precisa mesclar todos os arquivos PNG em um arquivo ICO. Você pode usar arquivos PNG e ICO ao mesmo tempo, mas muitas vezes até o Safari e o Chrome preferem apenas o formato ICO. Na minha opinião, é mais fácil criar um arquivo ICO. O formato ICO não é muito comum, mas felizmente existem várias ferramentas que podem ajudá-lo a converter seus arquivos para este formato. Para este propósito, eu prefiro usar Editor X-Icon . Este é um serviço online gratuito que instantaneamente converte imagens baixadas em um arquivo ICO, após o qual você pode baixá-lo. Isso não é nada complicado, basta seguir as instruções no site. Se você se considera uma pessoa desesperada, pode experimentar o editor de pixels deste serviço e desenhar um favicon você mesmo. (Embora eu prefira editar favicons em um editor mais profissional, por exemplo, no Photoshop).

Ao carregar suas imagens PNG no X-Icon Editor, você receberá um arquivo ICO na saída.

Como inserir o site favicon

Então, você já tem um arquivo ICO. Agora você precisa adicioná-lo ao site. Renomeie o arquivo para favicon.ico e coloque-o na pasta raiz do seu site (onde o arquivo index.html e outros arquivos padrão são armazenados). Após a adição bem sucedida, você pode visualizá-lo em seu site .com / favicon.ico. Quase todos os navegadores procuram o arquivo favicon.ico na pasta raiz. Portanto, é importante que você baixe o favicon nesta pasta. Para compatibilidade com diferentes navegadores, é melhor não adicionar elementos HTML ou links que indiquem sua localização. Esse truque funciona para todos os navegadores, até o IE6. Além disso, se você tiver um site WordPress, em muitos temas poderá adicionar um favicon nas configurações do tema. Este método também pode ser usado.

Como substituir o favicon

Por algum motivo inexplicável, os navegadores o adicionam ao cache. Portanto, quando você fizer o upload de um novo arquivo ICO, o navegador poderá continuar mostrando seu antigo favicon. O que fazer neste caso? Você pode adicionar um arquivo HTML temporário que indica a localização do seu novo favicon. Além disso, no final do URL, você precisa adicionar uma string de consulta curta:

<link rel = "ícone de atalho" href = "seu site .com / favicon.ico? v = 2" />

Assim, o navegador achará que esse é um URL exclusivo e, portanto, será forçado a exibir um novo ícone. Depois de atualizar o favicon, esse código HTML pode ser completamente removido. Se você precisar fazer alterações no favicon, use a mesma técnica, sempre aumentando o número após o "v" na string de consulta. Assim, o navegador sempre perceberá essa URL como única e exibirá sua nova versão. E não se esqueça de excluir o código HTML após uma atualização bem-sucedida.

Como criar favicons mais complexos

Neste artigo, eu quis descrever uma maneira fácil e universal de criar favicons que funcionem em praticamente qualquer plataforma. Mas no web design e desenvolvimento não há limite para a perfeição. Se você quiser aprender como criar ícones mais complexos, tente usar o serviço favico.js . Ele permite que você crie imagens dinâmicas com números variados. Graças a este ícone, você pode ver o número de mensagens não lidas, mesmo quando a guia correspondente não estiver ativa. Se você quiser criar favicons animados online, você pode tentar usar um gerador favicon favicon.cc .

Mais geradores on-line você pode encontrar aqui .

Se você quiser compartilhar suas dicas sobre criação de favicons ou fazer uma pergunta, estou esperando por você nos comentários!