Tutorial: Criar Favicon

On 03.04.09, In Adobe Photoshop, by

Criar Favicon

Favicon, é uma fusão das abreviatura de “favorite” (favorito) e “icon” (ícone), são pequenas imagens no formato *.ico com de cerca de 16×16 pixels que ficam guardados num site para serem apresentadas pelo browser.

favicon_browser

Data: 04/03/09

Autor: NgM_Me_KuRtE (Flávio Proença)

Programa necessário: Adobe Photoshop

Tempo: 5 minutos

Nível: Básico

Resultado Final:

favicon

Vamos então começar o nosso tutorial:

1- Abrir o Photoshop.
2- Criar um novo documento com as dimensões de 64×64 px.
3- Criem uma nova layer (Ctrl+Shift+N), e chamem-na de “Fundo“. Preencham cor uma cor que vocês queiram, podem até aplicar gradientes ou o estilos que vocês queiram. No meu caso eu preenchi de branco e apliquei um gradiente.

favicon_gradiente

Propriedades do meu gradiente:

favicon_gradiente_propriedades

4- Agora abrem o logo do vosso site, ou uma imagem que queiram usar (eu aconselho um logo), eu vou usar o logo da CriatividadeVisual. Colem o logo/imagem numa nova layer (Ctrl+Shift+N). Coloquem o logo como vocês acharem melhor (medidas, centrado, etc).

5- Para finalizar falta apenas um passo. Agora vamos ao menu Image » Image Size… (Alt+Ctrl+I). Vai abrir a seguinte janela.

favicon_image-size

Vamos mudar para:

favicon_image-size_final

6- Seu Favicon está finalizado. Agora você está perguntando a si mesmo, “Como é que eu gravo no formato *.ico se não aparece cá?” Calma, tudo tem solução…. para você poder guardar o seu ficheiro como *.ico você precisa de fazer o download do plugin, que serve para abrir e guardar ficheiros *.ico no photoshop. Pode efectuar o download do plugin Aqui.

Para aplicar favicon em seu site, basta colocar o seguinte código dentro das tags <head> e </head>.

<link rel=”shortcut icon” href=”favicon.ico” type=”image/x-icon” />

Além disto, o ícone em formato *.ico deve se chamar obrigatoriamente favicon e estar alojado na pasta (directório) principal do website. De forma que se o endereço da página for http://www.criatividadevisual.com, o endereço do ícone deve ser, http://www.criatividadevisual.com/favicon.ico