O que é um favicon?
Favicon é o nome do ícone que aparece ao lado do seu site nos favoritos, barra de navegação e abas dos navegadores.
Esté é o Favicon do Wordpress
Por que usar um favicon?
Um Favicon não é primordial no seu site nem no de ninguém, mas é bem interessante usá-lo pelas seguintes razões:
1. Favoritos: quando alguém adicionar seu site aos favoritos, o favicon faz o papel de deixar seu site visível e fácil de achar.
2. Design: o favicon cria uma identidade mais forte no seu site, complementando o design.
3. Personalização: se você tem um layout personalizado, porque não ter um ícone personalizado?
4. Todo mundo tem: não, não é ser “maria vai com as outras”, é seguir bons exemplos. Se sites como o Google, Terra, Adobe, Wordpress e outros usam é porque realmente é útil =D
Oba! Eu quero um também!
A primeira coisa a fazer é criar sua arte. Neste caso usarei o Photoshop.
1. Crie um documento de 16×16 pixels com o fundo transparente.
File > New ou Ctrl+N
2. Agora é hora de criar. Use sua criatividade para combinar o layout do seu site com o ícone. Como é uma imagem bem pequena dê um zoom (Ctrl + 0 > “Fit on Screen”) e comece a desenhar.
Dicas quanto à arte:
Evite usar efeitos mirabolantes.
De preferência trabalhe pixel-by-pixel
Uma boa idéia é usar texto (na opção de anti-aliasing “Sharp”)
Se quer algum efeito a mais use um gradiente ou sombra (fazê-la manualmente normalmente é o mais fácil).
3. Se quiser fazer uma animação, essa é a hora! Abra a palheta de animação (Window > Animation) e crie frames com a animação que achar mais legal.
Hora de salvar
Embora você possa usar um programa específico para criação de ícones, vou ensinar um jeito mais fácil:
1. Depois de feita sua imagem no Photoshop salve em Gif animado.
File > Save for Web & Devices ou Ctrl+Alt+Shift+S
Esse atalho do teclado parece assustador, mas use e começará a ver que é tão fácil quanto criar uma nova camada (Ctrl+Alt+Shift+N)
2. Vá no site Favicon Generator e envie a imagem.
Clique em “Import Image” e envie sua imagem.
3. Esse site gera tudo automaticamente (muito útil), depois de enviar é só clicar lá embaixo em “Download Favicon“.
Quero mais!
Se quiser mais rapidez e autonomia - e se pretende criar outros ícones mais vezes, mesmo que para Desktop - recomendo baixar o Plugin ICO Format, para Photoshop. Assim é só ir no bom e velho “Save As” e o formato de ícone Windows (.ico) estará disponível. O único inconveniente é que ele não permite salvar ícones animados.
Hora de publicar
1. Tenha certeza que seu arquivo tem o nome de “favicon“.
2. Entre as tags head do seu site adicione o seguinte código:
<link rel=“shortcut icon” href=“favicon.ico” type=“image/x-icon” />Esse código é algo “de reserva” para alguns browsers mais antigos ou que eventualmente não encontrem seu favicon. Mesmo sem o código dá para ver o favicon na maioria dos browsers atuais.
3. Envie o arquivo .ico criado por você para o seu diretório raiz.
4. Se tudo correu bem, seu ícone começará a aparecer! \o/
3 Comentários
favicons são legais *.*
só que não é obrigado a colocar o nome como favicon e nem precisa ser .ico… pode ser qualquernome.gif por exemplo =)
Sapuk, isso que você colocou é verdade mesmo, só que nesse caso - utilizando um gif de qualquer outro nome - é necessário adicionar o código!
Se a pessoa utilizar o “favicon.ico” a maioria dos browsers o reconhece automaticamente!
;)
Oi Cláudia. Conheçi o Mulher Design através de seu vídeo-tutorial da Pen Tool, e lendo esse tutorial sobre Favicon me bateu uma dúvida: Qual a diferença entre Sharp (efeito no texto), e os outros efeitos (crisp, smooth, e strong)?
Eu nunca tinha reparado nessa opção. *.*
Obrigado ;)