Definitivamente esta não é uma tarefa fácil. Há casos em que isto torna-se simples, principalmente quando você testa o resultado com o navegador correto. Vamos tentar falar um pouco sobre como fazer para ter seu favicon em algum site qualquer mostrando, ao final, uma pequena diferença entre os navegadores atualmente disponíveis. Vamos dividir entre um caso particular, o que o site em questão é um blog do blogger, e um caso mais geral.
Ficou com preguiça de fazer o seu? Veja aqui alguns favicons de graça. O nosso foi feito pelo Tiago J. Fonseca e está hospedado no servidor Stoa, veja aqui.
Vá em layout e selecione Editar HTML. Assim, você verá todo o código html de seu blog. Procure a seguinte tag em no código html de seu blog:
Na linha seguinte a esta tag, insira
Feito isso, abra seu blog e verifique se o favicon está lá. Se não estiver, verifique o endereço. Caso esteja correto, verifique se você adicionou a linha indicada no local correto. Se este também não for seu problema, post um comentário. Talvez possamos ajudar com a experiência que tivemos [2].
Praticamente acabamos. Só há um único problema, que citaremos mais abaixo. Vamos extender as discussões a quaisquer tipos de sites e o problema que discutiremos se aplica também aos blogs.
Originalmente, e considerando que você rode seu site em um servidor seu ou em que você possa usar livremente, bastaria adicionar uma imagem no diretório raiz, no formato ico com área 16x16 px², e o favicon já estaria definido. Automaticamente, o servidor passaria para o navegador o favicon.
Atualmente, temos como especificar via html a localização do favicon. Para fazer isto, temos que localizar o cabeçalho, que geralmente está entre as tags <head>, e adicionar dentro do cabeçalho uma tag <link>, assim como fizemos na seção anterior:
Para alguns navegadores, a imagem pode inclusive ser png ou gif [0]. Bastaria então utilizamos um script bem simples de Ajax para verificar qual navegador o usuário estaria usando para selecionar a melhor figura.
Pareceu difícil? Nem para mim: na verdade é praticamente igual ao modo como mostramos para o blogger, só que neste caso mais geral temos que localizar o cabeçalho. No entanto, transcreverei abaixo algumas palavras da Wikipédia.
Tradução: Entretanto, o Microsoft Internet Explorer apenas suporta por completo ícones que têm a extensão Microsoft Icon Files e que são salvos no formato ico (...). Isto significa que se seu favicon não for .ico e não estiver legitimadamente com a marca Microsoft Icon Files, então seu favicon simplesmente não será exibido no Internet Explorer. Isto não seria um problema se, e só se, menos de 20% do planeta usasse este navegador. No entanto, mais de 80% do planeta (quase o complementar) usa (e não muda) este navegador, que já causa problemas há muito tempo.
Conclusão: use seus favicons no formato ico e os converta para o formato Microsoft Icon Files (provavelmente o Fireworks já faça isso automaticamente).
Para mais artigos sobre como deixar seu blog mais LeGauss, veja este índice.
Sobre os favicons
Os favicons, também conhecidos como Ícones do Website ou Ícone de URL, é um ícone, de no mínimo 16x16 px², usualmente no formato png e salvo no formado ico [0], associado a uma url ou a um website. Na imagem abaixo, identificamos com uma circunferência perfeita vermelha (clique para ampliar a imagem).
Ficou com preguiça de fazer o seu? Veja aqui alguns favicons de graça. O nosso foi feito pelo Tiago J. Fonseca e está hospedado no servidor Stoa, veja aqui.
Incluindo seu favicon em seu blog
Mais uma vez, esta seção dedica-se especificamente a blogs hospedados no blogger [1]. Para adicionar seu favicon, primeiro o desenhe e hospede em algum servidor. Há inúmeros servidores em que você pode hospedá-lo, basta apenas que você tenha o endereço de sua imagem.Vá em layout e selecione Editar HTML. Assim, você verá todo o código html de seu blog. Procure a seguinte tag em no código html de seu blog:
<title><data:blog.pagetitle/></title>
Na linha seguinte a esta tag, insira
<link href="'ENDEREÇO COMPLETO DA IMAGEM'" rel="'shortcut" type="'image/vnd.microsoft.icon'/">
Feito isso, abra seu blog e verifique se o favicon está lá. Se não estiver, verifique o endereço. Caso esteja correto, verifique se você adicionou a linha indicada no local correto. Se este também não for seu problema, post um comentário. Talvez possamos ajudar com a experiência que tivemos [2].
Praticamente acabamos. Só há um único problema, que citaremos mais abaixo. Vamos extender as discussões a quaisquer tipos de sites e o problema que discutiremos se aplica também aos blogs.
Adicionando seu favicon em algum site
Vamos expandir o que mostramos anteriormente para qualquer site e, em tese, até para outros serviços de blog que permitem ao usuário a edição de seus código html.Originalmente, e considerando que você rode seu site em um servidor seu ou em que você possa usar livremente, bastaria adicionar uma imagem no diretório raiz, no formato ico com área 16x16 px², e o favicon já estaria definido. Automaticamente, o servidor passaria para o navegador o favicon.
Atualmente, temos como especificar via html a localização do favicon. Para fazer isto, temos que localizar o cabeçalho, que geralmente está entre as tags <head>, e adicionar dentro do cabeçalho uma tag <link>, assim como fizemos na seção anterior:
<link href="'http://img49.imageshack.us/img49/630/faviconer3.png'" rel="'shortcut" type="'image/vnd.microsoft.icon'/">
Para alguns navegadores, a imagem pode inclusive ser png ou gif [0]. Bastaria então utilizamos um script bem simples de Ajax para verificar qual navegador o usuário estaria usando para selecionar a melhor figura.
Pareceu difícil? Nem para mim: na verdade é praticamente igual ao modo como mostramos para o blogger, só que neste caso mais geral temos que localizar o cabeçalho. No entanto, transcreverei abaixo algumas palavras da Wikipédia.
However, Microsoft Internet Explorer only truly supports icons that have a legitimate extension of Microsoft Icon Files and that are coded in the icon file format. Many webmasters have changed their preferred image's extension to .ico without first actually converting them to Microsoft Icon Files. This created a conflict that Microsoft Internet Explorer cannot resolve; such icon images will not be displayed.
Tradução: Entretanto, o Microsoft Internet Explorer apenas suporta por completo ícones que têm a extensão Microsoft Icon Files e que são salvos no formato ico (...). Isto significa que se seu favicon não for .ico e não estiver legitimadamente com a marca Microsoft Icon Files, então seu favicon simplesmente não será exibido no Internet Explorer. Isto não seria um problema se, e só se, menos de 20% do planeta usasse este navegador. No entanto, mais de 80% do planeta (quase o complementar) usa (e não muda) este navegador, que já causa problemas há muito tempo.Conclusão: use seus favicons no formato ico e os converta para o formato Microsoft Icon Files (provavelmente o Fireworks já faça isso automaticamente).
Conclusão do artigo
Se você tem um blog e gostaria de receber bem seus visitantes, dê atenção a questões como as diferenças entre os navegadores, uma das quais apresentadas logo acima. Vimos como é fácil adicionar um favicon em um blog ou site sem nos preocuparmos muito com o servidor. Para tirar quaisquer dúvidas, post comentários.Para mais artigos sobre como deixar seu blog mais LeGauss, veja este índice.
Notas:
- [0] Alguns navegadores aceitam png ou gif, mas não o Internet Explorer, para o qual não fornecerei link algum.
- [1] Em outros serviços, nós não testamos. Caso você tenha tido essa experiência, poste um comentário!
- [2] Alguns blogs parceiros receberam auxílio.
4 comentários:
Ainda bem que a maioria dos usuários do nosso blog usam o Firefox! Mto bom o post.
Eu já consegui fazer no meu =p
E é legal esses boddypoke ai do nada :G
2 vivas para o emperialismo da microsoft \o/
é... acho q num vai rolar msm =P
lol ngm merece IE
Hahahaha é meu buddy poke... Estou tentando fazer ele em novas posições, mas é difícil...
Postar um comentário