Como criar um Favicon para seu Blog

seu blog tem um favicon personalizado? Se não, realmente deveria. Hoje vamos aprender o que é um favicon, por que você precisa de um e, finalmente, como criar um favicon para o seu blog ou site.

eu ainda vejo toneladas de blogs sem um, então, se o seu blog é um deles, faça um favor a mesmo e crie um agora, usando o tutorial abaixo. Eu prometo que não vai demorar muito e também é meio divertido!

atualizado: 11/4/2020

divulgação: esta postagem pode conter links de afiliados (denotados por a*), o que significa que posso receber uma pequena comissão se você optar por fazer uma compra com meu link. Eu aprecio o seu apoio e nunca recomendarei produtos que eu não fico sozinho.

Em Primeiro Lugar, O Que é um Favicon?

um Favicon, pronunciado fave-icon, é a abreviação de Favorites Icon, que foi nomeado porque eles aparecem na sua lista de favoritos do site, em outras palavras, seus sites favoritos. Favicons são uma pequena versão do seu logomark que aparece como um ícone de guia do navegador, um ícone de marcador ou um ícone de atalho.

Favicons são uma maneira rápida para os usuários reconhecerem seu site à primeira vista. Dê uma olhada nas guias do meu navegador abaixo. Você reconhece a maioria dos sites que abro aqui?

por que você precisa criar um Favicon?

quando você não atribui um favicon personalizado ao seu blog ou site, um ícone genérico ou nenhum ícone é atribuído a ele. Na pior das hipóteses, seu blog usa o favicon da sua empresa de hospedagem. Na melhor das hipóteses, cada navegador atribui sua própria coisa para você: o Chrome adiciona um pequeno globo (veja a imagem acima), o Safari adiciona a primeira inicial do URL do seu site em uma caixa cinza (veja a imagem abaixo) e o Firefox não adiciona nada. De qualquer forma, fale sobre chato!

olhe novamente para as guias do navegador acima. Ter ícones reconhecíveis torna mais fácil clicar para frente e para trás rapidamente entre sites, não é? Se você salvar um site em seus favoritos, também verá o favicon em sua lista de favoritos. Isso torna mais fácil encontrar rapidamente o que você está procurando. Ajude seus leitores a encontrar rapidamente seu blog em suas guias ou marcadores, incorporando um favicon.

há outro lugar que aposto que você não pensou em onde os favicons aparecem: se você tem sites que visita com frequência no seu telefone, sempre pode adicioná-los à tela inicial do seu telefone como um atalho. Se seus leitores adoram visitar seu site com frequência, eles podem querer adicionar um atalho a ele na tela inicial para que você definitivamente queira que eles tenham um ícone bonito para se destacar dos outros ícones de aplicativos que já adicionaram.

e aqui está uma nova página de guia do Safari. Imagine o atalho do seu site aqui. Você não quer que seu blog seja representado por um ícone cinza chato como o ícone” C ” abaixo de você?

Como criar um Favicon para Seu Blog

Algumas Regras de Design para Criar um Favicon

Primeiro, vamos falar sobre algumas práticas recomendadas para criar o seu favicon.

1. seu favicon deve ser perceptível e instantaneamente reconhecível
   a melhor maneira de tornar seu favicon reconhecível é usar seu logotipo como ponto de partida. Mesmo que seu blog ainda não seja super famoso, tudo bem. Usar elementos e temas de design consistentes em toda a sua marca o ajudará a se destacar do resto e a ajudar as pessoas a reconhecer sua marca.Aqui estão algumas opções para você considerar ao projetar seu favicon:
   • seu logotipo ou logomark
   • mais simples variação de seu logotipo
   • um símbolo ou ícone que representa sua marca
   • a iniciais (ou apenas a primeira inicial) de o nome de sua marca – certifique-se de que o estilo da sigla corresponde ao seu logotipo inicial de design e estilo
   • uma simples foto – ultimamente eu tenho visto blogueiros usando suas fotos de perfil para criar um favicon
2. Seu favicon deve usar um design muito simples
   dê uma boa olhada nos ícones de favoritos do seu navegador guias de agora. O que você percebe? São pequeninos! O favicon típico é exibido em 16 x 16 pixels. Por esse motivo, é importante garantir que você use uma versão muito simplificada do seu logotipo ou elemento de marca. Gráficos detalhados e elaborados não serão bem dimensionados em um tamanho tão pequeno. Eles provavelmente parecerão uma bagunça borrada.
3. certifique-se de que seu favicon contrasta bem com fundos claros e escuros
   dependendo das preferências dos seus leitores, as guias do navegador podem ser brancas, pretas, claras ou cinza escuro. Por esse motivo, você deve criar um favicon com cores que contrastam bem com fundos claros e escuros.Alguns favicons têm fundos transparentes e funcionam porque suas cores contrastam bem em qualquer fundo. Se o seu gráfico for muito claro ou muito escuro, pode ajudar a adicionar um círculo ou quadrado colorido sólido atrás do gráfico ou logotipo para ajudá-lo a se destacar e ser legível em qualquer guia colorida.
