Como criar um favicon.ico no Photoshop

Se você observar na barra de endereços do seu navegador, ao lado esquerdo de onde está o nome do site, verá um pequeno ícone. Esse ícone é o favicon, ou seja, o favorite icon (icon favorito) - utilizado para representar o site no browser, nos bookmarks (favoritos) ou no desktop do computador (caso o utilizador tenha arrastado o ícone do browser para o desktop).

Veremos como criar um favicon personalizado utilizando o Photoshop:

1. Primeiramente, faça o download do plugin para versões windows nesse link.
2. Descompacte o arquivo baixado e copie o ICOFormat.8bi para a pasta File Formats dentro de Plug-Ins que está dentro da pasta onde o programa Photoshop foi instalado.
3. Com o plugin já instalado, abra no Photoshop a imagem que deseja transformar no favicon.ico, e reduza-a para o tamanho de 16×16 ou 32×32 pixels.
4. Vá ao menu Image » Mode e certifique-se de que está a trabalhar no modo RGB.
5. Se a imagem que está sendo manipulada no Photoshop possui um fundo independente do resto da composição – por exemplo, uma esfera vermelha sobre um fundo preto – exclua o layer (camada) do fundo, para que a esfera fique sobre um fundo transparente – indicada no Photoshop por um fundo quadriculado.
6. Vá ao menu File » Save As e escolha o formato ICO. Nomeie o ficheiro como favicon.ico.
7. Durante o processo de gravação do ficheiro ICO, ser-lhe-á perguntado que tipo de imagem deseja criar. Escolha o tipo favicon.ico.

Caso esteja querendo modificar o favicon de um site que esteja desenvolvendo:

Transfira por FTP o ícone para a raiz do seu site. Apesar de poder colocá-lo em qualquer directório, o local mais indicado é a raiz do site, a menos que, por alguma razão, não o possam colocar lá.

No código HTML da página do seu site, acrescente as seguintes linhas antes do tag </HEAD>

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

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

PRONTO! Basta agora carregar a página ou fazer um bookmark e vai ver o ícone. O Firefox, inclusive, mostra o ícone nos tabs.

Muito mais dicas no Efeitos Visuais

Tweet