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.
4- Visualize se estiver tudo ok, salve.
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:
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:
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é!
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;