Fixo
WhatsApp
11
11
3042.3036
946.432.520






Bom dia!
Voltar ao Topo
Mais Informações
Próprio ícone

Como criar meu próprio ícone

  • O que é Ícone
  • O que é Favicon - Ícone Favorito
  • Como criar um ícone no Paint
  • Como inserir o Favicon no HTML

O que é ícone?

Origem da palavra ícone

Origem da palavra ícone (pré-histórico)

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

Ícones nos computadores

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

O que representam os Ícones nos computadores

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

Dimensionar í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

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.

Desenhando o próprio ícone no Paint

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?

Como inserir um favicon no HTML 5

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.