Recentemente o Blogger (também chamado de Blogspot) fez uma atualização em seu painel de controle, alterando o modo de executar várias funções. Uma delas é o modo de adicionar um favicon, que agora está bem mais fácil.
Para quem não sabe, o favicon é um pequeno ícone que permite customizar seu site ou blog com uma pequena imagem que aparece na barra de endereços, nas abas dos navegadores e nos favoritos, como pode ser visto aqui no CriarSites.com
Como criar o favicon
O primeiro passo é criar o favicon que deve ter o tamanho de 16×16 ou 32×32 pixels e estar nos formatos gif, jpg, ico, png e etc.
Você pode criar esta imagem utilizando um editor de imagens como o PhotoShop ou Corel Draw ou então utilizar um serviço grátis de criação de favicons como é o caso do IconJ.
Para criar sua imagem, acesse o site do IconJ, clique em “Pic to Icon Converter” para carregar uma imagem que esteja em seu computador ou utilize o “Pixel Icon Generator” para converter sua imagem em pixels ou escolha um dos “Favicons animados“. Salve a imagem em seu computador.
Como adicionar o favicon no Blogger
Agora que você já criou seu favicon, acesse o painel de controle de seu blog no Blogspot, clique na aba “Design” e no campo “Favicon” clique em “Editar“.
Na nova janela que aparece, carregue a imagem que você salvou anteriormente em seu computador e clique em “Salvar“.
Pronto! Seu favicon já está configurado em seu blog, no entanto, pode ser que você só passe a ver ele depois que apagar o histórico de navegação de seu navegador de Internet.
Gostou deste artigo? Tem mais dúvidas sobre o Blogger? Deixe um comentário.
Você também poderá gostar de...
Como gerar o código de anúncios do Google Adsense
O que são e como adicionar páginas estáticas no Blogger
Adicione artigos relacionados no rodapé com imagens usando o LinkWithin
Como Adicionar o Share Sidebar ao Webnode, WordPress e Blogger
Como Customizar seu Site no Webnode com um Favicon
E-book Grátis – Como Criar um Blog Profissional no Blogger BlogSpot
Gerencie o RSS Feed de seu blog com o FeedBurner
Como Configurar um Domínio para o Blogger Corretamente no Uol Domínios
Escrito por Celso Lemes
Celso Lemes é Blogueiro profissional. Vivo de blogs, blogo para viver, vivo blogando, blogando eu vou vivendo.
{ 17 comentários… leia abaixo ou deixe o seu }
Ficou bem mais fácil mesmo Celso, no meu caso só deu pra ver o favicon no meu blog no dia seguinte.
Celso,
Muito boa a dica! Eu confesso que não tinha reparado, fui verificar agora.
Bom, quem sou eu para falar, mas eu acho que ao invés de você ter colocado o que é um favicon, poderia ter adicionado um link direcionando para dentro de seu site (ou continuar com a explicação, mas ainda sim colocar um link para um artigo seu que você explicou mais detalhadamente a respeito).
E um errinho básico, que acontece sempre comigo também: “para cnverter sua imagem em pixels” – você esqueceu do “o”.
Abraço
Francesco,
Eu não quis adicionar o link para a minha página em que eu falo sobre os favicons, porque isso iria complicar o artigo.
É certo que os visitantes tem que ler ou então pular esta parte, mas se eu fizesse diferente, as pessoas que não sabem o que é um favicon, poderiam ficar perdidas.
Além disso, o texto é relativamente curto, o que eu acho que não atrapalha muito.
Tem um ditado em Inglês que diz o seguinte “Keep it simple, stupid” que em Português quer dizer “Mantenha simplesmente estúpido” que em um Português mais polido seria algo como “Mantenha simples, de forma que qualquer pessoa entenda”.
Quanto ao erro no texto, eu já arrumei. Obrigado.
Abraço!
Post muito bom e Simples de intender, Pra bens…
Olá Celso se me permite gostaria de sugerir um outro site que gera favicon online o genfavicon.com muito bom site.
Abraços
Brasil E-books,
Obrigado pela dica. Vou olhar o serviço.
Abraço!
Quando fiz no meu blog era muito mais difícil, eu tive que mexer no HTML.
Bom Post Celso;
Também há casos em que o favicon adicionado nesta maneira, simplesmente não é reconhecido por algum motivo, como foi o caso do meu blog.
E para resolver fiz o seguinte:
Adicionei o código do link abaixo após a tag .
http://kbaus.webs.com/adicionar_favicon_blogger.txt
Trocando apenas o link para o seu favicom
( lembrando que o favicom tem que ser QUADRADO ) 24×24, 48×48, 16×16.
O código acima está com (espaços), pois não sabia se iria ser reconhecido como link aqui nos comentários.
Enfim, foi assim que consegui colocar o meu favicom no template que estou atualmente.
Miller,
Não sabia disso. Obrigado pela dica.
Ps. Editei seus comentários para não ficar confuso.
Abraço!
Eu sabia ja que podia mudar, mais eu ficava com raiva pq ñ aparecia.
Agora eu sei que tem que apagar o histórico … vlw ai! eu gosto muito do seu blog. me ajuda bastante.
Ana,
Imagina quantas pessoas que assim como você, devem ficar estressadas com esse pequeno problema, hehe. Obrigado por comentar.
Abraço!
O Blogger esta facilitando as nossas vidas!!
Parabéns por esta postagem me ajudou muito !
Celso, em primeiro lugar eu gostaria de lhe dar os parabéns pelo site e por dar atenção aos seus visitantes, eu prezo isso e sempre faço o mesmo em meu blog.
A minha dúvida é simples mas não consigo achar uma resposta, talvez você possa me ajudar e ajudar outros que tenha a mesma dúvida. Quero colocar o nome “Pesca na Lagoa” ao lado do favicon, igual ao facebook e microsoft. Será que tem algum jeito?
Dê uma olhada como está agora: http://pescanalagoa.blogspot.com. O favicon ficou legal mas quero incrementar.
Desde já agradeço a sua atenção.
Giovani,
Isso não é possível. Este recurso é o próprio navegador que faz com os sites de grande movimentação. Acredito que você esteja utilizando o Firefox.
No IE o Facebook não aparece.
Abraço!
Eu pensei que era um recurso criado exclusivamente pelos webmasters do facebook, microsoft, etc.
Obrigado pela ajuda.
Um abraço.
É um Bom recurso do blogger, e um bom tutorial, Obrigado, Porém eu já tinha visto isso, mais tipo ele não funciona em templates/themes personalizados (tipo, eu faço os meus pelo photoshop), pra isso tem um código que adiciona o favicon direto pelo HTML, mais não me lembro de có… mais uma vez, Belo Tutorial… Continuem Assim !!