Favicon - Ícone Favorito

Este artigo visa esclarecer o que é ícone, o que é favicon, origem do uso de ícones nos computadores, e ensinar como produzir ícones e favicons.

 

O que é ícone

 

Origem da palavra ícone

Ícone se origina de eikon, que, em grego, significa imagem.
Daí, o termo iconografia, que é a arte de representar por meio de imagens (ícones).

 

Uso de ícones nos computadores

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 que estudar uma série de palavras e digita-las. Se errasse uma letrinha, o computador empacava! Assim funcionava, na era do DOS, com seu prompt de comando. Hoje, cada palavra daquelas pode ser representada por um ícone. É só clicar!

 

O que é o ícone no computador

Os pesquisadores da Xerox concluíram que se representassem a mesa de trabalho de uma pessoa na tela de um computador, de modo que, clicando sobre os elementos na tela, quaquer pessoa sem conhecimentos técnicos conseguiria interagir com a máquina. Daí a criação de pequenas imagens que representassem cada elemento que fizesse parte de uma mesa de trabalho. Calculadora, lápis, bloco de notas, telefone, etc.

Essa imagens tinham que consumir poucos recursos, ou seja, com poucos elementos, deveriam se parecer com o que representavam. Quase um logo. Um ícone. 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.

Observe, abaixo, como os elementos da mesa (acima), foram representados por ícones, na tela do computador (abaixo):

 

Quando o consumidor teve acesso aos ícones

Com base nos trabalhos dos pesquisadores da Xerox, surgiu o Smalltalk. Programa que, com os conceitos de ícones, fazia abrir janelas.
Esse crédito, portanto, pertence à Xerox e não à Apple, como durante muito tempo foi "vendida a idéia". Talvez porque a Apple tenha processado a Microsoft, alegando que haviam roubado suas idéias...

Na verdade, 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 e que, por algum motivo, se tornou líder no mercado.

 

 

Como criar um ícone no Paint

Depois de desenvolvida a idéia, ou seja, você já fêz uma pesquisa para ver se seu ícone é reconhecido pelo seu público alvo, e você já sabe como será o seu ícone, será necessário fazer a arte final. Em primeira instância, poderá ser um trabalho vetorial ou bitmap (mapa de bits).

No caso de bitmap, tendo em vista a própria simplicidade de um ícone, é recomendável que se use programas simples para desenhar o ícone, como o Paint da Microsoft, por exemplo. Em geral, os ícones são figuras bem pequenas e quadradas, 16 pixels x 16 pixels, 32 pixels x 32 pixels, 48 pixels x 48 pixels, 64 pixels x 64 pixels (ainda não estamos nos referindo a como criar favicon.ico).

O ícone pode ser usado em qualquer parte dos seus trabalhos, especialmente se for publicar na web. É como se fosse uma simplificação do logo.

 

Passo 1

Definindo o tamanho do bitmap do seu ícone no Paint

a) Abra o Paint e comande
Botão do Paint > Propriedades (Windows Seven ou superior)

b) Defina largura e altura do seu ícone (em pixels).
Por exemplo, um ícone de 16 pixels x 16 pixels.

 

Obs.: no Windows Vista, XP e anteriores, comande Imagem > Atributos

 

Na figura abaixo, conte os pixels (quadradinhos). Veja como, de fato, você tem 16 pixels na horizontal, por 16 pixels na vertical.

 

 

Passo 2

Desenhando seu ícone

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. Você desenhará o seu ícone, pixel a pixel, usando a Ferramenta Lápis com a menor espessura possível.
Também é possível abrir uma imagem pré-existente (criada vetorialmente, por exemplo) e REFINAR, pixel a pixel, o seu ícone.
Observe as nuances das cores nas bordas (o entorno da letra C tem um azul mais claro), de modo a dar acabamento ao ícone.

 

 

Passo 3

Salvando o seu ícone

Na hora de salvar, use Salvar Como, digite um nome e utilize a extensão .png, por exemplo, para ter uma qualidade muito boa (mais tarde você poderá converter para .ico, de ícone, se necessário).

 

 

O que é favicon.ico

 

favicon

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).

favorite icon

Dica: crie o favicon com fundo transparente, de modo a combinar melhor com as cores da barra de endereços do navegador.

.ico

Como .png, .jpg e .bmp, .ico é um formato de arquivo que, por padrão, deve ser de uma imagem quadrada, preferencialmente, de 16 pixels por 16 pixels. É como um ícone comum, com a diferença de ser criado especialmente para a barra de endereços (é muito pequeno).

 

 

Como inserir um favicon na página HTML

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.

 

 

Como salvar no formato .ico

Na Internet você poderá buscar por programas que convertem imagens .jpg, .gif ou .png para .ico. Existem dezenas deles, e gratuitos.

Uma opção é a conversão online pelo site 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 MS Paint grava ícones no formato .ico (basta escrever o nome completo, com extensão .ico). Porém não é, na verdade, 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.

 

 

Ícones gratuitos (free icon)

Na Internet você encontrará milhares de sites oferecendo ícones gratuitos. Se for um trabalho escolar, por exemplo, é uma mão na roda.
No entanto, se você for designer profissional, vale a pena desenvolver ícones apropriados, e dentro do conceito do trabalho que estiver desenvolvendo.

A seguir, alguns exemplos, baixados do site freeiconsweb:

 

Exercício

Clique na imagem abaixo (ícone grande) para fazer um download da imagem, para o seu computador.

Em seguida, abra a imagem no Paint, aumente o máximo possível e explore as nuances de cor, especilamente, nas linhas limítrofes entre as cores.

 

 

Distribuição Autorizada

Clique para Compartilhar com sua Network ou envie a URL
http://icone.online24hs.com.br