27 de abril de 2009

Criando um Favicon (imagem da barra de navegação)


O significado de favicon é uma união de duas outras palavras que traduzidas são; favorito e ícone, esse nome se dá pelo fato que ao procurarmos algo na nossa lista de favoritos, que, muitas vezes não é pequena ele dê mais facilidade pra que se ache o site/blog, além dessa funcionalidade muitas pessoas gostam até porque o favicon ajuda a identificar cada página dentre as diversas abertas.

Criar um favicon é bem simples basta que você crie uma imagem em 16x16 ou 32x32 pixels em formato .PNG. Essa imagem pode ser criada por diversos programas, como Fireworks, Photoshop entre muitos outros e até sites que fazem esse serviço, embora eu não aconselhe, até porque é bem melhor você ver o resultado do seu trabalho.

Depois de criada e salva a imagem o restante é bem simples. Basta converter a imagem pra .ico e hospedar para obter o link direto da imagem.

Para converter a imagem .PNG para .ICO use o favicon.ru .



Clique em procurar para escolher a imagem e logo depois em create favicon .ico!




Clique em download... para finalizar essa parte.



Vamos agora hospedar a imagem com o PicPanda que eu pessoalmente gosto muito pela sua interface super simples.



Pegue a imagem .ico e faça o upload depois pegue o direct link.

Agora pra finalizar vamos colocar o favicon pra funcionar, usando um código com a marca do Compulsivo.

<link href="URL_DA_IMAGEM_FORMATO_ICO.ico" rel="shortcut icon">
<link href="URL_DA_IMAGEM_FORMATO_PNG.png" rel="shortcut icon">


Depois de inserir os links .ICO e .PNG vá no HTML do seu blog e cole o código logo abaixo de ]]></b:skin> .

Visualize o template e se estiver tudo certo salve e pronto veja o resultado de tanto esforço com bastante orgulho.

Se tiver algum problema é só comentar que daremos um jeitinho, caso não tenha comente também. ;)

leia mais em: Favicon:como criar e hospedar imagens .ICO. por: DicasBlogger

4 Comentários:

Brook disse...

Não consegui colocar no meu template...

Denis Silva disse...

ohnitle, explica melhor onde tiveste dúvida e que navegador você usa, que te informarei qual é o problema ou onde está ocorrendo o erro.

Anônimo disse...

tag < link tava copiando errado do seu post

tava inserindo :
&ltlink (talvez seja bug do blogger ou do meu pc)

vlw e obrigado!

Expert-Cheats disse...

A gente nao conseguiu adicionar por que fala isso aqui:

Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
Mensagem de erro em XML: Element type "href" must be followed by either attribute specifications, ">" or "/>".


Por favor, poderia nos ajudar?
Desde já agradecemos

Postar um comentário

  ©PontoPro - Todos os direitos reservados.

Template by Dicas Blogger | Topo