Primeiros Passos

Como criar um favicon no Photoshop

Crie rapidamente no Photoshop um ícone usado pelos navegadores para identificar seu site.
Google+ Pinterest LinkedIn Tumblr
Anúncios Google

Favicon é o ícone do site ou blog, que ajuda o visitante a identificá-lo visualmente em listas de favoritos, entre guias, etc. Quando seu site é aberto no navegador do visitante, se houver a marcação necessária, será enviado um ícone, armazenado e exibido em locais apropriados.

Quem conhece os sites poderá identificá-los com facilidade graças aos ícones. Eles também ajudam em dispositivos com links de desktop.

Os favicons ícones devem ser formados por uma imagem muito característica do blog, como o logotipo, iniciais e/ou cores. O problema é que eles costumam aparecer muito pequenos — em navegadores, por exemplo, a partir de 16 x 16 pixels.

Ainda não está associando “o nome à pessoa”?

Como notou, são guias do Chrome. Repare nos ícones ao lado do nome de cada site. Eles ajudam a identificar mais rapidamente cada uma. Na primeira, um favicon antigo do Tutoriart (que ainda uso no painel de controle); na segunda, o novo favicon, na terceira o PageSpeed do Google, depois StackOverflow, GitHub e Wikipedia. O mesmo acontece com a barra de favoritos, abaixo da caixa de endereço.

Favicons são quase obrigatórios, logo se você ainda não tem um personalizado, demorou. Vamos criar um favicon no Photoshop, e depois fazer a marcação para exibi-lo no seu site.

Resolução e design

Vale notar que vamos fazer o menor de todos, o básico de 16 x 16 pixels, que atende bem a muitos usos. Mas para uma cobertura ampla de dispositivos em diversas situações, seriam necessários muitos outros — em alguns, o tamanho pode chegar a 558 x 558.

Primeiro, decida que imagem vai usar. Não pense em nada muito detalhado, estamos falando de 16 pixels! Procure uma imagem e cores que ajudarão a identificar seu site à primeira vista.

Escolhi a primeira letra do nosso logotipo, com as cores do site. Crie um novo arquivo do Photoshop, com 16 x 16 pixels.

Nota: é altamente recomendável (se não obrigatório) trabalhar com bastante zoom aqui, algo como 3200%.

Preencha o fundo com a cor principal do seu site ou logotipo. Eu até poderia usar a mesma fonte para criar a letra, mas de novo, estamos falando de uma resolução ridiculamente pequena, e não vai ficar nítido o suficiente.

Nesse caso, eu tenho como desenhar os contornos de forma muito mais precisa com uma ferramenta como a Letreiro Retangular ou até o Laço. Crie uma nova camada, e nela determine a forma da letra.

Tente manter as proporções de espaço. Dependendo do que vai desenhar, se não couber deixando espaço adequado nas laterais, o Photoshop “atrai” o contorno para um pixel fora do lugar. No exemplo acima, sobraram exatamente 3 pixels em cada lateral do Letreiro Retangular.

Como a largura do favicon é de 16 pixels, 16 – 6 = 10 pixels de largura no “chapéu” da letra T. Preencha de branco (tecle D, depois Ctrl + Del).

A linha verde, como deve ter imaginado, é o meio do objeto. Não tem como desenhar em meio pixel, logo será impossível fazê-la com 3 pixels e manter ao centro — o Photoshop vai atrair dois pixels para a esquerda ou direita da linha central.

Como meu logo tem uma fonte alta, alongada, escolhi mudar um pouco e desenhar um T alto e fino. A parte superior ficou com 8 x 2, e a haste com 2 x 10.

Como salvar

O formato padrão do favicon é de ícone, usado em navegadores (cof, cof, antigos) como o Internet Explorer. Então, se quiser mais compatibilidade, é recomendável usar este formato. Se não, o favicon pode ser salvo em PNG ou GIF — logo, fique à vontade para criar imagens com transparência.

Nota: testei gifs animados como favicon e só funcionam no Firefox.

