No início da década de 1970, uma equipe multidisciplinar de
pesquisadores da Xerox estudava a melhor forma de humanos
interagirem com computadores. O uso de ícones foi crucial.
Hoje parece óbvio, mas não era! Para você comandar o computador, quando as interfaces não eram
gráficas (não aceitavam imagens), tinha-se que estudar uma série de palavras e digitá-las.
Se errasse uma letrinha, o computador empacava! Assim foi a era do DOS, com seu prompt de comando.
Hoje, cada palavra daquelas pode ser representada por um ícone. É só clicar!
Pesquisadores da Xerox concluíram que se representassem uma mesa de trabalho na tela,
de modo que clicando sobre os elementos, qualquer pessoa conseguiria interagir com a máquina.
Daí a criação dessas pequenas imagens para representar cada elemento que faz parte de uma mesa
de trabalho: calculadora, lápis, bloco de notas, telefone, etc.
Assim, o ícone (na informática) é um símbolo gráfico, bastante simples e que
remete rapidamente a uma idéia ou imagem mais complexa.
Com base nos trabalhos dos pesquisadores da Xerox,
surgiu o Smalltalk. Programa que,
com os conceitos de ícones, fazia abrir janelas (como no Windows).
Esse crédito, portanto, pertence à Xerox e não à Apple.
No final dessa mesma década (1970), Steve Jobs da Apple, em visita à
Xerox, conheceu esses conceitos e teve acesso à documentação técnica do
SmallTalk.
Foi assim que, em 1983, a Apple lançou o primeiro
computador comercial cujo sistema operacional usava os conceitos de
ícones e janelas que, mais tarde, evoluiu para o famoso Macintosh.
Alguns anos depois, a Microsoft lançou o Windows, com o mesmo conceito,
tornando-se líder no mercado.
Como criar seu próprio ícone
Como criar um ícone no Paint
O ícone é uma figura muito pequena e, por esse motivo, a arte deve ser simples e fácil
de ser compreendida pelo seu público alvo.
O Paint é um programa aplicativo para a criação de bitmaps e, tendo em vista a própria simplicidade
de um ícone, é recomendado para a função. Os ícones são figuras quadradas
e muito pequenas:
16 x 16, 32 x 32,
48 x 48, 64 x 64 pixels.
Se achar muito difícil criar em áreas tão pequenas, comece com 256 x 256 pixels
e depois reduza o tamanho com um comando do aplicativo.
I - Definindo o tamanho do bitmap do seu ícone no Paint
a) Inicie uma instância do Paint com uma página em branco.
Você pode fazer isso pelo botão Iniciar
ou, na caixa de pesquisa, digitando Paint.
b) No Paint, clique no botão Redimensionar para abrir a caixa Alongar e Distorcer.
c) Na caixa Alongar e Distorcer, selecione Pixels, desmarque
Manter a taxa de proporção e defina um tamanho (horizontal e vertical), lembrando que os ícones
devem ser produzidos em áreas quadradas. No exemplo, usamos 256 por 256.
d) Clique em OK.
II - Desenhando seu ícone no Paint
a) Para maior precisão no desenho, faça o Paint exibir as linhas de grade, clicando na
guia Exibir e marcando a opção Linhas de Grade.
b) O uso da lupa também poderá facilitar seu trabalho. Aproveite e cheque se a opção
Barra de Status está marcada. Nessa barra, no canto inferior direito da janela,
você poderá regular o zoom.
Obs.: a área de desenho estará minúscula. Utilize a Ferramenta Lupa e aumente o máximo que puder,
de modo que você possa desenhar o ícone.
c) Escolha um pincel e uma espessura para que você possa
desenhar o seu ícone pixel a pixel.
Também é possível abrir uma imagem pré-existente (criada vetorialmente, por exemplo) e refinar,
pixel a pixel, o seu .
Observe as nuances das cores nas bordas
(o entorno da letra C tem um azul mais claro), de modo a dar acabamento suave ao ícone.
d) Salve seu trabalho no
formato .png para ter uma versão com qualidade muito boa e
para eventuais correções futuras.
e) Você tem sua imagem salva, mas ainda não tem o tamanho de um ícone.
Mas você pode ver como
ele ficará, redimensionando para 32 x 32, por exemplo.
Para obter a versão .ico, o ícone propriamente dito, prossiga com
o passo seguinte.
III - Convertendo de png para ico
Na Internet você poderá buscar por
aplicativos que convertem imagens .jpg, .gif ou .png para .ico.
Existem dezenas deles, e gratuitos. Uma opção é a conversão online pelo site www.favicon.cc.
No site, siga as instruções locais, clicando em Procurar (para localizar a sua imagem .png).
Após o programa processar, você poderá fazer o download para o seu computador da
imagem .ico.
Obs.: O Paint grava ícones no formato .ico (basta escrever o nome completo, com
extensão .ico). Porém não é uma imagem nesse formato. É uma imagem .bmp,
com extensão .ico. Isso pode fazer com que ora funcione, ora não.
Portanto, recomendamos o procedimento acima. Caso o site da favicon.cc não mais disponibilize o
serviço, certamente, você encontrará outras opções.
O que é favicon.ico?
Onde aparece o favicon no navegador?
Quando você acrescenta um site na sua lista de favoritos, é mostrado um ícone
junto ao nome do site. Esse ícone é chamado de Ícone Favorito.
Em inglês, favorite icon ou favicon. Favicon é a contração de
FAVorite e ICON.
Favicons são usados para identificar páginas de Internet no navegador (fica à esquerda
do título da página). O favicon pode ser o logo da empresa (ou parte dele, já que tem
que ser uma imagem muito pequena).
Como inserir um favicon no HTML 5
Entre as tags <head> e </head>,
insira a tag <link />, da forma seguinte:
<link rel="shortcut icon" href="URL_do_favicon" />
Obs.: você deverá substituir ''URL_do_favicon'' pela url do seu favicon.
Exemplo:
<link rel="shortcut icon" href="ciabyte.ico" />
Obs.: alguns navegadores suportam .gif ou .png como favicon. No entanto,
recomendamos o uso de .ico, que deve funcionar em todos.