Como colocar Favicon no Blogger

10:44:00 Ellen Luz 11 Comments

É mais simples do que andar de bicicleta, mas faz uma diferença enorme! Bom, mas para quem não sabe o que são Favicons, aí vai a explicação:

Favicon é a junção de duas palavras: favorite (favorito) + icon (ícone). O favicon é uma pequena imagem com cerca de 16×16 pixels que identifica um site na aba de um navegador.

Só isso? Claro que não! O favicon torna o seu blog mais profissional e ajuda que um usuário comum o identifique facilmente quando ele for exibido em uma lista nos buscadores de pesquisas (Google, Explore etc) ou nas abas do navegador. 
Quando o blog não possui essa imagem, os navegadores exibem o logotipo da plataforma em que ele está hospedado,  no caso do Blogger ou o ícone padrão que é uma folha em branco.

Mas vamos parar de conversa e vamos colocar logo o favicon no seu blog. É tão simples, porém ainda existem muitos blogs que não possuem esse recurso. 
Dá para fazer de duas forma e eu vou ensinar as duas. 

Criando o seu logon no Paint.
Não, o Paint não serve só para o seu filho desenhar, nem mesmo para você ficar criando bonequinhos de neve nele. Esse programa aí já foi mais usado, mas ele ainda tem suas funcionalidades nesse mundo moderno e eu mesma o uso para criar imagens e recortes jpeg o tempo todo, e agora vamos criar o logotipo do seu blog nele.

Você pode usar o cabeçalho do seu blog e apenas colocá-lo na proporção correta e nas dimensões necessárias ou fazer um ícone específico para esse fim.

Usando o cabeçalho do seu blog
Vou usar o exemplo do meu. Abra o Paint e clique em 'Colar de'


Procure a imagem e importe o arquivo para o Paint.

Você percebeu que é uma imagem muito grande e retangular, imprópria para ser usada como favicon? Mas agora vamos transformá-la em ícone.
Recorte essa imagem, de forma que ela fique o mais quadrada possível

Agora diminua o pixel até a proporção de 60x60

Pronto! A partir de agora o cabeçalho do seu blog é também o seu ícone. Mas se você quiser usar um logotipo diferente, é só criar a imagem no Paint ou importar o arquivo de uma pasta, o processo é o mesmo. Atenção! Nunca use imagens que não forem sua, você pode ser punido pelos buscadores de pesquisa com perda de posição ou até judicialmente. Portanto, use apenas imagens próprias, plágio não!

Agora vamos colocar o seu ícone no Blogger. Abra o seu perfil, clique no nome do blog que você deseja colocar o favicon, clique em Layout e em seguida Favicon

Localize o arquivo com o seu ícone, depois que fizer a transferência, clique em Salvar

E pronto! O seu blog já possui um Favicon.

Transformando o seu ícone em png. (fundo transparente)
Nós criamos um ícone em jpeg que é um tipo de arquivo mais leve que o png, mas se você quer que ele fique com o fundo transparente, é bem simples também. Esse processo serve para qualquer imagem que você quiser transformar em png.
Para editar as minhas imagens, além do PhotoShop eu uso alguns editores on line, entre eles, o meu favorito é o Pixlr

Ele tem duas partes, mas hoje nós só vamos usar uma. Em Editor, clique em 'Lançamento Web'.

E depois clique em OPEN IMAGE FROM COMPUTER. Você também pode abrir uma imagem pela URL ou até mesmo criar uma imagem aqui ou usar uma da biblioteca deles, porém, lembre-se, para fazer o favicon, sugiro que você use a sua própria imagem, por isso ensinei primeiro como criá-la. ;)

Quando você importar a sua imagem, ele vai abrir o arquivo bloqueado, clique no cadeado duas vezes para desbloquear.

Clique na varinha na caixa de ferramentas e em seguida, clique nas partes em que você deseja que fique transparente. Se o fundo for totalmente branco ou de uma cor só, ele vai selecionar todas as partes brancas ou todas as partes da cor que você selecionou e deixá-las transparente. Cuidado para não clicar sobre a cor que você não quer. 

Visualize se está de acordo com o que você deseja e clique em File para salvar. Abra a aba e clique em PNG, pois o sistema abre em jpeg, se você não mudar essa funcionalidade, seu trabalho será perdido e você terá que refazê-lo.

Pronto! Agora é ir lá no Blogger e incluir o seu ícone png do que jeito que nós fizemos. Se você quiser criar a imagem e fazer tudo o que nós fizemos no Paint pelo Pixlr também dá, mas isso já é conversa para um outro post. Na verdade, eu poderia ficar horas falando sobre esse editor, aliás, se vocês quiserem que eu fale mais sobre as funcionalidades dele, deixe um comentário aqui embaixo, que, com a licencinha da nossa querida Dri, eu volto pra ensinar todas as ferramentas que esse editor incrível tem.

Conte aqui pra gente se vocês estão gostando dos meus artigos, se estão conseguindo fazer. Os comentários de vocês é que vão me fazer melhorar ou criar mais posts desse tipo. ;)



11 comentários:

  1. uau, que aula Ellen!!!! amei... uma dica super legal e acredito que as gurias vão adorar!!! mega obrigada pela preciosa contribuição!! bjs

    ResponderExcluir
    Respostas
    1. Obrigada pela oportunidade Dri, é um prazer contribuir com o Tititi, que eu adoro! Bjs

      Excluir
  2. Ótima dica, tutorial muito bem explicado, fácil de compreender e botar em prática!
    Tenha um final de semana abençoado, beijos.

    Blog Paisagem de Janela
    paisagemdejanela.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Obrigada Paula, é bom receber esse retorno. isso me incentiva a produzir bons posts. Bjs

      Excluir
  3. Maravilhosa a dica, muito bem explicado, Ellen parabéns, Adriana beijos.

    ResponderExcluir
  4. Seu post é pra lá de esclarecedor, Ellen! Vou separar uma tarde livre para seguir o passo-a-passo direitinho! Não tem como errar! Obrigada, Ellen! Adriana, um abraço!

    ResponderExcluir
    Respostas
    1. Ótimo, Vania, se precisar de ajuda, estamos aqui. Bjs

      Excluir
  5. Obrigada pelo passo a passo, muito esclarecedor, mas... segui os passos rigorosamente e não consegui mudar o favicon do meu blogger... Será que demora algum tempo para "salvar". Não esqueci de salvar as alterações. Mas retornarei e conseguirei. Mais uma vez obrigada.


    Olha só: http://trocarlivro.blogspot.com.br/2016/02/serie-1d-repelente.html

    ResponderExcluir
  6. Que ótima dica, vai ajudar muita gente com certeza!
    Bjcas e uma ótima semana para você!
    http://www.estou-crescendo.com/

    ResponderExcluir
  7. Eita Adri!
    Super dica.
    Sempre quis saber o que era esse FAVICON e agora ficou esclarecido, obrigada.
    “Saber encontrar a alegria na alegria dos outros, é o segredo da felicidade.” (Georges Bernanos)
    cheirinhos
    Rudy
    http://rudynalva-alegriadevivereamaroquebom.blogspot.com.br/
    Top Comentarista fevereiro, 4 livros e 3 ganhadores, participe!

    ResponderExcluir

Deixem seus comentários! Adoro saber o que vocês pensam sobre as postagens do TdD! bjs