Download de jogos, programas, papéis de parede, aplicativos e muito mais. DESCAQUI                                                                                                                                                   

Ajude-nos a divulgar o nosso site

IconIconIconIconnosso Canal no YouTube

Hospede o seu site aqui neste servidor

Visualizações de páginas nos últimos 7 dias

Pesquisar

Traduzir em (Translate)

segunda-feira, 20 de abril de 2009

Criar um favicon para seu site ou blog.

FavIcon é o abreviação do Favorite Icon, palavras em inglês que podem ser traduzidas como Ícone Favoritos. 

Trata-se daquela pequena imagem (de dimensões 16 x 16px) que você vê na barra de endereços do navegador e colocada a esquerda do endereço do site e que também aparece na sua relação de favoritos quando você acresenta o site nos seus arquivos para favoritos. Se você olhar para a barra de endereços do seu navegador vai perceber que existe um favicon para o Blog do Descaqui-Download.

Criar um favicon para seu site ou blog é muito simples e compreende basicamente duas etapas:
Gerar a imagem
Colocar o favicon no HTML
Gerar a imagem

A pequena imagem de 16 x 16px do favicon é um arquivo com extensão .ico. Se o seu editor de imagens for capaz de salvar a imagem como ícone (com a extensão .ico) ótimo, você pode pular esta etapa. Contudo, os editores de imagens mais usados, como Fireworks, PhotoShop, Gimp, Corel, etc. não são capazes de salvar imagens como ícones (me corrijam por favor se algum destes editores for capaz).

Então terei que me virar em um editor de imagens para ícones?
Não, felizmente existem inúmeras ferramentas na Web que geram favicons online e você poderá usar uma delas.

Vou conduzir esta matéria baseado no gerador de favicons online do site da HTML-Kit que considero bastante simples e versátil além de oferecer possibilidades de criação de favicons animados e combinações de imagens com textos.

A sua primeira providência será desenhar o ícone com dimensões de 16 x 16px, no seu programa editor de imagens preferido e salvá-lo no HD (no seu pc) com extensão GIF ou JPG.
Abra no navegador, o gerador de favicons online do site da HTML-Kit e você verá uma tela, cuja parte que interessa mostra a seguir:



Clique no botão “Procurar” (1) e esta ação fará com se abra uma janela popup com a árvore do seu HD. Vá até o arquivo do ícone que você criou conforme explicado acima, marque-o e clique “Abrir” na janela popup. A janela fecha e o endereço do ícone no seu HD aparece no campo de texto “Sorce Image” (2). Clique no botão “Generate Favicon.ico” (3) e pronto. Está gerado seu favicon que será mostrado logo abaixo do formulário de geração conforme figura a seguir:



Na área “Preview” (1) você verá como ficou seu favicon.
Para visualizar o favicon no navegador, clique no botão “Teste in Browser” (2). Este passo eu considero desnecessário e aconselho você a não executá-lo.
Faça o download do favicon para seu HD clicando no botão “Download Favicon” (3) e o favicon será gravado na sua pasta padrão de downloads ou seja lá onde você escolher, como arquivo zipado. Descompacte o arquivo e você terá um arquivo nomeado favicon.ico. Mova este arquivo para o diretório raiz do seu site ou blog e faça upload para o servidor.
Colocar o favicon no HTML

O código HTML que faz funcionar o favicon deverá ser inserido na seção HEAD da página. Se você usa um template que inclui a seção HEAD via script em todas as páginas do site ótimo, basta acresentar a marcação em um só arquivo. Mas, se suas páginas são estáticas você terá que acresentar a marcação em cada página onde você quer que apareça o favicon.

Acrescente a seguinte marcação na secção HEAD do seu HTML

<link rel="shortcut icon" href="http://www.exemplo.com.pt/favicon.ico" type="image/x-icon" />

Pronto! Você agora tem um favicon no seu site.

Nota: Você não é obrigado a usar o nome favicon para seu arquivo e poderá renomeá-lo para o nome a sua escolha.
Mas atenção, não esqueça de renomear não só a imagem como também o link na marcaçãoHTML. 
Extras

Voltemos à primeira figura mostrada lá em cima e vamos observar que existem duas opções adicionais para gerar o favicon. As opções são (ver na figura) “Animate Favicon” (4) e “Scrolling Text (Opcional)” (5).

Se você fizer tudo como foi explicado no primeiro passo e também marcar a opção “Animate Favicon” (4), será gerado um favicon que fica rolando a imagem verticalmente em um loop infinito. Experimente! Você verá o favicon rolando no “Preview” sem precisar fazer download.

Nota: A não ser que você tenha uma boa justificativa para usar um favicon animado (por exemplo: o cliente que está pagando pelos seu serviços exige uma animação apesar de você ter tentado de todas as maneiras demovê-lo desta péssima idéia) recomendo vivamente não usar animação. Afinal é horrível para o usuário estar em uma página sendo obrigado a aturar aquela imagenzinha chata se mexendo sem parar.

A outra opção “Scrolling Text (Optional)” (5) permite que você digite um texto qualquer na caixa de texto e o seu favicon será animado também mas agora rolando na horizontal a imagem e a seguir o texto digitado em loop infinito. Experimente! Você verá o favicon rolando no “Preview” sem precisar fazer download.

Isto é tudo o que você precisa saber para gerar seu favicon personalizado. Se você não gostou da ferramenta faça uma busca no Google por “favicon” que será indicado uma grande quantidade de links para geradores de favicon online.