05 janeiro 2010

Colocando a favicon no blog

O que é Favicon

Favicon (Favorite Icon, em inglês) é aquele pequeno ícone que aparece na barra de endereços do navegador e/ou na aba do navegador, além de ser exbido quando o usuário adiciona o site aos favoritos.

Criando e inserindo o seu Favicon

Para criar o seu Favicon você irá precisar de duas imagens no tamanho de 16 x 16 pixels uma no formato PNG e outra convertida para o formato ICO.

1- Para criar a imagem que você irá utilizar como favicon acesse o site: Favicon.cc ou então utilize um programa Adobe Photoshop ou Adobe Fireworks se a imagem for feita no programa você terá que converte-la para o formato ICO para fazer isso acesse: http://iconverticons.com/ ou então http://www.favicon.ru/en

2- Hospede as imagens no site Image Boo Hosting (saiba mais como hospedar suas imagens) e anote o endereço das duas imagens.

3- Vá em "Layout" e depois em "Editar HTML" e localize a linha ]]></b:skin>; (Dica: utlize CTRL +F do teclado para encontrar tags no HTML do template) e logo após cole o seguinte trecho, adaptando o endereço dos arquivos que você acabou de hospedar:

<link href='URL_DA_IMAGEM_ICO' rel='shortcuticon'/>
<link href='URL_DA_IMAGEM_PNG' rel='shortcuticon'/>
<link href='URL_DA_IMAGEM_PNG'rel='apple-touch-icon'/>
<link href='URL_DA_IMAGEM_PNG' rel='shortcut icon'type='image/x-icon'/>
Esse código irá funcionar em todos os navegadores!

Se o código acima não funcionar no seu template utilize-o assim:

link href='URL_DA_IMAGEM_FORMATO_ICO.ico' rel='shortcut icon'/
link href='URL_DA_IMAGEM_FORMATO_PNG.png' rel='shortcut icon'/

4- Visualize se estiver tudo ok, salve.

2 Comentários:

Anônimo disse...

Hello!!

(óia eu aqui traveiz! hehehe)

Infelizmente não funcionou, deu aquela mensagen de erro básica do blogger mas consegui fazer com esse cod:

link href='URL_DA_IMAGEM_FORMATO_ICO.ico' rel='shortcut icon'/
link href='URL_DA_IMAGEM_FORMATO_PNG.png' rel='shortcut icon'/

(tirei as < > pra postar hihihih)

E os sites que vc citou não hospedam .ico então encontrei este: http://www.imageboo.com/upload.php

Mas valeuuuzão pelo post, no fim da história deu tudo certo :)

Inté!

Ramon Ricardo disse...

Obrigado pela dica Gizza

Postar um comentário

Leia as regras:
Todos os comentários são lidos e publicados, se respeitados os critérios:
Para encomendas de logomarcas e outras artes, leia: Ilustrex
Não peça parceria por aqui entre em contato
Ofensas pessoais, ameaças e xingamentos não são permitidos;
Seu comentário precisa ter relação com o assunto do post;
Não inclua links desnecessários no conteúdo do seu comentário;

  ©Template by Pelo Estilo and Dicas Blogger - Contato - Termos de Uso

TOPO