Como alterar o ícone da guia (favicon) do blog

Motivo nº:n+151

Um pouco de estilo à plataforma

Olás

A dica de hoje vai de encontro com a vontadezinha que sempre dá de estilizar os nossos blogs, seja alterando o layout ou simplesmente o ícone que aparece na guia da página ao lado do nome do site, ou o chamado favicon
O favicon original de um blog hospedado no blogspot corresponde ao seguinte símbolo:

Ícone Blogger

Adicionar um favicon, além de trazer estilo ao seu blog, também passa para quem está visitando seu espaço uma sensação de autenticidade, de originalidade da página
Além disso, um ícone personalizado também destacará sua página de outras guias, quando muitas guias estão abertas.
Mas como colocá-lo? No guia abaixo, confira o Passo a Passo de como alterar seu favicon.


Imagem de LEEROY Agency por Pixabay


Guia para alterar o favicon de seu blog

Como nem todos os modelos de blog possuem o widget favicon disponível na aba Layout, o Passo a Passo aqui será de inserção de favicon através de alterações no código HTML. O primeiro de tudo é definir a imagem.

1) Imagem


  • Escolha uma imagem livre de direitos autorais. Baixei a minha pelo Pixabay
  • A imagem deve ser no formato png e ter uma dimensão de exatamente 16X16
  • Para redimensionar a imagem, recomendo o site IloveImg. Selecione a imagem png salva no seu computador, digite as medidas nos boxs à direita e clique em redimensionar IMAGENS. Salve a imagem redimensionada no seu computador.

2) Hospedando a imagem


  • Agora você vai hospedar a imagem png 16X16 num site para gerar um link. Eu usei e recomendo o ImgBB, site gratuito e bem simples de usar. 
  • Clique em começar a enviar, adicione a imagem desejada e clique em enviar. Aparecerá um link, o qual você vai copiar e abrir numa nova aba. 
  • Na página aberta, clique com o botão direito sobre a imagem carregada e selecione Copiar endereço da imagem
  • Salve o endereço num bloco de notas, pois é ele o essencial para o próximo passo.

3) Editando o código HTML

  • Acesse o editor de código HTML do seu blog: blogger > tema > botão com três pontinhos na vertical > editar HTML.
  • Clique dentro da caixa e abra uma caixa de pesquisa com ctrl+F. Importante: a caixa de pesquisa deve ser aberta dentro da caixa de código (localizando-se em cima, não embaixo da caixa).
  • Procure pelo código <head> e cole o código abaixo em seguida, inserindo o url (endereço da imagem que você salvou anteriormente no bloco de notas) no local indicado:
<link rel="shortcut icon" href="URL-DA-SUA-IMAGEM"/>


  • Em seguida, busque a linha ]]></b:skin> ainda no modelo e adicione, logo abaixo, o seguinte código com as modificações indicadas:

<link href='URL-DA-SUA-IMAGEM' rel='icon' type='image/x-icon'/>
<link href='URL-DA-SUA-IMAGEM' rel='shortcut icon' type='image/x-icon'/>
<link href='URL-DA-SUA-IMAGEM' rel='icon'/>
<link href='URL-DA-SUA-IMAGEM' rel='icon' type='image/vnd.microsoft.icon'/>

  • Não se esqueça de visualizar as alterações antes de salvar o layout. Estando tudo certo, salve e entre no seu blog para conferir a alteração.
Antes de passar o tutorial, testei e deu certo. Tive algumas dificuldades (como usar a caixa de busca certa, busquei na caixa errada e não encontrei o corpo do código, ou os tamanhos da imagem, pois vi um tutorial com dimensões maiores e deu ruim). Agradecimentos especiais ao meu namorado por ter me orientado e dado apoio moral pra concluir esse tutorial.

E vocês, o que acharam do procedimento? Tranquilo ou complexo? Comentem aqui embaixo!


Postar um comentário

12 Comentários

  1. Saudades de ver esse tipo de conteúdo com dicas de como deixarmos nosso blog mais a nossa cara! Valeu pena dica.

    Blog Profano Feminino

    ResponderExcluir
    Respostas
    1. Fico contente que tenha gostado! Sempre bom darmos um toque pessoal ao blog <3

      Abraçz

      Excluir
  2. Ótima dica! Tão explicadinho assim fica mais fácil de fazer também. Tenha um ótimo dia, beijos!

    Blog Paisagem de Janela
    www.paisagemdejanela.com

    ResponderExcluir
    Respostas
    1. Que bom que achou tranquilo, Paula!
      Ótima dia pra vc tbm <3

      Abraçz

      Excluir
  3. Me lembro que meu primeiro favicon, quando criei o blog, era um minigif de coração <3 Depois eu criei um de 16X16 com a logo do blog. Sem dúvida o favicon dá um ar de blog profissional.
    Se vc for no painel de controle do blogger e clicar em layout, ou "esquema", lá encima está escrito "favicon", dá pra colocar seu ícone por lá também, sem precisar editar HTML ;)
    Beijo, Blog Apenas Leite e Pimenta ♥

    ResponderExcluir
    Respostas
    1. Com certeza, Leslie, realmente dá um ar mais profissional ao blog!
      Tentei alterar dessa maneira, pelo Layout, mas este modelo que estou usando não tem a aba do Favicon :(
      Mesmo assim, é uma ótima dica também!

      Abraçz

      Excluir
    2. Ahh sim, eu tive um layout que também não dava pra mudar por lá, tinha que ser pelo HTML também. É bom que se mais gente tiver esse problema, consegue se orientar pelo seu tutorial ;)

      Excluir
  4. Essa é uma ótima dica, o meu eu fiz com as iniciais do blog.

    Beijos/Kisses.

    Anete Oliveira
    Blog Coisitas e Coisinhas
    Fanpage
    Instagram

    ResponderExcluir
    Respostas
    1. Adorei o seu favicon, Anete! Super estiloso e autêntico <3

      Abraçz

      Excluir

Sua interação é sempre bem-vinda!!
Deixe seu comentário acompanhado do link do seu blog que retribuo a visita!! E não esqueça de seguir também para acompanhar as atualizações!