Favicon.ico – Parte prática

Agosto 6, 2006

Continuação do artigo anterior, publicado no mxstudio.

Favicon.ico – Parte Prática

Pequena Introdução

Esse artigo é uma “continuação” de um outro publicado na seção de Usabilidade, com os conceitos teóricos.

Quem conhece as ferramentas do fireworks deve estar se perguntando “mas como eu vou fazer um arquivo .ico no fireworks? Até onde sei ele não exporta .ico…”. Aí vem a grande sacada =] . Algumas pessoas já tem o conhecimento de como criar e colocar no site o tal ícone, mas o que poucas pessoas sabem é que o formato do favicon.ico não precisa ser .ico (ícone), isso mesmo, ele pode ser favicon.jpg, iconedosite.png, preto-com-bolinhas-amarelas.gif (apesar que eu só testei gif e jpg…).

Pré-Requisitos

Macromedia Fireworks (qualquer versão dá certo, mas aqui eu usei o 8).
Bloco de Notas, Dreamweaver, Context ou qualquer outro editor de HTML que você preferir.

Objetivo

Criar e inserir no site o Favicon, que foi falado em um outro artigo, mas abordando mais sua funcionalidade. Nesse exemplo criaremos o ícone do MXStudio.

Conteúdo

Vamos então começar.

1 – Crie um arquivo de 16×16 com fundo transparente (testei também com o tamanho de 32×32 e deu certo, mas nenhum outro tamanho foi testado). File (Arquivo) – > New (novo) ou Ctrl + N .

2 – Vamos usar um zoom grande e a grade, eles ajudam muito em tamanhos tão pequenos. Para adaptar o zoom basta ir em View (Visualizar) – > Fit All (Mostrar tudo) ou Ctrl + 0 (zero) . E para Adaptar a grade vá em View (Visualizar ) – > Grid (Grade) – > Edit Grid (Editar Grade) e coloque em 1px por 1px. Se a grade não estiver ativa vá em View (Visualizar ) – > Grid (Grade) – > Show Grid (Mostrar Grade) ou Ctrl + Alt + G .

3 – Selecione a Pencil Tool (B) com a cor #0E88BD e desenhe algo mais ou menos assim:

4 – Agora com a Pencil Tool mesmo, mas com a cor #5F5C5C desenhe o resto do “m” :

5 – Vamos configurar a exportação em formato gif. No painel Optimize (Otimizar) [ Se ele estiver desabilitado vá em Window (Janela) - > Optimize (Otimizar) ou aperte F6 ] coloque GIF , no Matte (Arremate, acho) selecione o transparente (branco com uma linha diagonal vermelha), e coloque “Alpha transparency” (Tranparência do Alfa), como mostraa figura a seguir:

6 – Agora vá em File (Arquivo) – > Export (Exportar) ou pressione Ctrl + Shift + R e escolha o destino da imagem. E pronto, agora é so colocar uma linha no HTML, que será mostrada abaixo.

7 – Abra o editor HTML de sua preferência e coloque esta linha entre as tags <head> e </head> :

<link rel=”shortcut icon” href=”endereco-do-seu-icone-aqui.gif”>

Considerações finais

Vim nesse artigo mostrar na prática como é facil criar um ícone para um site, artigo este que veio complementar a teoria já citada.

Bem, espero que tenham gostado, e principalmente que usem esse recurso com bom gosto.

That’s All :)
—
Rochester Oliveira – Coluna de Fireworks
Para qualquer dúvida ou sugestão:
Mande um e-mail para Rochester Oliveira – rochester@mxstudio.com.br
ou visite o fórum do MXStudio
Publicado por rochester
Arquivado Web Design
2 Comentários »

2 Respostas para “Favicon.ico – Parte prática”

  1. Hoover al disse
    Agosto 12, 2006 às 9:14 am

    Hoover al…

    I am Karin, very interesting article that contained the information I was searching for in Google, thanks….

    Responder
  2. Focado disse
    Setembro 26, 2006 às 6:33 am

    Favicon.ico generator – gerador gratuito de favicons
    O favicon.ico � um pequeno �cone gr�fico que a maioria dos navegadores (Firefox e Opera, por exemplo) associa �s p�ginas da web, mostrando-os em tr�s principais locais:
    1) Na barra de endere�os:
    2) Na lista de bookmarks ou favoritos:
    3) Nas abas (tab…

    Responder

Deixe uma resposta