Favicon significa Favorite Icon. Provavelmente nunca pensou que um favicon poderia ser visto como um dos elementos chave do seu blog, pois não? Então leia bem este post até ao fim, e provavelmente mudará de ideias.
O favicon para quem não está familiarizado com o nome, é aquele pequeno icon de 16×16 pixeis que aparece ao lado do endereço URL do nosso blog ou website, na altura em que o digitamos no browser.
Além de aparecer no browser, o favicon aparece nos favoritos (bookmarks) do browser ou de outra ferramenta de catalogação de websites, pelo que é importantissimo ter uma imagem sólida e atractiva relativamente aos outros websites ou blogs.
O favicon é então extremamente importante. Quantas vezes não ficou já de visitar alguns websites, mas perdeu-os no meio de tantos outros websites, pelo simples facto de não ter um favicon, ou não ter um favicon de que você se lembra-se?
Como criar um favicon e aplicá-lo no seu blog ou website
-
1- Embora um favicon não vá provavelmente fazer disparar o volume de tráfego do seu blog ou website, irá provavelmente oferecer-lhe maior consistência e branding, na hora de ser clicado por um utilizador que procura algo nos seus bookmarks.
O favicon é nada mais, nada menos, que uma imagem com 16×16 pixeis, gravada no formato .ico. É importante então perceber, que numa imagem tão pequena será extremamente complicado colocar uma imagem complexa. Foque-se em imagens simples e livres de complexidades, que sejam facilmente entendidas no meio de todos os outros bookmarks. Se conseguir marcar a diferença, certamente terá um sucesso acrescido.
Este é um exemplo de diversas marcas de renome e dos seus favicons. Os melhores exemplos quanto a mim serão provavelmente o simbolo da Adobe, do MSN, da Amazon e do Yahoo. Imagens simples mas que ao mesmo tempo transportam o branding e a imagem da empresa, que todos conhecem.
-
2- Utilizar ferramentas gratuitas para criar um favicon é o ideal. Uma das ferramentas que utilizo com maior regularidade para fazer trabalhos express, é o Paint.NET.
Embora o nome possa enganar, este Paint.NET é um software extremamente desenvolvido. Costumo-lhe chamar o “Photoshop para Dummies”, porque na realidade é bastante completo ao nível de ferramentas. Inclusivé trabalha com layers (níveis).A utilização deste software é básica. Utilize-o para criar uma imagem com 32×32 pixeis, e depois visite o website Favicon from Pics, que lhe transforma a imagem de 32×32 num favicon de 16×16 em formato .ico.
-
3- O Favicon from Pics é um projecto online fantástico. Pode criar e desenvolver imagens para os websites e blogs, e depois convertê-las automaticamente para favicons.
Aconselho que, mesmo que produza imagens de maior dimensão, faça-as sempre quadradas, ou seja, com a mesma largura e a mesma altura, mas que na hora da conversão não fique desfocada ou pixelizada devido aos ajustes.
O Favicon from Pics depois de fazer a conversão da imagem para icon, oferece-lhe ainda o código a colocar na sua página, e dá-lhe algumas dicas de onde o colocar. Veja o próximo passo. -
4- Se ainda não estiver satisfeito, e for um feliz proprietário de um blog Wordpress, então relaxe porque o plugin MaxBlogPress Favicon promete ajudá-lo e muito, a resolver este problema dos favicons.
Embora seja gratuito, este plugin irá necessitar de um registo, também ele gratuito, na página da MaxBlogPress, para que depois seja utilizado por si e unicamente por si. Um género de chave API do Google. A utilização do MaxBlogPress é básica e certamente não irei necessitar de explicar o seu funcionamento aqui.
Pode contar também com uma galeria (ver imagem em baixo) de favicons pré-fabricados, que poderá usar se não conseguir desenhar um à sua imagem e conforme aquilo que tinha desejado para si:
-
5- Depois de converter o seu favicon através da ferramenta atrás descrita, deverá fazer o upload dele para a raiz do seu FTP.
Entre no seu FTP (se não tiver peça ao seu prestador de serviços de alojamento), entre na pasta public_html, e de seguida faça o upload do icon.
Tenha a certeza de que está a colocar o seu icon na raíz do blog/website (root directory). -
6- Alterar o header do seu blog ou website é agora um dos passos essênciais. Este passo só deve ser dado depois de ter feito o upload do favicon para o FTP.
Visite o header.php do seu blog, e tome nota:Procure pelas tags <head> e </head> que é onde começa e termina o header do seu blog ou website.
O código que deve inserir para chamar o favicon, deve ser colocado em qualquer local, desde que esteja dentro destas duas tags.
Provavelmente o seu blog ou website já tem o código e a única coisa que tem de fazer é substituir o favicon no FTP. Por vezes acontece.
No caso de estar a fazer de raíz, coloque então o seguinte código:
<link rel=”shortcut icon” href=”/favicon.ico” type=”image/x-icon” />
Ficará com algo parecido a isto no seu website ou blog. -
7- Agora é importante testar o novo favicon e ter a certeza de que se enquadra bem na temática do site. Abra o seu browser e se necessário limpe os cookies referentes à sua página, unicamente, para que o novo favicon apareça de imediato.
Abra também algumas tabs e guarde o seu blog nos favoritos (bookmarks) e veja se este se distingue dos demais pela sua irreverência e qualidade.
Se necessário faça todo o processo novamente, até encontrar o favicon ideal e que transporte consigo todo o branding e essência da sua marca.
O favicon aqui do Fique-Rico foi construido com todas estas ferramentas. O paint.NET foi o software onde dimensionei a imagem e a trabalhei, e depois utilizei o fantástico Favicon from Pics para converter a referida imagem em icon.
Entretanto com as mudanças visuais aqui do blog, tenho de procurar trocar novamente o favicon, para algo que tenha a essência e o visual daquilo que aqui se faz. Faça o mesmo!
Convido-o agora a dizer-nos como criou o seu favicon, e se quiser deixar uma imagem com ele, seria também muito interessante.
Até Já!
Se gostou deste post, considere subscrever o nosso RSS Feed Completo!
Ou então Subscreva o Fique Rico por Email!
Diogo Pinto
Para a criação de favicons utilizo: http://tools.dynamicdrive.com/favicon/
Funcioa sempre e é um espetáculo! Bom post Paulo!
Abraço ;)
Diogo Pinto publicou um post sobre..Halterofilismo no seu melhor
Paulo Faustino
Olá Diogo. Obrigado pelo comentário.
Muito interessante. Vou analisar também. Obrigado pela dica. :D
Marcos Elias
Olá, ótimo post! Muita gente nem pára pra pensar no favicon :)
Só o que acho ruim é ele ser no formato “.ico”, poderia ser um GIF qualquer. Dá a falsa idéia para muitos de que seria difícil criar ou converter um ^^
Marcos Elias publicou um post sobre..Livro Linux – Entendendo o Sistema, para ler de graça pela web :)
Paulo Faustino
Olá Marcos. Obrigado pelo comentário.
Nesse aspecto também concordo. Embora a conversão para .ico seja bastante básica, como expliquei no post. Através da ferramenta “Favicon from Pics” é extremamente simples fazer um novo favicon para o seu blog ou website.
Vou agora tratar de fazer um novo aqui para o blog :D
Dourado
O engraçado é q vc não tem um favicon!
eu fiz dessa forma
http://querumbloggratuito.blogspot.com/2008/03/how-to-change-favicon.html
abraço
Dourado publicou um post sobre..Mais dicas e um selo
Dourado
foi mal, agora vi
mas é q tá muito desfocado, ou é um efeito?
abraço
Dourado publicou um post sobre..Mais dicas e um selo
Paulo Faustino
Olá Dourado. Obrigado pelos comentários.
O favicon é para alterar imediatamente. O próximo já deverá ficar melhor.
Depois diga-me o que acha quando o vir.
Até Já!
David
Extremamente exclarecedora a postagem, acho o favicon uma ferramenta muito interessante. Ja estou a criar o meu…
Paulo Faustino
Olá David. Obrigado pelo comentário.
Criar um favicon é uma questão de poucos minutos. Espero que as ferramentas indicadas o ajudem na criação do seu. Alguma dúvida por favor coloque um comentário.
Até Já :D
José Martins
Em relação ao favicon aqui do fique-rico, só aparece na página inicial. Quando se carrega no titulo da mensagem para ver o resto da mesma o favicon não aparece.
José Martins publicou um post sobre..Formatar folhas de dados
Paulo Faustino
Olá José. Obrigado pelo comentário e pelo reparo.
Vou analisar o que se passa, eehehehe :D
Daniela
Muito obriagada, este texto é de grande ajuda, estava a tempos pensando em colocar um favicon no meu humilde blog… :)
Daniela publicou um post sobre..Indiana Jones no cinema
Daniela
E acabei de assinar os feeds, porque esse blog promete me auxiliar muito nas minhas incursões pelo mundo dos blogs (sou blogueira desde 2004, levo a sério desde 2006 e pretendo que meu blog melhore de qualidade a cada dia.
Daniela publicou um post sobre..Indiana Jones no cinema
Paulo Faustino
Olá Daniel. Obrigado pelo comentário e bem-vinda ao Fique-Rico.
Agradeço a subscrição e espero corresponder com conteúdos à altura.
Alguma dúvida por favor contacte.
Até Já! :D
David Rabello
Necessito de um Help! Crie o favicon utilizando as ferrementas descritas, fiz o upload da imagen.ico e insertei o codigo, fiz o teste no favicon from pics validadtor e foi identificado imagen e codigo corretamente, no entanto nao esta a aparecer em meu browser,,,
se alguem puder ajudar agradeco.
diretorio raiz: alfamotor.50webs.com
Paulo Faustino
Olá David. Obrigado pelo comentário.
O seu favicon aqui funciona perfeitamente. Penso que seja um problema com a cache do seu browser. Aguarde alguns dias ou limpe a cache do browser.
Até Já.
David Rabello
Blz, Valeu Paulo, vou limpar o cache.
Abraco
David Rabello
A propósito, este foi um recurso que implantei no Alfa Motors 100% graças ao Fique-rico!
Paulo Faustino
É esse o objectivo colega. Se necessitar de alguma ajuda por favor coloque um comentário. Boa sorte com o projecto.
Até Já!
Alcione
Como faço para esse troço funcionar no Blogger? Não consigo de jeito nenhum!!
Alcione publicou um post sobre..Arte com alimentos II
Marco
Grato pela matéria ! Vou refazer o favicom do meu Portal,
baseado nas suas informações.
http://www.portalbl.com
Meia-Noite e Um
Engraçado mesmo,
o seu site não possui um favicon. Deveria ter.
Acabei de re-criar o favicon de meu blog.
Valeu pelas dicas e parabéns pelo site.
http://www.meianoiteeum.com.br
Douglas
Existe uma opção ainda mais prática de fazer ícones, pra qualquer uso:
- Crie uma imagem QUADRADA do tamanho do ícone que você quer (16×16, 32×32, 64×64, 128×128);
- Edite a figura como quiser;
- Salve em formato BMP;
- Renomeie a extensão do arquivo de .BMP para .ICO e está pronto!
Com isso dá pra usar ícones personalizados em todo o computador, além do favicon do seu site. :idea:
nands
Pois, o problema é mesmo com as imagens transparentes. Acho que vou por uma moldura à volta. :)