Nov
18
Como inserir um favicon no seu site ou blog
Postado em (Blog Dicas, Tutoriais) por Equipe de Suporte Técnico em 18 / Nov / 08.

Olá! Neste artigo, vou mostrar como fazer uma imagem para ter um favicon no seu blog ou site e ensinarei também como inserir o código no wordpress para que essa imagem apareça no seu navegador e na barra de favoritos.

Por dentro do assunto

Favicon – O que é?
A palavra Favicon é derivada de favorite (favorito) e icon (ícone).
São pequenas imagens no formato *.ico com de cerca de 16×16 pixels que ficam guardados em um site para visualização pelo navegador.

Favicon – Pra que serve?
Os favicons 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.

Favicon – Como funciona?
Como falamos anteriormente, o favicon fica guardado em um site para poder ser visualizado pelo navegador.

Ele precisa estar hospedado em algum site (o seu, por exemplo) ou em algum banco de imagens on line (imageshack, Photobucket, etc.) para poder aparecer. Alguns navegadores, como Internet Explorer até a versão 6, só exibem o favicon 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. Na ausência de um favicon, os navegadores exibem seu próprio ícone ou um ícone padrão como uma folha em branco.

Tutorial prático

Antes de mais nada você deve escolher a imagem que vai se transformar no favicon do seu blog ou site.

O ideal são imagens que fiquem bem nos tamanhos padrão usados pra esse tipo de arquivo, que é de 16×16 pixels (um quadrado). Você cria a imagem e salva no photoshop na opção SAVE FOR WEB e seleciona o formato GIF e salva. Depois de ter a sua imagem em formato GIF pronta, vá até um gerador de favicon, como esse da DynamicDrive e adicione sua imagem e ele criará automaticamente uma imagem pronta pra ser usada na web e no seu site.

Inserindo o favicon no código do seu blog ou site

Depois de você criar o favicon é hora de você inserir-lo no seu blog ou site. Pra isso siga os passos abaixo:

  1. Faça o Upload do seu favicon gerado para o seu servidor ou para algum site de upload de imagem.
  2. Verifique se a imagem se encontra hospedada checando o link direto pra imagem ex.: http://url.com/favicon.ico, onde esta escrito “url.com” você insere o endereço do seu site.



Exemplo de código gerado para favicon:
(se preferir copie este código abaixo e só substitua o endereço pela URL da imagem que será o seu favicon.)


WordPress

  1. Depois vá até o Editor de temas do seu WordPress acessando pelo endereço http://www.seublog.com/wp-admin/, deve inserir seus dados de Login pra acessar ao painel de administração.

  2. Em seguida seleciona na listagem de páginas em php que aparecem ao lado direito, o arquivo de nome HEADER(header.php) pois quando você acessa ao painel , é padrão aparecer aberto o arquivo de css pra edição.


  3. Insira o código gerado no topo do seu site abaixo da tag, como mostra a imagem:




  4. Fique atento ao nome do php que você está editando, tem que ser o HEADER.PHP Em seguida clique em Update file para que as modificações entrem em vigor.


  5. Assim que o arquivo for editado aparecerá a mensagem avisando que a modificação foi efetuada com sucesso:


  6. Vá para a index do seu blog ou site e você observará que a imagem já consta na aba do seu navegador e no campo do endereço do site:


Site

  1. Vá até FTP ou CPANEL do seu site e procure o arquivo INDEX que pode ser um .html , . htm , .php ou .tpl :
  2. Em seguida procure no código, a tag de nome que vai estar no topo do seu código html.
  3. Insira o código gerado no topo do seu site abaixo da tag , como mostra a imagem:


  4. Em seguida mande para o seu servidor o arquivo modificado para que entre em vigor.
  5. Vá para a index do seu site e você observará que a imagem já consta na aba do seu navegador e no campo do endereço do site:

Gostou deste artigo? Deixe seu comentário!

Veja também:

(8) Commentários    Leia o post completo   


Comentários:
8 Comentários em "Como inserir um favicon no seu site ou blog"
Anderson Custódio on November 18th, 2008 at 9:59 pm #

Tem esse plugin para o photoshop que adiciona a extensão “ico”, assim da para salvar direto, sem ter que salvar em “gif” e depois converter.


Ale Rocha on November 20th, 2008 at 11:22 am #

Obrigado pela dica. Já tinha um favicon em meu blog, mas no formato GIF. Com este post, pude salvar em ICO, além de adicionar novas instruções – rel=”icon” e mce_href, que não conhecia.


deme on December 19th, 2008 at 10:36 pm #

legal, eu não consegui…


Cris Rocha on December 29th, 2008 at 12:44 pm #

Anderson Custódio – essa extenção é realmente muito útil, posso providenciar depois um tutorial de como usar essa ferramenta.
Ale Rocha – fico feliz que a informação foi útil !
deme – vc teria como me reportar qual foi o problema ?


Caio on February 5th, 2009 at 5:48 pm #

Só serve para WordPress?


Insite on February 12th, 2009 at 8:08 pm #

Caio. Esta dica serve para qualquer tipo de site.


Inblog Dicas, o blog de dicas da Insite Soluções Internet » Blog Archive » Ferramentas on-line para sites on April 22nd, 2009 at 6:06 pm #

[...] post Como inserir um favicon no seu site ou blog criado é explicado como incluir um ícone exclusivo para seu site. Para criar esse ícone a partir de uma [...]


Fabio Dias on May 7th, 2010 at 7:21 am #

Ok….
Blza muito bem explicado….
Valeww cara…!!!!
…usei par wordpress.