Logo Blog Pixwell

Web Design e outras coisas interessantes

O que é um favicon e como fazer um?

Barra de endereços do navegadorFavicon são aqueles ícones que ficam na barra de endereços do seu navegador, nas abas e também nos seus favoritos, eles servem para identificar, e claro, dar uma identidade ao seu site.  Nesse tutorial vou ensinar como fazer um favicon usando uma ferramenta online.

É muito fácil fazer um favicon, você pode usar qualquer dimensão de imagem, mas é preferível que se use uma com dimensões quadradas, pois como é mostrado na imagem acima, o espaço é melhor aproveitado quando a imagem é quadrada.

Então, mão na massa!

1) Escolha a imagem que quer usar para seu favicon. No meu caso usei parte da imagem do meu logotipo:

Modelo favicon

Caso precise de alguma inspiração para criar seu favicon, dê uma olhada nos links abaixo:

Smashing Magazine 1

Smashing Magazine 2

2) Acesse o site Dynamic Drive:

Logo Site dynamic Drive

3) Clique em “Selecionar arquivo” e selecione a imagem que você escolheu

Campo selecionar arquivo

4) Clique em “Create Icon”, será exibido um preview do seu ícone com um botão de download logo abaixo. Ccaso estiver tudo certo, clique nele e baixe seu favicon (Difícil, né?! hehehe …)

preview do favicon

OK, mas como “instalo” isso no meu site?

Primeiramente coloque o arquivo favicon.ico na raiz do seu site, onde se encontra o index. html ou index. php. No caso do Joomla ou WordPress, coloque-o junto do index.php do template que está usando.

Insira a linha abaixo na <head> do seu site:


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

Ficando da seguinte maneira:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Nome do site</title>

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

OBS.:  O favicon não irá aparecer imediatamente no seu site, seja paciente

Veja Também:   8 Fontes CSS que você poderia usar para o seu site