Criar um Favicon

Como Fazer Um Site >> Add-ons e Suplementos >> Criar um Favicon

O favicon é um pequeno icon com 16x16 pixels que aparece junto à barra de endereços do browser (junto ao URL) e nos separadores do browser. O favicon aparece também nos "Favoritos" junto ao nome dos sites que adicionamos àquela categoria.

Uma das formas mais fáceis de criar um favicon é usando o Photoshop. Quem não tem este programa pode recorrer a geradores de favicon online. Começo por indicar alguns desses geradores de favicon.

Geradores de favicons

Se você não tem o Photoshop instalado no seu computador você pode conseguir um ficheiro com a extensão ".ico" através de geradores de favicons online.

No site Favicon Generator você coloca o texto e as cores que pretende e automaticamente é criado um favicon para si.

Se você já tiver um icon criado com a extensão ".gif", você pode usar um dos seguintes sites para o transformar num ficheiro ".ico":

FavIcon (permite fazer favicons animados)
favicongenerator

Programa de conversão para ficheiros ICO

Existe também um programa freeware que às vezes eu uso. É um programa simples mas funciona muito bem e permite também visualizar e transformar ficheiros GIF em ficheiros ICO. É o IrfanView. Pode fazer download grátis do programa aqui.

Se não tem Photoshop avance para o ponto "Upload do Favicon".

Criar um Favicon com o Photoshop

Activar o plug-in

O favicon é um ficheiro com a extensão".ico". Só é possivel guardar ficheiros "ICO" no Photoshop através de um plug-in.

O plug-in para gerar ficheiros ICO está disponivel gratuitamente para download aqui.

Para activar o plug-in basta copiar um pequeno ficheiro para uma pasta do programa do Photoshop e já está. Siga estes passos:

faça download do plug-in aqui
copie o ficheiro "ICOFormat" para a pasta "File Format" (essa pasta normalmente está localizada em C:\Programas\Adobe\Photoshop\Plug-Ins\File Formats)
se o programa Photoshop estiver aberto feche-o
abra o Photoshop
para salvar um ficheiro com a extensão ".ico" é só fazer "Salvar Como" e escolher o formato "ICO" que agora já aparece na lista.

Criar uma imagem

Passos para criar um Favicon no Photoshop após ter activado o plug-in de favicons:

abra uma nova imagem, quadrada, com uma dimensão suficientemente grande, que permita editá-la e que permita visualizar bem o que se está a fazer. Pode usar por exemplo uma imagem com 150x150px. Quando a imagem estiver pronta será então reduzida para as dimensões de icon 16x16px.

Imagem 150x150

Icon 16x16
não use muitos detalhes, pois quando a imagem for reduzida os detalhes podem desaparecer ou ficar imperceptiveis. Usar apenas duas cores normalmente resulta bem no aspecto final do icon. No "Custom Shape Tool" pode usar um dos muitos icons que vêm com o Photoshop.
quando terminar de editar a imagem, vá ao menu "Image", seleccione "Image Size", e altere então as dimensões para 16px de largura e 16px de altura.
se estiver contente com o aspecto final do seu icon faça "Save As", escolha o formato "ICO" da lista, e salve o ficheiro com o nome favicon.ico.

Upload do Favicon

O ficheiro favicon deve ser colocado na raiz do seu site (no mesmo local aonde está o ficheiro index.html).

Código para que o Favicon Funcione

Todas as páginas do seu site para as quais você quer que o icon apareça na url do browser, nos separadores ou nos favoritos, têm que ter o seguinte código no interior das tags <head> e </head>:

Se mesmo assim o favicon não aparecer

Eu tive alguns problemas em conseguir que o Favicon aparecesse no IE, portanto decidi ajudar quem estiver a tentar fazer a mesma coisa. Fazer upload do ficheiro favicon.ico para a raiz do seu site deve ser suficiente para que o Favicon apareça no Firefox, mas pode não aparecer em versões do Internet Explorer superiores ao IE5. Nesse caso siga estes passos:

certifique-se que colocou o ficheiro favicon.ico na raiz do seu site, ou seja, em http://seusite.com/favicon.ico
certifique-se que colocou nas páginas do seu site, entre as tags

limpe a cache do Internet Explorer:
- Abra o Internet Explorer
- Vá a "Ferramentas>> Opções da Internet"
- Elimine todos os "Ficheiros Temporários da Internet"
- Apague também o "Histórico"
feche o Internet Explorer. Agora introduza na barra de endereços o URL do site aonde você colocou o Favicon. Pode ser necessário pressionar a tecla F5 no seu teclado para forçar o IE a mostrar o Favicon.

Se seguiu estas instruções o seu Favicon já deve estar a aparecer no seu browser.

Registro de Dominio:

Na Namecheap pode comprar domínios a preços acessíveis. Serviço de privacidade é gratuito.

Alojamento para seu site:

Uma das empresas de alojamento mais conhecidas e mais procuradas por quem faz sites: