terça-feira, 22 de setembro de 2009

Alterando Favicon! Post único!


Antes de tudo algumas explicações;
Post Único, por que já pesquisei em vários blogs de ajuda a blogueiros e em apenas um encontrei o código de favico em um único post. O favicon é algo que se atualiza muito, ou seja, (cerveja!) seu código está sempre em mudanças para atender a todos os navegadores. E sim, este post será bem longo!  




E agora, leitor, saiba o que é favicon segundo a Wikipédia:

Favicons (palavra derivada de favorite (favorito) e icon (ícone)) são pequenas imagens no formato *.ico com de cerca de 16x16 pixels que ficam guardados em um site para visualização pelo navegador. Em alguns navegadores como Internet Explorer até a versão 6, só exibem os favicons quando um site é adicionado aos favoritos. Neste caso, apenas no menu correspondente aos favoritos pode-se encontrar a imagem. Em outros navegadores como Firefox, Opera e Internet Explorer 7(+), os favicons podem ser encontrados também nas abas e na barra de endereço.
Os favicons também tem teor de acessibilidade pois ajudam um usuário comum a identificar uma página quando ela está exibida em uma lista ou em uma barra de abas. Visando isto, muitos favicons são imagens simplificadas do logotipo da marca que representam.
Na ausência de um favicon, os navegadores exibem seu próprio ícone ou um ícone padrão como uma folha em branco.
Agora sim! Mãos a obra:
Primeiro você deve acessar este site ou usar algum photoshop para fazer seu favicon. Esta imagem (no caso de você usar um photoshop) deve ser de 16x16px. Após você ter esta imagem baixada em seu computador, transforme-a em *.ico a seguir, hospede-a, mas poucos hospedadores suportam o formato ico. Mas minha dica é o : Image Boo Hosting que hospeda nesse formato.  Então para o código funcionar em todos os navegadores (claro tirando aqueles que só o próprio criador usa):
Agora entre no HTML do seu template e procure (Ctrl+F) por:
]]>
Logo APÓS cole:
<link href='URL_DA_IMAGEM_ICO' rel='shortcut icon'/>
<link href='URL_DA_IMAGEM_PNG' rel='shortcut icon'/>
<link href='URL_DA_IMAGEM_PNG' rel='apple-touch-icon'/>
<link href='URL_DA_IMAGEM_PNG' rel='shortcut icon' type='image/x-icon'/>
 Visualize para ver se está tudo certo e salve!

0 comentários:

Postar um comentário

  © Blog por ISADORA FRAGA

TOPO