Como fazer selos e colocar favicon(ícone na barra de endereços) no blog?

Um dos posts mais comentados, e mais mencionados nos emails que recebo, é justamente o post que ensina como instalar um favicon no blog.

Se você não sabe o que é favicon eu  explico: é o ícone que aparece na barra de endereço do seu navegador quando você acessa alguns sites ou blogs. Ele torna seu blog mais personalizado, e mais facilmente reconhecido. Também "marca" muito mais quando alguém adiciona seu blog aos Favoritos. Adicione o meu e você entenderá!

No caso do meu Um pouco de mim é uma pequena orquídea. Mas pode ser qualquer imagem que combine com seu blog, com cerca de 16x16px e é aí que a coisa complica.
Mas vou tentar ser mais clara neste post e também vou falar sobre como criar selos para seu blog.
Vamos no passo-a-passo?
Primeiro o favicon:
Para continuar lendo acione o botão

Antes de mais nada você precisa de uma imagem. Lembre-se de que essa imagem será quadrada, no tamanho 16x16px, ou 32x32px e ela não deve conter muitos detalhes pois eles desaparecerão devido ao pequeno tamanho.

Escolhida a imagem que você deseja para seu favicon é hora de dar a ela a dimensão correta. Use para isso um editor de imagens. Calma, vou simplificar.

Acesse este site: Picnik e clique em Fazer upload de fotos. Vai abrir a sua pasta de imagens do seu pc. Escolha a imagem que deseja redimensionar. Depois que a imagem carregar clique em Redimensionar. Em Novas dimensões coloque os tamanhos que deseja: 16x16px ou 32x32 px. Clique em Salvar e salve em seu pc a imagem redimensionada no formato .png. Você faz isso escolhendo a opção .png na aba Formato que o Picnik oferece.

Observação importante: aprender a redimensionar uma imagem é muito útil. Servirá para mais coisas no futuro.

Agora seu favicon está quase pronto. A imagem salva está no formato .png e é preciso hospedar essa imagem para ter a url dela. Vamos então ao 2º passo?

Acesse este site: Tinypic. Ele é um hostess de imagens, ou seja, é um “hotel” para hospedar imagens. Para hospedar a imagem que será seu favicon clique em Enviar arquivo. Escolha a imagem que você está trabalhando e clique no botão verde escrito Upload_Button. Vai aparecer um código para você confirmar que é pessoa e não robô. Digite a confirmação (parecida com aquelas letrinhas chatas que alguns blogs possuem no sistema de comentários) e clique em Upload now; espere carregar a imagem.

Observação: aprender como hospedar imagens será sempre muito útil. Aproveite a chance pois quase tudo na blogosfera pede imagens com url.

Agora copie o endereço http que aparece abaixo da expressão Direct Link for Layouts. Este é o endereço da imagem do seu favicon.
E agora, finalmente, vamos aprender como colocar no blog?
Vem comigo!

Abra seu painel de controle do blog e escolha a opção Layout (ou Design). Agora escolha Editar html. Marque a caixinha Expandir modelos de widgets. Encontre este trecho:

]]></b:skin>

E cole, imediatamente abaixo dele este código devidamente modificado:
<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'/>

Sim, coloque o mesmo endereço nos 2 campos onde está URL DA SUA IMAGEM.
Agora clique em Visualizar. Se aparecer o favicon na barra do navegador clique em Salvar e tá feito.

Apenas um comentário: não são todos os navegadores que suportam o favicon. Eu testei no  Firefox e no IE8. Mas o Google Chrome também parece suportar. Mas se você usa o IE 6 ou 7 eu acredito que não funcionará. De todo modo, clique no link do Firefox e baixe o navegador. É grátis, não trava e não dá pau. Além de que a maioria dos blogs é melhor visualizada no Firefox.

Expliquei certinho?
Parece muito complicado, né?

Mas se você quer algo ainda mais simples pode colocar um favicon já pronto. Não será algo exclusivo seu pois muitas pessoas podem baixar o mesmo ícone, mas serve para ir se familiarizando com o processo de criar intimidade com o código fonte de seu blog.

Para colocar um favicon já pronto em seu blog visite um destes sites:

• Drikoti
• Evelyn’s Place

Escolha o seu e para colocar no blog siga o mesmo procedimento que ensinei acima, ou seja, sempre abaixo de ]]></b:skin>. Mesmo que o site de onde você pegou o favicon pronto diga para fazer diferente faça como eu estou dizendo para não haver erro.

Agora: Como fazer um selo para meu blog?
Sabe aquele site onde você redimensionou a sua imagem, o Picnik? É lá que nós vamos construir um selo lindo!
Para começar escolha uma imagem que free, ou seja, que não possua direitos autorais. Há muitos bancos de imagens: Bing, Google imagens, e este site aqui, que possui um banco com centenas de milhares de imagens lindas.

Escolhida a imagem ela deve ser salva em uma pasta tipo Minhas imagens em seu pc. Agora acesse o Picnik e clique em Fazer upload. Escolha a imagem que deseja trabalhar e clique para abrir. Espere carregar. Vai aparecer uma página com a sua imagem e as opções que o site oferece: Auto-correção, Girar, Cortar, etc. Para inserir texto clique em Criar.

Agora a diversão é garantida! Em Criar voce pode inserir texto com dezenas de tipos de fonte, pode emoldurar sua imagem, pode deixar a criatividade rolar solta!
Vá mexendo até se familiarizar. Dá para fazer banners para cabeçalho do blog, buttons para caixinha Link-Me, ícones para enfeitar seu blog e muito mais!

Todas as imagens que aparecem em meu blog passaram pelo Picnik, que aliás acaba de ser comprado pelo Google.

E aí? Gostou?
Faz seu favicon e me convida para ir ver?
O seu 1º selo pode ser pra mim?
Hein?