Ícones, Ícones com Fundo Transparente, Ícones Animados: FAVICON

Postado por ken adams em 6 de Março de 2008

Favicon é a junção dos termos em inglês Favorite Icon, que em português ficaria algo como Ícones dos Favoritos. Na prática, é aquele iconezinho que fica do lado esquerdo da URL, no campo de endereços do navegador.

Para gerar um favicon você deve, basicamente, seguir esses passos:

Criar um arquivo com extensão .ico
Fazer o upload do arquivo em algum servidor
Inserir a tag especifica na página web onde você quer mostrar seu ícone

1. Criando arquivo .ico

Os Favicons tem dimensões 16×16 pixels. Existe, basicamente, dois jeitos de criar um Favicon. O primeiro, a partir de softwares específicos de criação de ícones, sendo o mais famoso o Microangelo. Os programas de edição de imagens como o Adobe Photoshop e o Fireworks não criam esse tipo de arquivo.

O segundo jeito é criar uma imagem em qualquer programa de edição de imagens e usar ferramentas online para convertê-los para o formato certo. Recomendo dois ótimos Favicon Generator:

www.html-kit.com/favicon

Nessa primeira ferramenta, você tem a possibilidade de criar um Favicon Animado automaticamente (os favicons animados só podem ser visualizados no navegador Firefox, e eles, na verdade, são gifs animados com as dimensões 16×16 pixels).

tools.dynamicdrive.com/favicon

No Favicon Generator do Dynamic Drive (link acima), você tem a possibilidade de mesclar ícones para desktop (32×32 pixels, 48×48 pixels) no mesmo arquivo .ico gerado.

» Ícones com Fundo Transparente

Para criar favicons com fundo transparente é só criar um arquivo png ou gif com fundo transparente e enviá-los para essas ferramentas.

» Ícones Animados

Ícones animados podem ser criados no Adobe Fireworks ou Adobe Flash, depois exportados para o formato animated gif (não esqueça que as imagens devem ter dimensões 16×16 pixels). Nesse caso, não é necessários convertê-los para o formato .ico através dessas ferramentas.

2. Fazendo o Upload do Arquivo

Se você não tem onde hospedar o ícone que você criou com tanto carinho, coloque-o em algum servidor gratuito, como o Brinkster. Os sites de hospedagem de imagens como o Imageshack e o Photobucket não aceitam arquivos com essa extensão.

3. Inserindo a Tag no Código da sua Página

Insira a tag acima no seu código, entre as tags <head>. No href (entre as aspas) coloque o caminho certo onde está seu arquivo .ico, inclusive o nome do arquivo e formato.

Ou a tag acima para favicons animados (lembre-se: só será renderizado no Firefox). No caso, você pode colocar os dois. Assim se o usuário estiver usando um outro navegador que não seja o Firefox, o favicon tradicional será mostrado.

Pronto! É só!!! Have Fun…

Dicas, Web 10 Comentários

Hospedagem gratuita com suporte a ASP: BRINKSTER

Postado por ken adams em 19 de Novembro de 2007

O Brinkster oferece, além dos serviços pagos tradicionais de hospedagem e suporte de sites (que são bem em conta), planos de hospedagem gratuitas. São 3 tipos de planos gratuitos: Pessoal (personal package), Profissional (professional package, para empresas pequenas) e Desenvolvedores Web (developer package). Este último tem suporte para ASP 3.0 e ASP.NET, e é ideal para quem está aprendendo esta linguagem.

Às vezes, para gravar ou fazer upload de um arquivo demora um pouco ou até mesmo a requisição não se completa, mas é um dos melhores servidores gratuitos que já testei.

www.brinkster.com/FreePkgLanding.aspx

Dicas Sem Comentários

FavIcon Generator: ferramenta online para criação de ícones

Postado por ken adams em 18 de Novembro de 2007

No site Dynamic Drive DHTML existe uma ferramenta online para criação de favicon (aqueles iconezinhos que ficam do lado esquerdo da URL no campo de inserção do navegador, no caso desse site, aquela imagem do “D” dentro do quadradinho preto).

Para fazer um pelo FavIcon Generator basta pegar uma imagem de dimensões quadradas (por exemplo, 200×220 pixels, senão a imagem deforma) com no máximo 150k e fazer o upload no campo específico. Nas caixas de seleção do lado direito Merge with a 32×32 desktop icon e Merge with a 48×48 large XP icon, existe a possibilidade de criar um ícone compatível com a visualização de desktop (32×32px) e ícones grandes do XP (48×48px), respectivamente, tudo dentro do mesmo arquivo. Ainda, se você enviar uma imagem no formato gif ou png com fundo transparente, a ferramenta irá manter a transparência no ícone.

Site da Ferramenta: tools.dynamicdrive.com/favicon