Como criar um favicon personalizado no Blogger, no WordPress e em um site
5 de setembro de 2009
38 Comentários
Há vários dias as resenhas de blogs estão acontecendo no Analisando. A ideia inicial era a de apenas ajudar os blogueiros a encontrar pontos fracos de seus blogs, mas ganhei mais uma coisa com tudo isso: estou conseguindo mapear os principais problemas existentes em vários blogs por aí, e um deles é a falta de um Favicon personalizado, que pode contribuir muito para a visibilidade de suas páginas, principalmente dentro dos navegadores atuais. Muitos não se importam com os favicons, mas eles podem fazer uma grande diferença para os seus leitores, na hora de encontrar as páginas de seu blog dentro dos navegadores. Saiba como criar um favicon personalizado facilmente hoje!
O que são Favicons?
Os Favicons, inicialmente (nos navegadores mais antigos), eram utilizados como a imagem que fica ao lado do título de cada página favoritada. Isso ainda existe hoje, mas o Favicon também é utilizado em vários outros locais, como as abas de navegação no Firefox ou no Internet Explorer 7, ou do lado esquerdo da barra de endereço dos sites que estão sendo vistos. Veja na imagem abaixo alguns usos dos Favicons:
Muitos blogueiros nem se importam com esta opção, por achar que ela não fará diferença nenhuma na vida de seus leitores. Mas, quem costuma navegar com várias abas abertas, ou quem tem páginas favoritadas em excesso (como eu, hehe) adora esta opção, que ajuda a identificar com mais facilidade cada página.
Geralmente, a imagem do favicon personalizado é criada em formato “.ico”, e pode estar salva em qualquer página da web, ou em qualquer local além da raíz do seu servidor próprio de hospedagem.
Como crirar um Favicon personalizado?
O principal método utilizado é criar uma imagem comum, de 16×16 pixels e salvar no formato “.ico”. Você pode pegar algum ícone ou parte da imagem personalizada do cabeçalho de seu blog, por exemplo. Procure optar por algo que realmente se adeque às cores e à marca de seu blog.
Mas você pode criar o seu Favicon mesmo sem uma imagem personalizada. Basta ir no Free Icons Web e encontrar um ícone qualquer, transformar uma imagem ou foto em um Favicon com o FavIcon from Pics.
Colocar Favicon no Blogger
Depois de ter sua própria imagem de 16×16 pixels em formato “.ico”, colocá-lo no Blogger é bem fácil:
1. Hospede sua imagem em qualquer site que trabalhe com isso, como o ImageShack e pegue o link para a imagem.
2. Acesse as configurações de seu blog, e depois vá até “Layout” > “Editar HTML”.
3. Procue a tag que fecha o cabeçalho do blog (</head>), e digite o seguinte código logo acima desta tag:
<link href="link para a imagem"rel="shortcut icon"/>
Obviamente, substitua o trecho “link para a imagem” pelo link de sua imagem hospedada em algum site. Obs.: não retire as aspas simples antes e depois do link para a imagem.
Caso o favicon padrão do Blogger ainda persista, veja este post do André Felipe, que pode resolver o problema.
Colocar Favicon no WordPress
No WordPress, o processo é até mais simples que o do Blogger. Você tem duas opções: utilizar o plugin MaxBlogPress Favicon, que nos dá uma lista de vários ícones simples para utilizar, e também a possibilidade de fazer um upload de um favicon qualquer para utilizar rapidamente, ou atuar diretamente nos códigos. Com ele, não é necessário editar código nenhum dentro do WordPress.
Mas lidar diretamente nos códigos do WordPress pode ser até mais rápido do que utilizar o plugin, além de contribuir para nosso conhecimento geral. Para isso, siga os passos abaixo:
1. Com sua imagem colocada já na raíz do seu servidor ou em qualquer outra pasta (“/favicon.ico”), acesse o arquivo header.php do tema (template) que você está utilizando.
2. Localize o chamado Loop do Cabeçalho, que é como uma tag comum:
<?php wp_head(); ?>
3. Agora, logo acima desta tag, adicione o código a seguir:
<link rel=”icon” href=”link para a sua imagem” />
Como no tutorial do Blogger, substitua “link para a sua imagem” pelo link para o seu “favicon.ico”.
Colocar Favicon em um site
Se você não utiliza o WordPress nem o Blogger, mas tem um site criado em qualquer outro lugar, ou produzido manualmente, também pode colocar o seu favicon facilmente, é só utilizar a mesma tag que usamos no tutorial acima, do WordPress:
<link rel=”icon” href=”link para a sua imagem” />
Lembre-se que é necessário colocar este link dentro do cabeçalho do seu site, normalmente entre as tags <header> e </header>.
Tudo certo?
Provavelmente, você já conseguiu colocar o seu favicon utilizando este tutorial. Caso tenham alguma dúvida, não hesitem em perguntar nos comentários deste artigo. Não entendo muito sobre códigos, mas posso ajudar no que puder.
Créditos de parte da imagem do início do post: Alorza, no Flickr.
Oculos de Sol (2)
MDB - Mundo Dos B... (1)
Servidor (1)
Alan,
parabéns pelo tutorial, muito bem explicado,
um abraço.
Veja o último artigo do/da Gustavo Freitas em seu blog: Crie seu abaixo assinado na web
[Reply]
Alan Niemies Reply:
setembro 6th, 2009 at 20:14
@Gustavo, muito obrigado!
@Lugirão, que bom que passei o recado, hehe. Sorte na colocação!
@Nanda, espero que funcionem! Sobre as postagens, você deixou o CommentLuv ativado? Às vezes pode ter desativado a caixazinha dele logo abaixo do botão de enviar comentário.
@Catarino, que bom! Vou lá ver, hehe.
Um abração à todos!
[Reply]
Allan, só agora entendi o que é Favicon,rs.
Vou colocar no meu, conforme sua dica.
Bom domingo.
Veja o último artigo do/da Lugirão em seu blog: Amor & Loucura (um texto encontrado)
[Reply]
Sempre quis ter um desse e não sabia como fazer, vou usar as dicas, não hoje, mas brevemente!
Muito legal, obrigada!!!!
[Reply]
Minhas últimas postagens não estão mais aparecendo quando comento aqui, estou fazendo algo errado?
Bjão!
[Reply]
Alan
Grande dica, fiz no meu blog e deu certo. Consegui seguir todos os passos, muito boa a explicação.
Abraço
Catarino
Veja o último artigo do/da Catarino em seu blog: Dia da Independência. Homenagem à Pátria.
[Reply]
Alan,
Eu já utilizo o favicon desde o ínicio do meu blog em WordPress e considero que os favicons são de facto uma marca distintiva de um projecto que não se deve descuidar.:)
Este artigo ajuda a criar favicons no blogger, wordpress e noutros sites, dessa forma ajuda todo o tipo de leitores a criarem o seu próprio favicon dependendo da sua plataforma.
Um post muito democrático. Parabéns!
[Reply]
Alan Niemies Reply:
setembro 7th, 2009 at 17:53
@Vitor, assino abaixo de tudo o que você falou. Obrigado pelos elogios!
Um abração!
[Reply]
Estou deixando marcado sim, mas ele dá a resposta OH no! Comluv had an erro with your feed… depois que eu coloco o nome do meu blog multiplas realidades.
Aaaah…Já vi agora! eu estava colocando o nome do blog errado! Agora foi!
Bjão!
Veja o último artigo do/da Nanda Botelho em seu blog: PARA SER BOM NÃO PRECISAMOS SER “O” MELHOR
[Reply]
Alan Niemies Reply:
setembro 9th, 2009 at 13:38
@Nanda, agora funcionou mesmo, hehehe.
Eu vi o errinho no nome do blog, mas pode deixar que já conserto!
Um beijão!
[Reply]
Ótimo post
Você narrou tudo de uma forma muito simples e eficaz de criar e colocar o favicon no blog.
Abraços
Veja o último artigo do/da Dani em seu blog: Frases de Amor
[Reply]
Alan Niemies Reply:
setembro 11th, 2009 at 07:56
@Dani, espero que possa ter sido útil pra você.
Um abraço!
[Reply]
Ótima a dica Allan.
Vamos lá ver se consigo.
Abraço.
Veja o último artigo do/da Guara em seu blog: A simbologia do sapo.
[Reply]
Alan Niemies Reply:
setembro 12th, 2009 at 17:44
@Guara, se tiver algum problema, não hesite em me perguntar, pois talvez eu possa ajudá-lo.
Grande abraço!
[Reply]
Oi Alan,
Esta é uma das dicas(criticas) que você fez ao Utilnet.
Estive a ler este post, pois vou seguir a sua “recomendação”.
Muito útil, valeu pela dica.
Abraço,
Miguel (Utilnet)
Veja o último artigo do/da Miguel (Utilnet) em seu blog: Análise crítica ao Utilnet (feita por: Alan Niemies)
[Reply]
Alan Niemies Reply:
setembro 15th, 2009 at 08:02
@Miguel, que bom!
Espero que o tutorial para o Blogger funcione facilmente.
Grande abraço, e um bom dia!
[Reply]
Junto com a dica do André Felipe eu, enfim, consegui colocar um favicon no meu blog!
Muito obrigado!
Veja o último artigo do/da Diego Reigoto em seu blog: True Blood: Season Finale da Segunda Temporada e Considerações Gerais
[Reply]
Alan Niemies Reply:
setembro 16th, 2009 at 14:38
@Diego, que bom!
E ficou legal. Aliás, seu blog é bem limpo, parabéns.
Um abraço!
[Reply]
Ótimo post,
Agora tenho motivos para adicionar um favicon no meu blog…
Gostei do seu template ^^
Veja o último artigo do/da Wellington em seu blog: Dicas para manter o seu WordPress seguro
[Reply]
Alan Niemies Reply:
setembro 16th, 2009 at 20:52
@Wellington, que bom que gostou, e obrigado pelos elogios!
Espero também que tudo dê certo no uso dos Favicons.
Um abraço!
[Reply]
Nossa tava com a maior dificuldade de colocar favicon no meu blog, assinei o seu feed, ai lendo hoje cai no seu post, pronto com as suas dicas tudo ficou facil facil.
Muitissimo Obrigado!
Veja o último artigo do/da Nicolas em seu blog: Tatuagem Maori, elegância estampada na pele!
[Reply]
Alan Niemies Reply:
setembro 19th, 2009 at 10:16
@Nicolas, que bom! Fico super feliz. E obrigado pela assinatura nos Feeds!
Grande abraço e um bom dia!
[Reply]
Olá, Allan!
Segui o tuto, mas só consigo visualizar no IE, no Firefox não aparece nem com reza braba, o que pode ser?
Veja o último artigo do/da Cynthia Santos em seu blog: Selinho…
[Reply]
Alan Niemies Reply:
outubro 7th, 2009 at 20:32
@Cynthia, qual é o formato da imagem que está tentando enviar, .ICO?
E você seguiu tudo perfeitamente?
[Reply]
alan amigo o dificil pra mim como sou novato e encontrar essa tag. Mais vou tentar, quem sabe não ganho mais uma batalha de tantas que eu já enfrentei sozinho.
Veja o último artigo do/da Concentrado em seu blog: Jogos que os homens gostam que podem destruir com seu casamento
[Reply]
Alan Niemies Reply:
janeiro 4th, 2010 at 08:41
@Concentrado, é só ir procurando minuciosamente que você o acha. Um boa ideia é utilizar a função “Localizar”, do Firefox (se estiver usando-o), no atalho CTRL+F.
Tente marcar a opção “expandir Widgets”, também. Pode ser que funcione.
Um abraço!
[Reply]
Oi Alan,
conforme comentei aqui tempos atrás, criei uma extensão de seu post no blog Aabaca.
Espero que goste.
Douglas
Veja o último artigo do/da Aabaca Blogspot em seu blog: Crie um favicon personalizado no Blogger, WordPress ou em um site
[Reply]
Alan Niemies Reply:
março 13th, 2010 at 22:11
@Aabaca, fico muito grato pela citação do meu texto lá no seu blog!
Obrigado mesmo, toda citação é muito bem vinda.
Um grande abraço e muito sucesso!
[Reply]
Oi Alan!
Quando a gente copia o link do jeito que você colocou aqui: , dá erro no Blogger.
Trocando as (‘) por (“), funciona e o icon aparece lá.
Abraço.
[Reply]
Alan Niemies Reply:
abril 3rd, 2010 at 15:54
@Douglas, opa, fico muito grato pelo aviso!
Vou trocar agora mesmo as aspas simples pelas duplas.
Um grande abraço e muito sucesso!
[Reply]