Um favicon é aquela pequena imagem legal ao lado da barra de endereço do navegador. É o que diferencia seu site na guia de favoritos e pode ser usado para aumentar o conhecimento da marca. Se você tem um site, mas nunca pensou em criar um favicon, deve repensar sua decisão. Cada vez mais, os desenvolvedores de software estão utilizando favicons para diferentes aspectos de seus aplicativos, como ícones da tela inicial em tablets. Felizmente, projetar, criar e implementar um favicon é algo que quase qualquer pessoa pode fazer se seguir as etapas corretas.
Passos
Método 1 de 3: projetando seu favicon
Etapa 1. Crie um favicon que represente o seu site
O tipo de site que você possui deve determinar a aparência do seu favicon. Tente criar algo que adira à imagem da sua marca e que seja reconhecível e memorável para as pessoas. Seu favicon será a primeira coisa que as pessoas verão quando olharem para as guias em seus navegadores e também aparecerá nos favoritos delas.
- Por exemplo, se você tem um site de comida, escolher um favicon com frutas ou vegetais como design pode torná-lo mais memorável.
- Se o seu site for para um escritório de advocacia ou empresa de investimentos, um favicon tradicional e elegante é o melhor.
- Se o seu site é voltado para pessoas mais jovens, tente criar um favicon divertido e colorido.
Etapa 2. Decida se deseja um fundo transparente
Se você não designar um fundo, ele será preenchido em branco, o que pode não aderir à sua marca. Um fundo transparente assumirá a cor do navegador da pessoa e parecerá mais simples em alguns casos. Em outros casos, ter uma cor de fundo fará com que as letras ou gráficos do primeiro plano se destaquem. Decida o que seria melhor para o seu projeto e mantenha-o em mente enquanto o faz.
O favicon mais básico é um quadrado de 16x16 e tem uma cor de fundo
Etapa 3. Crie um favicon fácil de ler
Como a imagem favicon que você usará é pequena, é importante que você possa divulgar sua marca sem confundir os visitantes. Um favicon difícil de ler deixa uma impressão negativa e pode criar dúvidas na mente do visitante sobre a qualidade do trabalho que você pode fornecer. Imagens e logotipos excessivamente complexos não ficam bem quando reduzidos para 16x16 ou 32x32 pixels.
- Se o seu logotipo existente for muito complicado, você pode usar táticas para simplificá-lo, para que possa ser reconhecido no tamanho de um favicon. Use iniciais em vez de mostrar o nome completo da empresa ou projete um ícone simples em vez de usar uma imagem.
- Se você já tem um logotipo simples, pode reduzir a imagem e defini-la como seu favicon. Pode ser necessário alterá-lo antes de convertê-lo em um arquivo de ícone.
- Você também pode usar uma imagem de um objeto que descreve o tema geral do seu site.
Etapa 4. Crie um favicon esteticamente agradável
A estrutura do seu favicon é chamada de forma. Os favicons normalmente assumem formas, como um círculo ou um quadrado. Quando você projeta seu favicon, geralmente é melhor se ele for capaz de caber em uma dessas formas básicas, porque as formas de forma livre podem muitas vezes ficar confusas ou confusas em 16x16 pixels. Outro aspecto importante do seu design é chamado de unidade estética. A unidade estética inclui os detalhes e tamanhos de diferentes componentes em seu favicon e como ele é balanceado. Quanto mais uniformes os detalhes, mais coeso seu favicon parecerá. Por exemplo, usar diferentes tipos ou tamanhos de fonte em seu favicon não é agradável aos olhos e pode fazer com que seu favicon pareça confuso ou bagunçado.
- Outro exemplo de unidade estética é manter os cantos arredondados ao longo das formas em seu favicon.
- Um bom exemplo de ícone que mudou de forma é o favicon do Google. Ele mudou de um quadrado para um círculo.
Etapa 5. Use cores que sejam coesas à sua marca
Ao criar seu favicon, você deve criá-lo em profundidade de cor de 8 bits (256 cores) ou 24 bits (16,7 milhões de cores), pois isso funcionará em navegadores modernos. Certifique-se de que as cores que você escolher podem ser encontradas em outro lugar no seu site ou estão associadas de alguma forma à sua marca. Um favicon com cores que não estão no seu site, logotipo ou aplicativos não será memorável e as pessoas não poderão associar o ícone à sua marca.
- Alguns usos criativos da cor favicon incluem GitHub, que muda de cor dependendo do status do sistema, e Trello, que muda de acordo com a cor de fundo.
- As cores mais comuns usadas em favicons são vermelho e azul.
Etapa 6. Considere seu público ao criar um favicon
Além de identificar sua marca, seu favicon precisa ser atraente para seus visitantes. Pessoas com diferentes gostos, interesses e normas sociais verão diferentes iconologias de diferentes perspectivas. Existem diferenças culturais em nossa sociedade e podem confundir ou repelir o público que você está tentando atrair.
Por exemplo, o Mac Os X usa um selo que é um símbolo universal para correspondência. Usar uma caixa de correio não seria tão eficaz porque as caixas de correio variam em diferentes partes do mundo
Etapa 7. Obtenha a opinião de amigos e colegas
Embora não seja incrivelmente intensivo em termos gráficos, um favicon é uma parte importante da sua marca. Por exemplo, pense em seus sites favoritos, como Twitter, Gmail, Facebook ou wikiHow, e em quanto você associa o favicon à marca. Se você não tem um bom olho para design ou está perplexo sobre o tipo de design que deveria ter para o seu site, consulte amigos que tenham um olho para design ou que trabalhem com design gráfico.
- Pergunte em sua rede de amigos para ver se alguém pode fornecer conselhos de design gratuitamente.
- As empresas maiores têm designers gráficos internos que podem criar a imagem favicon.
Método 2 de 3: Criando seu Favicon
Etapa 1. Use um software de edição de fotos para criar seu favicon
Você pode usar um software de edição de fotos como Adobe Photoshop ou Illustrator para criar a imagem para o seu favicon. Esses aplicativos de software também permitem redimensionar e exportar a imagem no formato correto. Alguns softwares permitem que você crie seu favicon manualmente.
- Existem também programas de edição específicos para favicon que você pode encontrar online.
- Use um mecanismo de busca e digite "editores de favicon".
- Faça sua tela com o tamanho de 512x512 pixels porque esse número se divide na maioria dos tamanhos de favicon aplicáveis e ainda é grande o suficiente para você editar com eficácia.
- Outros softwares populares de edição de fotos incluem GIMP, PhotoScape e Paint. NET.
- Ao usar este software, você não poderá editar os arquivos.ico diretamente, mas pode usar os arquivos.png,-j.webp" />
Etapa 2. Redimensione e salve seu favicon
32x32 px é o tamanho dos itens da área de trabalho do Windows, enquanto 16x16 px é o tamanho dos favicons na guia do navegador. Depois de criar seu favicon em um formato maior, é importante reduzir seu tamanho para que você possa ver como ficará nos navegadores das pessoas. Se estiver ilegível ou não for esteticamente agradável, recomece o design original. Pense nas plataformas em que seu site ou aplicativo provavelmente será usado e, em seguida, crie um favicon para cobrir todas as suas bases.
- É importante observar que diferentes hardwares e softwares utilizam diferentes tamanhos de favicon.
- Alguns outros tamanhos de favicon incluem 57x57px para a tela inicial padrão do iOS, 72x72px para o iPad, 96x96px para Google TV, 128x128px para a Chrome Web Store e 195x195px para o Opera Speed Dial.
- Se você quiser cobrir todas as suas bases, você pode criar versões do seu favicon em cada um desses tamanhos.
- Salve versões separadas do seu favicon, para não perder o trabalho que fez.
Etapa 3. Combine seus arquivos usando um conversor
A grande vantagem dos arquivos.ico é que você pode combinar mais de um arquivo para criá-lo. Isso é útil porque navegadores e softwares diferentes irão querer um favicon de tamanhos diferentes. Para garantir que seu favicon tenha uma boa aparência em todas as plataformas diferentes, converta seus arquivos usando um conversor online. Digite "conversor de ícone" em seu mecanismo de busca favorito para encontrar aplicativos online gratuitos para fazer isso. Salve o arquivo mesclado como "favicon.ico."
- Você também pode usar um programa como o GIMP, que possui um recurso integrado, ou fazer o download de um plugin chamado ICO FORMAT para o Adobe Photoshop.
- Crie uma nova pasta para armazenar novos favicons ou trabalhos em andamento.
- Digite ".ico converter" ou "favicon generator" em um mecanismo de busca para encontrar diferentes ferramentas que você pode usar.
Método 3 de 3: Implementando seu Favicon
Etapa 1. Carregue seu favicon se estiver usando um editor de site
Muitos editores de sites vêm com um formulário embutido que permite que você carregue seu favicon para o seu site automaticamente. Se você estiver usando um editor de site que o tenha integrado, procure as opções que dizem "Carregar Favicon" ou "Adicionar Favicon" no menu de configurações do seu site. Selecione seu arquivo favicon.ico e envie-o para o seu site.
Se você não conseguir encontrar um lugar para carregar seu favicon no editor do seu site, você terá que fazer isso manualmente
Etapa 2. Faça upload do arquivo para o diretório raiz do seu site
Se o seu site for compatível com Protocolo de transferência de arquivos ou FTP, você poderá usar o cliente FTP para fazer upload do novo arquivo favicon.icon para o diretório raiz (índice). Caso contrário, você terá que ir para a página de seus hosts da web e fazer o upload da imagem manualmente. Lembre-se de substituir o arquivo favicon.ico existente pelo novo arquivo.
Etapa 3. Adicione o arquivo ao seu cabeçalho
Encontre o local onde você pode acessar os arquivos PHP e CSS do seu site. Vá para o arquivo header.php do seu site e edite-o. No tipo de tag,"
-
. Isso deve conectar seu site ao seu favicon.
Como você está usando PHP, significa que todos os sites que usam seu arquivo de cabeçalho agora terão o mesmo favicon
Crie seu próprio ícone de favicon Etapa 14 Etapa 4. Atualize seu navegador
Assim que terminar de enviar o favicon, você pode atualizar seu navegador para ver sua nova imagem ao lado da barra de endereço. Para ir diretamente para uma imagem de seu favicon atualizado, digite "https://www.yourdomain.com/favicon.ico."
- Se o seu favicon não aparecer inicialmente, pode ser necessário redefinir o cache do seu navegador.
- Para limpar o cache, vá até as configurações do navegador e exclua os arquivos temporários da Internet, cookies e histórico.
