[Blogger - Customização] - Como colocar um favicon personalizado no seu blog

Olá querido leitor, seja bem-vindo a mais um artigo. No artigo de hoje veremos como customizar um pouco mais o nosso blog trocando o favicon padrão da plataforma Blogger, por um favicon customizado. Para quem não sabe o que é um favicon, e nem o que significa essa palavra, segue a explicação: Favicon é uma palavra derivada das palavras inglesas favorite (favorito) e icon (ícone), e são pequenas imagens que aparecem nas abas, e na barra de endereços, dos navegadores quando um site é acessado. Na imagem abaixo você pode conferir um exemplo de como é e onde fica localizado o favicon de um blog/site.

Favicon do portal de notícias da Globo

Pelos padrões da web um favicon deveria ser criado com exatamente 16x16 pixels de tamanho, mas com o crescimento na tecnologia utilizadas pelos navegadores mais atuais, é possível utilizar imagens com tamanhos maiores, uma vez que as mesmas serão automaticamente reduzidas pelo navegador. Geralmente o favicon é uma imagem reduzida da logomarca do site ao qual pertence, e deve estar no formado .ico (ícone). Alguns navegadores, no entanto, aceitam como favicon imagens com formato .png e .jpg, como por exemplo os navegadores: Mozilla Firefox, Opera e Google Chrome.

Mas qual é a vantagem de mudar o favicon?


A resposta é simples: ter um favicon customizado, além da questão visual, é muito útil para que seus leitores ao salvarem seu blog nos favoritos, possam reconhecê-lo apenas pela sua imagem, uma vez que cada blog tem o seu próprio favicon.

E se nenhum favicon for especificado?


No caso do autor do blog não especificar nenhum favicon — o que não é recomendado —, o navegador poderá se comportar de maneiras diferentes, e mostrar no lugar do favicon:
  • Uma folha em branco: ; ou,
  • O ícone da plataforma que foi usada para criar o blog/site: (no caso do Blogger).

Como instalar um favicon no Blogger?


1. O primeiro passo é criar o seu favicon, você pode fazer isso usando um programa de edição de imagens, como por exemplo o Photoshop. Eu não darei ênfase na criação do favicon em si, mas caso você não tenha nenhum programa de edição de imagens, você pode utilizar algum dos sites que oferecem este tipo de serviço gratuitamente.

2. Faça login no Blogger e acesse o painel de controle do seu blog, depois vá no menu Modelo, clique no botão Fazer backup / Restaurar e faça uma cópia de segurança do seu template clicando no botão Fazer download do modelo completo.

3. Clique no botão Editar HTML para visualizar o código fonte do seu template. Em seguida clique dentro do código do seu template e pressione Ctrl+F para abrir a caixa de Busca do editor. Procure o código abaixo.

</head>

4. Imediatamente acima deste código, adicione este outro.

<!-- Código para inserir um favicon personalizado no blog -->
<link href='http://link-da-imagem/favicon.png' rel='shortcut icon' type='image/x-icon'/>
<!-- Fim do código para inserir um favicon personalizado no blog -->


5. Substitua a parte que foi destacada em vermelho pelo link da imagem que você quer utilizar como favicon.

6. Clique no botão Visualizar modelo e, se estiver tudo certo, clique no botão Salvar modelo.

Pronto! Agora vá para a página inicial do seu blog e atualize-a para ver se o seu favicon está aparecendo corretamente. Se gostou do artigo, achou ele útil ou ficou com dúvidas sinta-se a vontade para participar postando um comentário.

Atualização — 03.08.2011 às 02h08
Recentemente o Blogger divulgou um novo recurso que permite a inclusão de um favicon personalizado sem a necessidade de inserir o código manualmente. Você pode conferir como acessar esse novo recurso no artigo: Novo recurso para adicionar favicon em um blog do Blogger.
É terminantemente proibida a cópia de nossos artigos sem nossa expressa autorização!
Plágio é crime previsto no artigo 184 do Código Penal brasileiro e na Lei 9.610/98.
As informações contidas neste artigo estão desatualizadas? Notifique-me! Editar artigo
Igor Sousa é dono e criador do blog Hdblog (antigo Bloggando Na Web). Tem 24 anos, é paulistano e atualmente cursa o 8° Semestre em Ciências Contábeis. Blogar era apenas um modo de melhorar sua redação de texto, mas unida a sua vontade de ajudar as pessoas passou a ser um hobby.

Foram postados 4 comentários neste artigo!

  1. Respostas
    1. Olá Gabriel, para utilizar uma imagem que esteja no seu computador, você deverá primeiro hospeda-la em algum lugar da web para poder utilizar seu link, ou usar o novo recurso do Blogger de upload de favicon. Você pode ler um artigo sobre esse novo recurso clicando aqui. Agradeço a visita e o comentário! Volte sempre.

      Excluir