4. Olhe para as guias do seu navegador para inspiração
   clique na web e veja os favicons usados em seus sites favoritos. Observe se eles trabalharão em fundos claros ou escuros. O gráfico tem um fundo transparente ou está em um quadrado ou círculo colorido?

Favicon Inspiration

Favicons usando transparência

observe como esses ícones podem se destacar em um fundo escuro ou claro, exceto no último, ‘Diga sim.”Essa pessoa provavelmente deveria ter sido colocada em um quadrado branco. E é um pouco difícil de dizer, mas o quarto Ícone, a flor de lótus, na verdade, tem um contorno preto muito fino. Dessa forma, você pode vê-lo facilmente, mesmo que seja visualizado em guias de cores claras.

Favicons usando um fundo colorido

esses favicons foram projetados com um fundo quadrado quadrado ou arredondado para garantir que eles sejam claramente visíveis em abas escuras e claras.

Favicons usando iniciais

alguns desses ícones de iniciais usam um backround colorido, alguns usam um transparente. De qualquer forma, certifique-se de que seja legível.

Favicons usando uma foto de perfil

Usando uma foto de perfil parece ser uma nova tendência que está pegando. Se você seguir esse caminho, use a mesma foto de perfil em todos os seus perfis on-line para que ela seja instantaneamente reconhecível.

Como Criar um Favicon para Seu Blog

Criar um Arquivo Favicon passo-a-Passo

1. Criar o Gráfico em um Editor de Imagem
   Usando um editor de imagens como o Photoshop (inscreva-se gratuitamente para teste)*, Pixlr, BeFunky ou Canva,* criar o seu favicon arquivo de 512 x 512 pixels. Mesmo que seja exibido em apenas 16×16 nas guias do navegador, ele também será exibido em tamanhos maiores em alguns dos outros aplicativos que mencionei acima.
2. Visualize seu Favicon em tamanho minúsculo
   se você terminar de criar um favicon gráfico, diminua o zoom da imagem até que seu gráfico fique minúsculo, aproximadamente o tamanho dos favicons que você vê em seu navegador. Ainda é legível? Faz sentido? Se isso acontecer, ótimo, passe para a próxima etapa.
3. Salve o arquivo
   primeiro, salve seu gráfico como um arquivo editável em seu programa de software para que você possa voltar e ajustá-lo se precisar.Em seguida, salve-o como um arquivo PNG.
4. gerar um Favicon.arquivo ico
   Use um gerador de favicon para converter seu arquivo PNG em um arquivo ICO. Esta etapa é necessária, pois alguns navegadores lerão apenas arquivos ICO.

alternativas para projetar o seu próprio do zero

se você quiser uma maneira rápida e fácil de criar um favicon de texto ou iniciais, use o gerador de favicon de ICO Text >. Eu rapidamente criei este para DYOB:

você também pode usar o Emoji > ICO favicon generator se você realmente quiser facilitar a si mesmo.

finalmente, adicione seu novo Favicon ao seu Blog ou site

WordPress

a maneira mais fácil de adicionar um favicon em um blog WordPress auto-hospedado é fazer login no seu painel. Em seguida, vá para aparência > personalizar e clique na guia Identidade do Site. Na seção ícone do Site, selecione seu novo favicon.arquivo ico para upload.

E pronto, está feito, confira no seu navegador! Observe que pode ser necessário atualizar algumas vezes e / ou limpar o cache do navegador antes que ele apareça.

como adicionar um favicon a um WordPress.com blog.

Squarespace

é muito fácil adicionar um favicon ao Squarespace também.

Blogger

faça login no seu blog e clique em Configurações na coluna da esquerda. Em seguida, clique em Favicon na seção básica. Em seguida, envie seu favicon.arquivo ico, salvar e boom!

Teste seu novo Favicon

se você quiser testar a aparência do seu favicon em várias plataformas e configurações, use este verificador de Favicon. Se você deseja editar a aparência de seus ícones em qualquer uma das plataformas, digamos iOS (iPhones), você pode usar o gerador para otimizá-los para cada configuração. Em seguida, basta seguir as instruções para adicioná-los todos ao seu blog.

você acabou de aprender a criar um Favicon

Parabéns! Ao projetar seu próprio blog, você quer ter certeza de que você não deixar de fora todos os detalhes, mesmo os mais ínfimos. Adicionar um favicon personalizado a ele não apenas ajuda seus leitores a localizar rapidamente seu blog em suas guias ou marcadores, mas também mostra que você se preocupa em manter sua marca consistente.

Agora é Sua vez de

Deixe-me saber nos comentários se você tem alguma dúvida sobre como criar um favicon, ou se precisar de ajuda para identificar um tipo de favicon para criar sua marca. Caso contrário, compartilhe seu favicon conosco nos comentários!
e se você gostou deste tutorial, compartilhe-o clicando em um dos ícones abaixo da minha assinatura!
esta postagem foi publicada originalmente em 14/08/2013 e atualizada em 11/02/2015, depois novamente em 4/11/2020.