Para salvar como ícone, o Photoshop precisa de um plugin, o ICO Format. É grátis, só baixar aqui e instalar (veja aqui como instalar plugins e outros recursos no Photoshop).

Os links de download estão ali no canto. Escolha de acordo com seu sistema, descompacte e instale.

Salve seu arquivo de favicon e reinicie o Photoshop. Reabra o arquivo, vá ao menu Arquivo > Salvar Como…, e na lista do “Tipo”, selecione ICO. Na janela de diálogo, mantenha a opção “Standard ICO” e clique em OK.

Como exibir o favicon

Primeiro, envie o arquivo do ícone para seu servidor. Use um programa de FTP para isso, ou o próprio painel de controle do servidor, que deve ter uma opção de “Gerenciar arquivos” ou “File Manager” — certamente os serviços pagos têm, no padrão cPanel.

Painéis em cPanel tem opção para gerenciar arquivos

Coloque o ícone na pasta raíz do site (a pasta principal do site no servidor, normalmente fica dentro da pasta www e tem um nome parecido com o do site). Após selecionar a pasta indicada, clique em Upload e envie o ícone.

Selecione a pasta do site ou blog e após clicar em Upload, selecione o ícone já em seu computador

Faça o mesmo com a pasta raíz do seu template, que no WordPress fica no caminho wp-content > themes > seu_tema). Assim, o favicon aparecerá tanto como mostrado antes, através do código abaixo, quanto na sua página de feeds e no painel de administração.

Com o favicon instalado, abra o arquivo header.php do seu tema (em temas com estrutura padrão). Procure pela tag <head> e logo depois dela, insira:

<link rel="shortcut icon" href="<?php bloginfo('stylesheet_directory'); ?>/favicon.ico" type="image/x-icon" />

Nota: procure antes por qualquer chamado pelo favicon que já exista, senão esta etapa será desnecessária, não queremos o código escrito duas vezes.

Abra seu site e veja se o favicon apareceu na guia do navegador. Se não, tente esvaziar o cache do navegador (a maior parte deles através do atalho Ctrl + Shift + Del, ou pelo menu Ferramentas > Limpar Dados de Navegação (Chrome) ou Ferramentas > Limpar Dados Pessoais (Firefox), e então atualize a página.

Alguns servidores (principalmente os grátis) não aceitam certos formatos de arquivo, como o .ico — alguns aceitam só html e css, além de formatos comuns de imagem como jpg e png. Nesse caso, você terá que salvar o favicon como imagem, e fazer o link no header.php de forma semelhante.

<link rel="shortcut icon" href="favicon.gif" type="image/gif" />

Isto pode não funcionar em alguns navegadores, que aceitem apenas o formato de ícone para o favicon (Internet Explorer).

Mais sobre Favicon no Codex do WordPress (em inglês).

Dúvidas, correções, adições, comentem.

Atualização 07/2012: esqueci de avisar que alguns navegadores, como o Chrome, aceitam favicon em formato de imagem como .png, mas não é recomendável se quiser mais compatibilidade, já que ele pode não aparecer em outros como o Internet Explorer. O certo mesmo é ter o favicon no formato .ico.

Atualização 2017

Favicon no WordPress

A partir da versão 4.3, o WordPress ganhou uma ferramenta de personalização em tempo real, que permite, entre outras coisas, definir facilmente um favicon. Ela exige que seja uma imagem de no mínimo 512 x 512 pixels, e ao enviar, serão criados os tamanhos necessários. Ou seja: não adianta mandar o ícone de 16 x 16, salve em vez disso uma imagem de no mínimo 512 x 512.

Para usar, no menu do painel de administração, siga pela opção Aparência > Personalizar. O site será aberto em modo de edição. Clique em Identidade do Site, e desça até Ícone do Site.

Faça o upload do seu ícone e clique em Salvar e Publicar para confirmar a alteração.

Fundador do Tutoriart em 2010, é ex-instrutor de Photoshop, design web e gráfico. Em quase uma década de redação online, tem cerca de 1500 artigos publicados. Gerencia também o Memória BIT.

1 Comentário

Deixe um Comentário

Pin