terça-feira, 30 de junho de 2009

O Favicon

Todos bonzins? Sim? Muito que bem.

Então tem que a pessoa não se contenta em escarafunchar todos os buracos possíveis do template do seu blog, aprender alguma coisa de CSS, descobrir, vejam só, códigos de cores para HTML, testar e destestar cada passo pra ver se ficou bonitinho e se o blog todo não foi cyber-ralo abaixo, nem gastar hooooooooras fazendo isso. Não. Há que se inventar mais alguma frescurinha pra dar aquele toque final, não é mesmo?

Pois é. É claro que é sempre aí que mora o perigo. É claro que é nessa frescurinha que você vai gastar mais horas do que gastou ajeitando TODO o seu template. Porque você é TRADUTORA, e não webdesigner, não é mesmo? Pois é.

Fui inventar de botar o favicon (ícone de favoritos) aí do lado do endereço na barra do navegador - tá vendo, mofio? tá? ah, que bão - e foi quase um parto. Umas muitas horas depois de navegação incessante na net em busca de informações, funcionou. Como sou boazinha, taí embaixo a fórmula. Testada e comprovada.



Para colocar seu favicon no seu blog (Blogger, porque ainda não cheguei ao ápice de minha loucura para manter mais de umdois blogs e ainda por cima em servidores diferentes):

O favicon, como o nome parece que diz, é um ícone, de 16 x 16 pixels. (Vc sabia que ícones têm extensão .ico? Agora sabe!) Então vc precisa em primeiro lugar criar seu ícone. Googla que vc vai achar zilhões de sites que oferecem ícones grátis, mas o baratinho é mesmo criar um para chamar de seu. Crie sua imagem, num tamanho não muito grande (vai facilitar ali na frente), quadradinha (mesmo número de pixels de largura e altura). Salve a imagem em JPG e guarde. Exporte essa imagem (eu usei o Photoshop) em formato PNG, com 32 x 32 pixels e guarde também.

Mas poxa, JPG não é .ico, néam, Dekka?! Não é. Então vamos tranformar a dita imagem em ícone. Dá um pulinho aqui e clica no botão "Choose file". Aqui você escolhe aquela imagem JPG que vc criou. Não marque mais nada e clique em "Create Icon". Em seguida ele dá a opção de baixar o ícone que foi criado (favicon.ico). Segundo experiência própria, melhor não renomear o bichinho, porque ele não gosta, fica revoltado e não funciona. A primeira parte foi concluída com sucesso.

Agora você precisa hospedar as imagens (o ícone e aquela de 32x32 pixels) em algum lugar. Se vc tem seu blog em domínio próprio com hospedagem, basta subir no seu FTP onde quiser, desde que saiba depois qual é o link pra imagem. Se não tem domínio próprio, use um servidor de arquivos grátis (googla que vc acha) e copie os dois links pro seu bloco de notas. Deve ser alguma coisa assim:

http://www.nomedosite.com/favicon.ico
http://www.nomedosite.com/32.png (32 é um exemplo de nome, vc pode chamar de... iconezinho se quiser)

Bota os endereços no seu navegador, pra ter certeza de que as duas imagens aparecem. Não custa garantir.

E o grand finale: ajeitar o código do seu blog. No painel de controle do Blogger, vá em Layout>Edit HTML.

Procure (coloque o cursor dentro da caixa onde está o HTML e dê CTRL+F no Ruindows e CMD+F no Mac) pela tag </head>.

Logo acima dela, adicione o seguinte:

<link href='http://ENDERECODOFAVICON.ico' rel='shortcut icon' type='image/vnd.microsoft.icon'>
<link href='http://ENDERECODOPNG.png' rel='icon' type='image/png'>

Substitua a CAIXA ALTA pelo endereço das suas imagens, como expliquei ali em cima. Salve seu template e saia pra tomar um café, uma água, ou fazer um xixi. Sim, me parece que demoram uns instantes pra começar a funcionar. Aí é só ir lá conferir seu site!

Eu testei no Safari, no IE, no Chrome, no Firefox. Todos os quatro gostaram muito, e mostraram direitinho o ícone.

Divirta-se!

0 comentários: