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
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.
Por dentro do assunto
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.
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:
- Faça o Upload do seu favicon gerado para o seu servidor ou para algum site de upload de imagem.
- 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
- 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.
- 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.
- Insira o código gerado no topo do seu site abaixo da tag, como mostra a imagem:
- 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.
- Assim que o arquivo for editado aparecerá a mensagem avisando que a modificação foi efetuada com sucesso:
- 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
- Vá até FTP ou CPANEL do seu site e procure o arquivo INDEX que pode ser um .html , . htm , .php ou .tpl :
- Em seguida procure no código, a tag de nome que vai estar no topo do seu código html.
- Insira o código gerado no topo do seu site abaixo da tag , como mostra a imagem:
- Em seguida mande para o seu servidor o arquivo modificado para que entre em vigor.
- 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!
Fonte. BlogInSite
